说明：此系列文章是个人对Tailwind CSS官方文档的翻译，不是很严谨，请谅解。
添加工具类
尽管tailwind 提供了一系列很全面的开箱即用的工具类，但是难免还是会有那种添加自定义类的情况。
想要确定一种扩展框架的最佳方式是一件让人挺头大的事，于是这里很贴心地列举了几种添加自定义工具类的最佳实践，你可以选自己用的最顺手的一种。
直接在 CSS 文件莫问添加自定义工具类
/* 千万不要写在这里 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 记住，得写在这里 */
.retote-0{
transform: retote(0deg);
}
.retote-90{
transform:retote(90deg);
}
.retote-180 {
transform: retote(180deg);
}
.retote-270 {
transform:retote(270deg);
}
由于在CSS中声明顺序很重要，得确保新的工具类要写在CSS文件最底下，这样就避免了一些特异性问题。千万不要把自定义工具类写在 CSS 文件顶上。
如果项目中使用的事postcss-import或者Less, Sass 或 Stylus 这种预处理器的话，最好是把自定义的工具类写在一个独立的文件里面，然后把它引入。
/* 使用 postcss-import 的情况 */
@important "tailwindcss/base";
@important "tailwindcss/components";
@important "tailwindcss/utilities";
@important "./custom-utilities.scss"; /* 注意这句 */
/* 使用 Sass 或者 Less 的情况 */
@tailwind base;
@tailwind components;
@tailwind utilities;
@important "./custom-utilities"; /* 注意这句 */
生成响应变体
如果你在tailwind.config.js文件中定义了断点，而且想要给基于这些断点的自定义工具类创建相应变体的话，就可以在@responsive指令中将工具类进行包裹。
@tailwind base;
@tailwind components;
@tailwind utilities;
@responsive {
.retote-0 {
transform: retote(0deg);
}
.retote-90 {
transform: retote(90deg);
}
.retote-180 {
transform: retote(180deg);
}
.retote-270 {
transform: retote(270deg);
}
}
Tailwind 会自动给咱自定义工具类生成前缀版本，就可以在不同的断点处根据相应的条件应用这些样式了。
创建伪类变体
要是想给自定义工具类创建伪类变体的话，就直接在@variants 指令里进行包裹：
@tailwind base;
@tailwind components;
@tailwind utilities;
@variants hover, focus {
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-270 {
transform: rotate(270deg);
}
}
这样，Tailwind 会自动给每个自定义工具类生成前缀版本，就可以在不用的状态下给元素应用这些样式。
伪类变体的生成顺序跟你写在@variants指令种中的顺序是一致的，所以你如果想用某个伪类的优先级比另一个高的话，就得确保这个得写在优先级低的伪类的后面。
/* Focus 的优先级比 hover 的高 */
@variants hover, focus {
.retote-0 {
transform: retote(0deg);
}
/* ... */
}
要是你想同时生成自定义工具类的响应式变体和伪类变体的话呢，就把@variants指令包在 @responsive指令里面就好了：
@tailwind base;
@tailwind components;
@tailwind utilities;
@responsive {
@variants hover, focus {
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-270 {
transform: rotate(270deg);
}
}
}
使用插件
除了直接在CSS 文件里面添加之外，你也可以写插件来给 Tailwind 添加工具类。
//tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugin: [
plugin(function({ addUtilities }){
const newUtilities = {
'.retote-0': {
transform: 'retote(0deg)',
},
'.retote-90': {
transform: 'retote(90deg)',
},
'retote-180': {
transform: 'retote(180deg)',
},
'retote-270': {
transform: 'retote(270deg)'
},
}
addUtilities(newUtilities, ['responsive', 'hover'])
})
]
}
如果你想把自己的自定义工具类作为库发布、或者想在多个项目之间共享使用的话，用插件就是个很好的选择了。