Tailwind CSS
平台内置了 Tailwind CSS (opens new window) , 可通过各种 程序类 快速构建自定义用户界面，再也不用写那些 "裹脚布" 似的 css 啦
# Tailwind CSS 的 vscode 插件
在 vscode 插件商店搜 bradlc.vscode-tailwindcss 安装后，鼠标覆盖到对应的类名，即可带来智能提示，如下图
# Tailwind CSS 文档
官方英文文档 (opens new window) Tailwind CSS 最新版本
非官方中文文档 (opens new window)
# Tailwind CSS 使用技巧
# 1. 自定义属性值
拿最常用的 width 属性来举例，tailwindcss 内置了这些 width#class-reference (opens new window) 类名，有时候用户想写任意宽度值怎么做呢，比如给 div 一个 666px 的宽度 ，只需要按照下面的写法。当然不仅仅是宽度可以自定义，所有属性都支持这种模式，你只需要在自定义的时候用 [ ]包起来即可。
<div class="w-[666px]" />
# 2. !important 权重，这里我们分为 三 步走
# 2-1. 单个实用程序类加 !important
- 比如给
p标签 一个black !important的高权重字体颜色，只需要按照下面的写法。也就是某个属性，你需要加权重，那么就在其前面加上!这个感叹号即可。
<p class="!text-black">
This will be medium even though bold comes later in the CSS.
</p>
2
3
# 2-2. ! 总是在实用程序名称的开头，在任何变体之后，但在任何前缀之前
比如下面的
有效代码，解释一下代码的意思，就是当鼠标覆盖上去，字体变成白色。hover:代表变体，text-white代表程序名称（任何前缀）。- 有效代码
<div class="hover:!text-white"></div>1- 无效代码
<div class="!hover:text-white"></div>1
# 2-3. 全局配置!important
- 在
tailwind.config.js文件中如下配置即可，具体参考 configuration#important (opens new window)
module.exports = {
important: true,
};
2
3
温馨提示 ❤️
全局配置 !important 后，Tailwind 的所有实用程序类都将生成为 !important，当然不推荐这里做，因为在合并向元素添加内联样式的第三方 JS 库时，设置 important 为可能会引入一些问题，Tailwind 的 !important 实用程序会破坏内联样式，这可能会破坏您的预期设计，不过也有解决办法，具体参考 configuration#selector-strategy (opens new window)
# 3. 悬停、焦点和其他状态
# 4. 响应式设计
# 5. 暗黑模式
- 比如在
非暗黑模式时给div标签一个白色背景（bg-white），在暗黑模式时给div标签一个黑色背景（bg-black），只需要在程序类前面加上dark:即可。
<div class="bg-white dark:bg-black"></div>
# 5. 重用样式
当项目越来越大时，如果不规范使用 tailwindcss ，很容易造成项目难以维护。这里平台有两点提议，如下：
- ① 将重复的模块，抽离成组件
- ② 使用
@apply提取类，参考 src/style/tailwind.css (opens new window)，代码解释如下：
@layer components {
.flex-c {
@apply flex justify-center items-center;
}
}
2
3
4
5
上面的代码意思是，将 flex 、 justify-center 、 items-center 都提取到自定义的 flex-c 这个程序类里，然后我们可以向下面代码一样使用：
<div class="flex-c"></div>
# 6. 定制化 Tailwind CSS
# CSSNANO
- cssnano 中文文档 (opens new window)
- 平台集成了
cssnano集成代码位置 (opens new window) ，它是一款基于postcss构建的css优化开源工具。cssnano能为你的CSS文件做多方面（多余的空白被删除、标识符被压缩、清理无用的CSS代码）的的优化，以确保最终生成的CSS文件对生产环境来说体积是最小的。
# Autoprefixer
- 平台集成了
Autoprefixer集成代码位置 (opens new window) ,它是一款自动管理浏览器前缀（-webkit-、-moz-、-ms-）的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，也就是说写CSS的时候，你不用考虑前缀了，会自动加上前缀。
# PostCSS
postcss是一款通过js插件来转换css的开源工具，通过这些插件可以支持变量和混合，可以通过追加浏览器前缀生成兼容性的样式，也可以通过 polyfill (opens new window) 把新的样式特性处理成通用的样式，可以使用css模块以及样式的规则校验，关于postcss更多的内容点 这里 (opens new window) 去了解。
CSS 框架选型经历
平台其实在 CSS 框架 选型中一共经历了三个阶段。
- 第一阶段：windicss (opens new window) 起初选这个的原因是当时
tailwindcss还没有升级到v3.0版本 - 第二阶段：unocss (opens new window) 选择这个的原因是
windicss好久没有维护了，并且windicss还有本地开发内存溢出等问题 - 第三阶段：tailwindcss (opens new window) 选择这个的原因是虽然
unocss很强大，功能也多，但是可能就是因为功能太多，带来的问题也就越多吧。其实，平台只是需要一个稳定的纯CSS框架。tailwindcss在vite中使用不需要安装什么插件，只需要安装tailwindcss即可，并且tailwindcss未处理的 issues (opens new window) 极少，维护很及时，经过再三考虑和一些实践，最终选择了稳定的tailwindcss