tailwindcss 官网(五)核心概念:添加新的功能类、函数与指令(@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen)、px、em、rem
文章目录
- !important
- 这个属性可以让浏览器优选执行这个语句,加上!importanrt可以覆盖父级的样式。
1. 添加新的功能类
使用您的自定义功能类来扩展 Tailwind。
尽管 Tailwind 提供了相当全面的开箱即用的功能类集,您仍可能会遇到需要添加一些自己的功能类的情况。
确定扩展框架的最佳方法非常不易,因此这里有一些最佳实践,可以帮助您以最惯用的方式添加自己的功能类。
使用 CSS
将自己的功能类添加到 Tailwind 的最简单的方式是直接添加到您的 CSS 中。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.scroll-snap-none {
scroll-snap-type: none;
}
.scroll-snap-x {
scroll-snap-type: x;
}
.scroll-snap-y {
scroll-snap-type: y;
}
}
通过使用 @layer
指令, Tailwind 将自动把这些样式移动到 @tailwind utilities
相同的位置,以避免出现意外的未知问题。
使用 @layer
指令也会指示 Tailwind 在清除 功能类
层时考虑这些样式。阅读我们的 生产优化文档以了解更多信息。
生成响应式变体
如果您想根据您的 tailwind.config.js
定义的断点创建功能类的变体,请将您的功能类放在 @variants
指令中,并把 responsive
添加到变体列表中。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants responsive {
.scroll-snap-none {
scroll-snap-type: none;
}
.scroll-snap-x {
scroll-snap-type: x;
}
.scroll-snap-y {
scroll-snap-type: y;
}
}
}
Tailwind 将自动生成每个自定义功能类的前缀版本,您可以有条件地应用这些样式到不同的断点上:
<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>
在 响应式设计文档 了解更多响应式功能类的信息。
生成深色模式变体
如果您想生成您自己的功能类的 dark mode variants,首先确保在您的 tailwind.config.js
文件中 darkMode
被设置为 media
或者 class
。
// tailwind.config.js
module.exports = {
darkMode: 'media'
// ...
}
下一步,将您的功能类放在 @variants
指令中,并且把 dark
添加到变体列表中。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants dark {
.filter-none {
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
}
}
Tailwind 将自动生成每个自定义功能类的前缀版本,您可以有条件地应用这些样式到不同的状态上:
<div class="filter-grayscale dark:filter-none"></div>
在 响应式设计文档 中了解更多关于响应式功能类的信息。
生成状态变体
如果您想为您的功能类生成 状态变体,请将您的功能类放在 @variants
指令中,并列出您想启用的变体:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer util