TailwindCSS：入门
安装
npm install -D tailwindcss
npx tailwindcss init<https://www.tailwindcss.cn/docs/>
配置模板文件的路径
在 tailwind.config.js 配置文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}将加载 Tailwind 的指令添加到你的 CSS 文件中
在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。
@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 吧
在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 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>
编辑器设置
Tailwind CSS 使用大量自定义 CSS at 规则，例如 @tailwind、@apply 和 @screen，在许多编辑器中，这可能会在无法识别这些规则的情况下触发警告或错误。
解决这个问题的方法几乎总是为你的编辑器/IDE 安装一个插件来支持 PostCSS 语言，而不是常规的 CSS。 如果您使用 VS Code，我们的官方 Tailwind CSS IntelliSense 插件包含专用的 Tailwind CSS 语言模式，该模式支持 Tailwind 使用的所有自定义 at 规则和函数。
使用 PostCSS 作为你的预处理器
如果您将 Tailwind 用于一个全新的项目，并且不需要将其与任何现有的 Sass/Less/Stylus 样式表集成，那么您应该高度考虑依赖其他 PostCSS 插件来添加您使用的预处理器功能，而不是使用单独的预处理器功能。预处理器。 这样做有几个好处： 你的构建会更快。由于您的 CSS 不必通过多个工具进行解析和处理，因此仅使用 PostCSS 即可更快地编译 CSS。 没有怪癖或解决方法。由于 Tailwind 在 CSS 中添加了一些新的非标准关键字（如 @tailwind、@apply、theme() 等），因此您通常必须以烦人的、不直观的方式编写 CSS，以使预处理器为您提供预期的输出。专门使用 PostCSS 可以避免这种情况。 有关可用 PostCSS 插件的相当全面的列表，请参阅 PostCSS GitHub 存储库，但这里有一些我们在自己的项目中使用并可以推荐的重要插件。
- Build-time imports
npm install -D postcss-importpostcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}变量使用方式
/* 原生 */
:root {
--theme-color: #52b3d0;
}
.btn {
background-color: var(--theme-color);
}
/* taildinwd */
.btn {
background-color: theme('colors.blue.500');
padding: theme('spacing.2') theme('spacing.4');
}更多就看文档吧。这里大概跟着过了遍概念，有了一定认知