TailwindCSS的使用，看这一篇就够了！

TailwindCSS的使用，看这一篇就够了！

安装 TailwindCSS 的方法，特别是针对 Vite + Vue 的环境，其他脚手架和框架的使用则类似。

创建项目后，项目默认集成了 PostCSS，而 TailwindCSS 是一个 PostCSS 插件，因此无需额外安装。

接着，创建 TailwindCSS 配置文件，使用初始化命令可以快速完成。

配置 tailwind.config.js 文件中的 content 字段至关重要，它将扫描 src 目录下所有以 vue/js/ts/jsx/tsx 结尾的文件，确保 TailwindCSS 在打包时能生成对应的样式文件。

TailwindCSS 不会生成一个全量的样式包，而是根据具体使用到的语法生成对应的样式代码，这样可以确保打包产生的样式包是最小的。

引入 Tailwind 基本指令，例如将 tailwind.css 或 main.js 文件引入到项目中。

开始使用 TailwindCSS 的语法。例如，通过指定样式类，可以在页面上创建一个正方形的蓝色盒子。

使用 TailwindCSS 语法检索技巧：官网中按样式语法检索想要的样式 class 是最高效的方式，如搜索 Border Radius 来获取圆角相关语法。

在自定义 class 中使用 Tailwind 语法时，可以通过 @apply 语法来为每个元素指定样式，这样可以避免重复编写代码，利于维护。

在组件级别的抽象场景下，若需要让他人覆盖 class，通常需要使用自定义 class 的方案。推荐遵循 BEM 的命名规范来复用组件级的样式。

如果需要在自定义样式中使用 Tailwind 的变量，可以通过 theme 函数获取 tailwind.config.js 中配置的 theme 值来实现。

当项目需要使用超出 TailwindCSS 配置之外的值时，Tailwind 提供了方法来优雅地解决问题，尽管这种方式并不被推荐，因为可能超出样式体系的规范，影响后期维护。

TailwindCSS 提供了全面且好用的响应式方案，如通过媒体查询轻松实现不同屏幕尺寸下的样式变化。

使用暗黑模式前，需要在配置文件中进行相应的设置，然后只需少量代码即可轻松启用暗黑模式。

TailwindCSS 支持重写和覆盖默认配置，实现团队 UI 规范的个性化需求，如自定义字体颜色等。

考虑到预处理器带来的优势，TailwindCSS 推荐在项目中移除预处理器，因为其核心价值在于减少样式代码的编写。如果确实需要嵌套语法，可以使用 postcss-nested 或 postcss-nesting 插件来实现。

TailwindCSS 的设计旨在消除样式代码，因此官方推荐在项目中避免使用预处理器。在使用 Tailwind 语法时，可能遇到预处理器与之冲突的情况，这需要开发者注意。2024-09-24