1. 核心思想与工作流程： Tailwind CSS 是一个 PostCSS 插件，支持命令行启动。 其核心工作流程是将生成的样式表插入到对应的插槽中，必须有一个css文件包含tailwind base、tailwind components、tailwind utilities三句指令，否则不会产生任何效果。2. 样式表结构： tailwind base：相当于一份重置样式表，...
tailwindcss 方案简介
Tailwind CSS 方案简介：
1. 核心思想与工作流程： Tailwind CSS 是一个 PostCSS 插件，支持命令行启动。 其核心工作流程是将生成的样式表插入到对应的插槽中，必须有一个css文件包含tailwind base、tailwind components、tailwind utilities三句指令，否则不会产生任何效果。
2. 样式表结构： tailwind base：相当于一份重置样式表，包含最基础的样式。 tailwind components：包含一些组件类，相当于复合样式。 tailwind utilities：包含工具类，即如flex、mxauto等内置样式。 样式表的顺序至关重要，建议按照base、components、utilities的顺序排列，以保证样式的正确覆盖。
3. 内置工具类名： Tailwind CSS 内置了大量工具类名，理论上可以做到100%使用内置方案覆盖。 类名设计直观，如block、absolute、flex等，只看名称就能唯一确定属性。 提供了一些简写规则，如left、right、top、bottom分别对应l、r、t、b，leftright对应x，topbottom对应y。
4. 修改器语法： Tailwind CSS 提供了修改器语法，用于在特定条件下应用样式。 内置的修改器包括hover、first、group、grouphover等，用于实现如悬停效果、第一个子元素样式、父子组件联动等效果。 提供了!重要修改器，用于强制覆盖其他样式。
5. JIT模式： Tailwind CSS 3.x 版本默认开启了JIT模式。 JIT模式允许我们书写动态CSS样式，不再受到静态规则集的限制。 支持自定义属性值，使用方括号表示。
6. 响应式设计： Tailwind CSS 提供了一组默认规则，使用minwidth实现的断点功能实现响应式方案。 默认的断点包括多个屏幕尺寸，确保样式在不同设备上都能正确显示。 Tailwind CSS具有移动端优先的特点，基础样式必须为小屏幕手机设计。
7. 自定义类名与覆盖规则： 可以在项目内添加自己实现的类名。 建议将自定义类名写在主文件并放在对应的layer下，以确保覆盖规则的正确性。 Tailwind CSS会自动剔除没有用到的类名，优化最终的CSS文件。
2025-03-15
