地址：Installation – Tailwind CSShttps://tailwindcss.com/docs/installation

1. 安装 Tailwind CSS

npm install -D tailwindcss

npx tailwindcss init

init 是 tailwindcss 命令的一个子命令，用于初始化新的 Tailwind CSS 项目。运行 npx tailwindcss init 命令会生成一个初始的 Tailwind CSS 配置文件（通常是 tailwind.config.js），该文件包含了一些默认配置，如颜色、字体、间距等。你可以在生成的配置文件中根据项目需求进行定制和修改。

总而言之，npx tailwindcss init 命令的作用是在当前项目中初始化一个新的 Tailwind CSS 配置文件，为项目提供默认的配置。

2. 配置模板路径

将路径添加到文件中的所有模板文件。’tailwind.config.js'

tailwind.config.js

/** @type {import(‘tailwindcss’).Config} */ module.exports = {

        content: [“./src/**/*.{html,js}”],

        theme: {extend: {}, },

        plugins: [],

    }

3. 将 Tailwind 指令添加到自己的 CSS 中

将 Tailwind 每个图层的指令添加到主 CSS 文件中。‘@tailwind'

@tailwind base;

@tailwind components;

@tailwind utilities;

4. 运行 CLI 工具以扫描模板文件中的类并构建 CSS。

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

• npx tailwindcss: 这是使用 npx 运行 Tailwind CSS 的命令。

• -i ./src/input.css: -i 参数用于指定输入文件的路径。在这里，./src/input.css 是要编译的原始 CSS 文件的路径。

• -o ./src/output.css: -o 参数用于指定输出文件的路径。在这里，./src/output.css 是编译后的 CSS 文件的路径。

• --watch: --watch 参数表示在文件发生更改时持续监视文件，并在文件更改后重新编译。这意味着一旦你保存了 input.css 文件，Tailwind CSS 将自动重新编译并将结果输出到 output.css 文件中。

综合起来，这个命令的意思是：使用 Tailwind CSS 编译 ./src/input.css 文件，并将编译后的结果输出到 ./src/output.css 文件中。同时，监视输入文件和输出文件的变化，以便在文件更改后自动重新编译。

5. 开始在 HTML 中使用 Tailwind

Hello world!