如何在静态页面构建并使用tailwindcss

Hrml

前端学习笔记

發布日期: 2023-11-24

文章字數: 237

閱讀時長: 1 分

安装 Tailwind CSS

npm install -D tailwindcss

npx tailwindcss init

配置模板文件的路径

执行完上述操作会在根目录生成一个配置文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

将加载 Tailwind 的指令添加到你的 CSS 文件中

./src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

在你的 HTML 代码中使用 Tailwind 吧 🤗

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>