My Secret Pizza Recipe
This recipe is a secret, and must not be shared with anyone
hover,active,focus
<button
class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ..."
>
Save changes
</button>
first, last, odd, and even
<div>
<div class="first:bg-red-100">我是第一个</div>
<div class="even:bg-lime-100">我是第二个(偶数)</div>
<div class="odd:bg-green-100">我是第三个(奇数)</div>
<div>我是第四个</div>
<div>我是第五个</div>
<div class="last:bg-blue-100">我是最后一个</div>
</div>
required , invalid , disabled ....
<form class="w-[400px] mt-5">
<label class="block">
<span class="block text-sm font-medium text-slate-700">Username</span>
<input
type="text"
value="tbone"
disabled
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
"
/>
</label>
<label class="block">
<span class="block text-sm font-medium text-slate-700">email</span>
<input
type="email"
value="123@a."
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
"
/>
</label>
</form>
当你需要根据某个父元素的状态来设置元素的样式时,用 group 类标记父元素,然后使用 group-* 修饰符(如 group-hover )来设置目标元素的样式:
<div class="bg-orange-300 mt-4 p-3 cursor-pointer group">
<div class="inline-flex mr-3 bg-amber-100 group-hover:text-red-600">
我是子元素
</div>
我是父元素
</div>
这种模式适用于每个伪类修饰符,例如 group-focus
、 group-active
甚至 group-odd
。
嵌套组时,您可以根据特定父组的状态设置样式,方法是使用 group/{name} 类为该父组指定唯一的组名,并使用 group-hover/{name} 类将该名称包含在修饰符中:
<div class="bg-zinc-100 cursor-pointer group/grandpa">
我是爷爷
<div class="bg-red-300 group/father">
我是父亲
<div
class="bg-lime-300 group-hover/father:text-orange-500 group-hover/grandpa:bg-cyan-500"
>
我是儿子
</div>
</div>
</div>
您可以通过在方括号中提供自己的选择器作为任意值来动态创建一次性的 group-* 修改器:
<div class="test group">
<div class="group-[.test]:bg-red-400">测试test类</div>
</div>
为了获得更多的控制,你可以使用 &
字符来标记 .group
应该在最终选择器中相对于你传入的选择器的位置:
<div class="group">
<div class="group-[:nth-of-type(3)_&]:block">
<!-- ... -->
</div>
</div>
当你需要根据兄弟元素的状态来设计元素的样式时,用
peer
类标记兄弟元素,然后使用peer-*
修饰符(如peer-invalid
)来设计目标元素的样式:
请输入正确地址
<div>
<input
type="email"
class="peer outline-dashed outline-orange-600 "
placeholder="请输入邮箱"
/>
<p class="mt-2 invisible peer-invalid:visible text-red-600 text-sm">
请输入正确地址
</p>
</div>
此模式适用于每个伪类修饰符,例如 peer-focus
、 peer-required
和 peer-disabled
。
值得注意的是, peer
标记只能用于以前的兄弟,因为 CSS 中通用的兄弟组合子是这么工作的。
当使用多个对等体时,您可以通过使用 peer/{name}
类为特定对等体指定一个唯一的名称,并使用 peer-checked/{name}
类将该名称包含在修饰符中,来对特定对等体的状态进行样式化:
<fieldset class="mt-4">
<legend>Published status</legend>
<input id="draft" class="peer/draft" type="radio" name="status" checked />
<label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
<input id="published" class="peer/published" type="radio" name="status" />
<label for="published" class="peer-checked/published:text-sky-500"
>Published</label
>
<div class="hidden peer-checked/draft:block">
Drafts are only visible to administrators.
</div>
<div class="hidden peer-checked/published:block">
Your post will be publicly visible on your site.
</div>
</fieldset>
您可以通过在方括号中提供自己的选择器作为任意值来动态创建一次性的 peer-*
修改器
<div class="mt-3">
<input
id="text"
name="text"
type="text"
class="is-dirty peer border-b-slate-800 border-[1px] outline-none"
required
/>
<label for="text">文本(我在右边):</label>
<div class="peer-[.is-dirty]:peer-invalid:block hidden text-red-500">
This field is required.
</div>
</div>
为了获得更多的控制,你可以使用 &
字符来标记 .peer
应该在最终选择器中相对于你传入的选择器的位置:
<div>
<input type="text" class="peer" />
<div class="hidden peer-[:nth-of-type(3)_&]:block">
<!-- ... -->
</div>
</div>
使用 before
和 after
修饰符设置 ::before
和 ::after
伪元素的样式:
当使用这些修改器时,Tailwind 将默认自动添加content: ''
,因此您不必指定它,除非您想要不同的值:
值得注意的是,在 Tailwind 项目中的大多数事情都不需要 ::before
和 ::after
伪元素-使用真正的 HTML 元素通常更简单。
例如,这里是与上面相同的设计,但使用 <span>
而不是 ::before
伪元素,这更容易阅读,实际上代码更少:
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
When you look
<span class="relative">
<span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
<span class="relative text-white">annoyed</span>
</span>
all the time, people think that you're busy.
</blockquote>
保存 before
和 after
是为了防止伪元素的内容实际上不在 DOM 中并且用户无法选择。
请注意,如果您禁用了我们的preflight
基本样式,则默认情况下 content 属性不会设置为空字符串,并且您需要在任何时候使用 before
和 after
修饰符时包括 content-['']
使用 placeholder
修饰符设置任何输入或文本区域的占位符文本的样式:
<label class=" block mt-2">
<input
class="placeholder:italic placeholder:text-red-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
placeholder="Search for anything..."
type="text"
name="search"
/>
</label>
使用 file
修饰符在文件输入中设置按钮样式:
<label class="block">
<span class="sr-only">选择照片</span>
<input
type="file"
class="block w-full text-sm text-slate-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-violet-50 file:text-violet-700
hover:file:bg-violet-100
"
/>
</label>
请注意,Tailwind 的边框重置不适用于文件输入按钮。这意味着要为文件输入按钮添加边框,您需要使用类似 file:border-solid
的类以及任何border-width
实用程序显式设置边框样式:
<input type="file" class="file:border file:border-solid ..." />
使用 marker
修饰符设置列表中的计数器或项目符号的样式:
<ul
role="list"
class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500"
>
<li>5 cups chopped Porcini mushrooms</li>
<li>1/2 cup of olive oil</li>
<li>3lb of celery</li>
</ul>
我们将 marker 修饰符设计为可继承的,因此尽管您可以直接在 <li>
元素上使用它,但也可以在父元素上使用它,以避免重复。
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>
So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers a
strange calm came over me. I don't know if it was divine intervention or the
kinship of all living things but I tell you Jerry at that moment, I
<em>was</em> a marine biologist.
</p>
</div>
使用 first-line
修饰符设置内容块中第一行的样式,使用 first-letter
修饰符设置第一个字母的样式:
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
<p
class="first-line:uppercase first-line:tracking-widest
first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
first-letter:mr-3 first-letter:float-left
"
>
Well, let me tell you something, funny boy. Y'know that little stamp, the one
that says "New York Public Library"? Well that may not mean anything to you,
but that means a lot to me. One whole hell of a lot.
</p>
使用 backdrop
修饰符设置本地 <dialog>
元素的背景样式:
<dialog class="backdrop:bg-gray-50">
<form method="dialog">
<!-- ... -->
</form>
</dialog>
如果你在你的项目中使用原生的 <dialog>
元素,你可能还想阅读关于使用 open 修饰符来设置打开/关闭状态的样式。
要在特定断点处设置元素的样式,请使用响应式修饰符,如 md
和 lg
。
例如,这将在移动的上呈现 3 列网格,在中等宽度的屏幕上呈现 6 列网格,在大宽度的屏幕上呈现 8 列网格
<div class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 gap-3">
<div class="bg-red-100">1</div>
<div class="bg-red-100">2</div>
<div class="bg-red-100">3</div>
<div class="bg-red-100">4</div>
<div class="bg-red-100">5</div>
<div class="bg-red-100">6</div>
<div class="bg-red-100">7</div>
<div class="bg-red-100">8</div>
</div>
prefers-color-scheme
媒体查询告诉您用户喜欢浅色主题还是深色主题,通常在操作系统级别进行配置。
使用不带修改器的实用程序来实现灯光模式,并使用 dark
修改器来提供暗模式的覆盖:
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
<div class="dark mt-2 grid grid-cols-2 gap-2">
<div
class=" bg-white dark:bg-slate-900 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl"
>
<h3
class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight"
>
Writes Upside-Down
</h3>
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including
upside-down. It even works in outer space.
</p>
</div>
<div class="bg-white rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
<h3 class="text-slate-900 e mt-5 text-base font-medium tracking-tight">
Writes Upside-Down
</h3>
<p class="text-slate-500 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including
upside-down. It even works in outer space.
</p>
</div>
</div>
当视口处于特定方向时,使用 portrait
和 landscape
修改器有条件地添加样式:
我是竖屏
使用 print
修饰符有条件地添加仅在打印文档时应用的样式,可以使用ctrl+P
来查看打印机下面的样式效果:
This recipe is a secret, and must not be shared with anyone
<div>
<article class="print:hidden">
<h1>My Secret Pizza Recipe</h1>
<p>This recipe is a secret, and must not be shared with anyone</p>
</article>
<div class="hidden print:block text-red-500">
Are you seriously trying to print this? It's secret!
</div>
</div>
使用 supports-[...]
修饰符可以根据用户浏览器是否支持某个功能来设置样式。
<div class="flex supports-[display:grid]:grid ...">
<!-- ... -->
</div>
在幕后, supports-[...]
修饰符生成 @supports rules ,并在方括号之间接受任何与@supports (...)
一起使用的东西,比如属性/值对,甚至是使用 and
和 or
的表达式。
为了简洁,如果你只需要检查一个属性是否被支持(而不是一个特定的值),你可以只指定属性名称:
<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
<!-- ... -->
</div>
您可以在 tailwind.config.js
文件的 theme.supports
部分中为项目中使用的常见 @supports 规则配置快捷方式:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
supports: {
grid: 'display: grid',
},
},
}
然后,您可以在项目中使用这些自定义 supports-*
修改器:
<div class="supports-grid:grid">
<!-- ... -->
</div>
使用 aria-*
修饰符根据ARIA属性有条件地设置样式。
例如,要在 aria-checked
属性设置为 true 时应用 bg-sky-700 类,请使用 aria-checked:bg-sky-700
类:
<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
<!-- ... -->
</div>
默认情况下,我们已经为最常见的布尔ARIA属性包含了修饰符:
Modifier | CSS |
---|---|
aria-checked | &[aria-checked=“true”] |
aria-disabled | &[aria-disabled=“true”] |
aria-expanded | &[aria-expanded=“true”] |
aria-hidden | &[aria-hidden=“true”] |
aria-pressed | &[aria-pressed=“true”] |
aria-readonly | &[aria-readonly=“true”] |
aria-required | &[aria-required=“true”] |
aria-selected | &[aria-selected=“true”] |
通过编辑 tailwind.config.js
文件中的theme.aria
或 theme.extend.aria
,可以自定义可用的 aria-* 修改器:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
aria: {
asc: 'sort="ascending"',
desc: 'sort="descending"',
},
},
},
};
如果您需要使用一次性的 aria
修饰符,而该修饰符在主题中没有意义,或者对于采用特定值的更复杂的ARIA
属性,请使用方括号使用任意值动态生成属性。
<table>
<thead>
<tr>
<th
aria-sort="ascending"
class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
>
Invoice #
</th>
<!-- ... -->
</tr>
</thead>
<!-- ... -->
</table>
ARIA状态修饰符也可以使用 group-aria-*
和 peer-aria-*
修饰符来针对父元素和兄弟元素:
<table>
<thead>
<tr>
<th aria-sort="ascending" class="group">
Invoice #
<svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg>
</th>
<!-- ... -->
</tr>
</thead>
<!-- ... -->
</table>
使用 data-*
修饰符可以根据数据属性有条件地应用样式。
由于没有标准的 data-*
属性定义,默认情况下我们只支持任意值,例如:
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
您可以在 tailwind.config.js
文件的 theme.data
部分中为项目中使用的常用数据属性选择器配置快捷方式:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
data: {
checked: 'ui~="checked"',
},
},
}
然后,您可以在项目中使用这些自定义 data-*
修改器:
<div data-ui="checked active" class="data-checked:underline">
<!-- ... -->
</div>
当 <details>
或 <dialog>
元素处于打开状态时,使用 open 修饰符有条件地添加样式:
The mug is round. The jar is round. They should call it Roundtine.
<div class="max-w-lg mx-auto p-8">
<details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
<summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
Why do they call it Ovaltine?
</summary>
<div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
<p>The mug is round. The jar is round. They should call it Roundtine.</p>
</div>
</details>
</div>
就像任意值允许您在实用程序类中使用自定义值一样,任意变量允许您直接在HTML中编写自定义选择器修饰符。
任意变量只是表示选择器的格式字符串,用方括号括起来。例如,这个任意修饰符只选择第三个子元素:
<ul role="list" class="mt-2">
<li class="[&:nth-child(3)]:underline" v-for="num in 6">{{num}}</li>
</ul>
格式字符串与您在 addVariant 插件API中使用的格式字符串相同,其中 &
表示被修改的选择器。
任意变量可以与内置修改器堆叠,也可以相互堆叠,就像Tailwind中的其他修改器一样:
<ul role="list" class="mt-2">
<li class="lg:[&:nth-child(3)]:hover:underline" v-for="num in 6">{{num}}</li>
</ul>
如果需要在选择器中使用空格,可以使用下划线。例如,这个任意的修饰符选择你添加了类的元素中的所有 p 元素:
<div class="[&_p]:mt-4">
<p>Lorem ipsum...</p>
<ul>
<li>
<p>Lorem ipsum...</p>
</li>
<!-- ... -->
</ul>
</div>
如果您发现自己在项目中多次使用同一个任意修饰符,那么可能值得使用 addVariant API将其提取到插件中:
let plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
// Add a `third` variant, ie. `third:pb-0`
addVariant('third', '&:nth-child(3)')
})
]
}
所有Tailwind的修改器都可以与您自己的自定义类一起使用,只要您在Tailwind的一个层中定义它们或使用插件添加它们:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
<div class="lg:content-auto">
<!-- ... -->
</div>