TailWind CSS 文档添加工具类

说明：此系列文章是个人对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 会自动给咱自定义工具类生成前缀版本，就可以在不同的断点处根据相应的条件应用这些样式了。

<!-- 默认的是旋转180度，如果是在中等及以上大小的屏幕上就撤销旋转的样式 -->
<div calss="retote-180 md:retote-0"></div>

创建伪类变体

要是想给自定义工具类创建伪类变体的话，就直接在@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 会自动给每个自定义工具类生成前缀版本，就可以在不用的状态下给元素应用这些样式。

<div class="retote-0 hover:retote-90"></div>

伪类变体的生成顺序跟你写在@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'])
        })
    ]
}

如果你想把自己的自定义工具类作为库发布、或者想在多个项目之间共享使用的话，用插件就是个很好的选择了。