TailWind CSS 文档 函数与指令

说明：此系列文章是个人对Tailwind CSS官方文档的翻译，不是很严谨，请谅解。

函数与指令

@tailwind

用@tailwind指令来把 tailwind的base,components, utlities和screen样式添加到自己的CSS中。

/**
* 这个指令用来注入tailwind的基础样式和用插件注册的样式
*/
@tailwind base;
/**
* 这个指令用来注入tailwind的组件类和用插件注册的组件类
*/
@tailwind components;
/**
* 这个指令用来注入tailwind的工具类和用插件注册的工具类
*/
@tailwind utilities;
/**
* 这个指令用来控制tailwind注册每个工具类的响应式变体的位置
* 如果省略不写的话，tailwind会默认把这些类添加到你的style页面的最底部
*/
@tailwind screens;

@apply

用@apply指令来将已有的工具类列入你的自定义CSS中

1. 当你想把哪个HTML中的工具类提取到新组件中的时候，就可以用这个指令
2. 规则可以一行列出来，也可以多行使用@apply
3. 当然，把@apply声明和普通的CSS声明混在一起写也是OK的

.btn {
    @apply font-bold py-2 px-4 rounded;
}
.btn {
    @apply font-bold;
    @appky py-2;
    @apply px-4;
    @apply rounded;
}
.btn:hover {
    apply bg-blue-700;
    transform: translateY(-1px);
}

1. 为避免特异性问题，如果用@apply列出的规则里面如果有!important的话，!important会被自动删除
2. 如果想用@apply来列入一个已有的类，而且想把它!important的话，只需要把!important加在声明的末尾就OK了
3. 注意，如果你现在项目中用着Sass或者SCSS的话，就得用Sass 的插值属性才好使

/* ⭐案例一 */
.foo {
    color: blue !important;
}
.bar {
    @apply foo;
}
/* 上面的相当于 */
.bar {
    color: blue;
}
/* ⭐案例二 */
.btn {
    @apply font-bold py-2 px-4 rounded !important;
}
/* 相当于 */
.btn {
    font-weight: 700 !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    border-radius: .25rem !important;
}
.btn {
    @apply font-bold py-2 px-4 rounded #{!important};
}

得记住了，用@apply指令给其他工具类的伪类变体、响应式变体在行内进行列举是行不通的。而是应该将这个类的普通版本赋予到相应的伪类选择器或新媒体查询中。

/* 无效写法 */
.btn {
    @apply block bg-red-500;
    @apply hover:bg-blue-500;
    @apply md:inline-block;
}

/* 正确写法 */
.btn {
    @apply block bg-red-500;
}
.btn:hover {
    @apply bg-blue-500;
}
@screen md {
    .btn {
        @apply inline-block;
    }
}

如果你给工具类配置了前缀，但是想采用更简洁的语法的话，可以选择在使用@apply指令的时候省略前缀：

/* 下面两种都是有效写法 */
.btn {
    @apply te-font-bold tw-py-2 tw-px-4 tw-rounded;
}
.btn {
    @apply font bold py-2 px-4 rounded;
}

variants

@variants 指令可以用来生成自定义工具类的变体，诸如 responsive, hover, active之类，只需要把定义语句包裹在@variants指令中。（详见响应式设计与伪类变体章节）

@responsive

如果想要生成自定义类的响应式变体的话，可以用@responsve指令来啊包裹这些类的定义。

@responsive {
    .bg-gradient-brand {
        background-image: linear-gradient(blue, green);
    }
}
/* 根据自定义断点，上面的代码会生成下面的类 */
@media (min-width: 640px){
    .sm\:bg-gradient-brand {
        background-image: linear-gradient(blue, green);
    }
    /* ... */
}
@media (min-width: 768px){
    .md\:bg-gradient-brand {
        background-image: linear-gradient(blue, green);
    }
    /* ... */
}
@media (min-width: 1024px){
    .lg\:bg-gradient-brand {
        background-image: linear-gradient(blue, green);
    }
    /* ... */
}
@media (min-width: 1280px){
    .xl\:bg-gradient-brand {
        background-image: linear-gradient(blue, green);
    }
    /* ... */
}

上面的响应式变体会在你的样式页面末尾被添加到tailwind已有的媒体查询中，以确保带有响应式前缀的类总是比规定相同CSS属性的非响应式类更强。

@screen

@screen指令允许你通过名字来创建媒体查询，而不用非得在自己的CSS里面复制他们的值。

例如，假设你在 640px 处有个sm断点，而且你现在要根据这个断点写一些自定义CSS语句来，就不用像下边这样写个复制断点值的原生媒体查询：

@media (min-width: 640px) {
    /* ... */
}

用@screen指令的话，直接用断点名称来参考就行了：

@screen sm {
    /* ... */
}