地址：Installation - Tailwind CSS
https://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
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
