使用工具类进行样式设置

概述(Overview)

你可以通过在标记中直接组合许多单一功能的展示类（实用类）来使用 Tailwind 进行样式设计：

🌐 You style things with Tailwind by combining many single-purpose presentational classes (utility classes) directly in your markup:

ChitChat

You have a new message!

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />  <div>    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>    <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>  </div></div>

例如，在上面的 UI 中我们使用了：

🌐 For example, in the UI above we've used:

用于控制整体布局的显示和内边距工具（flex、shrink-0 和 p-6）
max-width 和 margin 工具（max-w-sm 和 mx-auto）用于限制卡片宽度并水平居中
使用 background-color、border-radius 和 box-shadow 工具（bg-white、rounded-xl 和 shadow-lg）来设置卡片的外观
用于设置徽标图片宽度和高度的宽度和高度工具（size-12）
用于处理徽标与文本之间间距的 gap 工具（gap-x-4）
用于设置卡片文本样式的字体大小、颜色和字体粗细工具 (text-xl、text-black、font-medium 等)

以这种方式设置样式与许多传统的最佳实践相矛盾，但一旦你尝试，你就会很快注意到一些非常重要的好处：

🌐 Styling things this way contradicts a lot of traditional best practices, but once you try it you'll quickly notice some really important benefits:

你能更快完成工作 — 你不需要花时间想类名、决定选择器，或者在 HTML 和 CSS 文件之间切换，因此你的设计能很快完成。
“进行更改感觉更安全”——向元素添加或移除一个工具类只会影响该元素，因此你无需担心会意外破坏其他使用相同 CSS 的页面。
维护旧项目更容易——修改某些内容只需在项目中找到相应的元素并更改类，而不必费心去记那些你六个月都没动过的自定义 CSS 是如何工作的。
你的代码更加可移植 — 由于结构和样式都存放在同一位置，你可以轻松地复制和粘贴整个 UI 部分，即使在不同的项目之间也可以。
你的 CSS 停止膨胀 — 由于工具类可以高度复用，你的 CSS 不会随着项目中新增的每一个功能线性增长。

这些好处对小型项目有很大影响，但对于大规模处理长期项目的团队来说，它们更有价值。

🌐 These benefits make a big difference on small projects, but they are even more valuable for teams working on long-running projects at scale.

为什么不直接使用内联样式？(Why not just use inline styles?)

对这种方法的常见反应是想知道“这不就是内联样式吗？” 在某些方面确实如此 — 你将样式直接应用于元素，而不是为它们分配类名，然后为该类设置样式。

🌐 A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class.

但使用工具类比内联样式有许多重要优势，例如：

🌐 But using utility classes has many important advantages over inline styles, for example:

受限制的设计——使用内联样式时，每个数值都是魔术数字。使用工具类时，你是从预定义的设计系统中选择样式，这使得构建视觉上统一的界面更加容易。
悬停、聚焦及其他状态 — 内联样式无法针对悬停或聚焦等状态，但 Tailwind 的状态变体可以轻松使用工具类为这些状态添加样式。
媒体查询 — 你不能在内联样式中使用媒体查询，但你可以使用 Tailwind 的响应式变体来轻松构建完全响应的界面。

此组件完全响应，包含具有悬停和活动样式的按钮，并且完全使用工具类构建：

🌐 This component is fully responsive and includes a button with hover and active styles, and is built entirely with utility classes:

在工具类中思考(Thinking in utility classes)

设置悬停和聚焦状态的样式(Styling hover and focus states)

要在元素的悬停或聚焦等状态下设置样式，请在任何工具类前加上你想要针对的状态前缀，例如 hover:bg-sky-700：

🌐 To style an element on states like hover or focus, prefix any utility with the state you want to target, for example hover:bg-sky-700:

将鼠标悬停在此按钮上以查看背景颜色变化

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

在 Tailwind 中，这些前缀被称为变体，只有当该变体的条件匹配时，它们才会应用工具类的样式。

🌐 These prefixes are called variants in Tailwind, and they only apply the styles from a utility class when the condition for that variant matches.

以下是生成的 hover:bg-sky-700 类的 CSS 样式：

🌐 Here's what the generated CSS looks like for the hover:bg-sky-700 class:

Generated CSS

.hover\:bg-sky-700 {  &:hover {    background-color: var(--color-sky-700);  }}

注意这个类除非元素被悬停，否则什么也不做？它的唯一作用就是提供悬停样式——别的什么都不做。

🌐 Notice how this class does nothing unless the element is hovered? Its only job is to provide hover styles — nothing else.

这与你编写传统 CSS 的方式不同，在传统 CSS 中，单个类通常会提供许多状态的样式：

🌐 This is different from how you'd write traditional CSS, where a single class would usually provide the styles for many states:

HTML

<button class="btn">Save changes</button><style>  .btn {    background-color: var(--color-sky-500);    &:hover {      background-color: var(--color-sky-700);    }  }</style>

你甚至可以在 Tailwind 中叠加变体，在多个条件匹配时应用一个工具类，比如组合 hover: 和 disabled:

🌐 You can even stack variants in Tailwind to apply a utility when multiple conditions match, like combining hover: and disabled:

<button class="bg-sky-500 disabled:hover:bg-sky-500 ...">Save changes</button>

在文档中了解关于悬停、聚焦及其他状态的元素样式的更多信息。

🌐 Learn more in the documentation styling elements on hover, focus, and other states.

媒体查询和断点(Media queries and breakpoints)

就像悬停和聚焦状态一样，你可以通过在任何工具前面加上要应用该样式的断点来为不同断点处的元素设置样式：

🌐 Just like hover and focus states, you can style elements at different breakpoints by prefixing any utility with the breakpoint where you want that style to apply:

调整此示例的大小以查看布局变化

<div class="grid grid-cols-2 sm:grid-cols-3">  <!-- ... --></div>

在上面的例子中，sm: 前缀确保 grid-cols-3 只会在 sm 断点及以上触发，默认情况下该断点为 40rem：

🌐 In the example above, the sm: prefix makes sure that grid-cols-3 only triggers at the sm breakpoint and above, which is 40rem out of the box:

Generated CSS

.sm\:grid-cols-3 {  @media (width >= 40rem) {    grid-template-columns: repeat(3, minmax(0, 1fr));  }}

在响应式设计文档中了解更多信息。

🌐 Learn more in the responsive design documentation.

定位夜间模式(Targeting dark mode)

在暗黑模式下为元素设置样式，只需在任何希望在暗黑模式激活时应用的实用工具前加上 dark: 前缀即可：

🌐 Styling an element in dark mode is just a matter of adding the dark: prefix to any utility you want to apply when dark mode is active:

Light mode

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Dark mode

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">  <div>    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">      <svg        class="h-6 w-6 text-white"        fill="none"        viewBox="0 0 24 24"        stroke="currentColor"        aria-hidden="true"      >        <!-- ... -->      </svg>    </span>  </div>  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>  <p class="text-gray-500 dark:text-gray-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>

就像处理悬停状态或媒体查询一样，重要的是要明白，单个工具类永远不会同时包含浅色和深色的样式——你需要通过使用多个类来在夜间模式下进行样式设置，一个类用于浅色模式样式，另一个用于夜间模式样式。

🌐 Just like with hover states or media queries, the important thing to understand is that a single utility class will never include both the light and dark styles — you style things in dark mode by using multiple classes, one for the light mode styles and another for the dark mode styles.

Generated CSS

.dark\:bg-gray-800 {  @media (prefers-color-scheme: dark) {    background-color: var(--color-gray-800);  }}

在暗黑模式文档中了解更多信息。

🌐 Learn more in the dark mode documentation.

使用类组合(Using class composition)

很多时候，使用 Tailwind 你甚至会使用多个类来构建单个 CSS 属性的值，例如向元素添加多个过滤：

🌐 A lot of the time with Tailwind you'll even use multiple classes to build up the value for a single CSS property, for example adding multiple filters to an element:

HTML

<div class="blur-sm grayscale">  <!-- ... --></div>

这两种效果都依赖于 CSS 中的 filter 属性，因此 Tailwind 使用 CSS 变量来使组合这些效果成为可能：

🌐 Both of these effects rely on the filter property in CSS, so Tailwind uses CSS variables to make it possible to compose these effects together:

Generated CSS

.blur-sm {  --tw-blur: blur(var(--blur-sm));  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}.grayscale {  --tw-grayscale: grayscale(100%);  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}

上面生成的 CSS 略微简化了，但关键在于，每个工具类只为其要应用的效果设置一个 CSS 变量。然后 filter 属性会查看所有这些变量，如果变量尚未设置，则回退为无效果。

🌐 The generated CSS above is slightly simplified, but the trick here is that each utility sets a CSS variable just for the effect it's meant to apply. Then the filter property looks at all of these variables, falling back to nothing if the variable hasn't been set.

Tailwind 对渐变、阴影颜色、变换等也采用了相同的方法。

🌐 Tailwind uses this same approach for gradients, shadow colors, transforms, and more.

使用任意值(Using arbitrary values)

Tailwind 中的许多实用工具由主题变量驱动，例如 bg-blue-500、text-xl 和 shadow-md，它们映射到你底层的颜色调色板、字体大小比例和阴影。

🌐 Many utilities in Tailwind are driven by theme variables, like bg-blue-500, text-xl, and shadow-md, which map to your underlying color palette, type scale, and shadows.

当你需要在主题之外使用一次性值时，请使用特殊的方括号语法来指定任意值：

🌐 When you need to use a one-off value outside of your theme, use the special square bracket syntax for specifying arbitrary values:

HTML

<button class="bg-[#316ff6] ...">  Sign in with Facebook</button>

这对于调色板之外的一次性颜色（如上面的 Facebook 蓝）很有用，但当你需要一个复杂的自定义值，比如非常具体的网格时，也很适用：

🌐 This can be useful for one-off colors outside of your color palette (like the Facebook blue above), but also when you need a complex custom value like a very specific grid:

HTML

<div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">  <!-- ... --></div>

当你需要使用像 calc() 这样的 CSS 功能时，即使你正在使用主题值，这也很有用：

🌐 It's also useful when you need to use CSS features like calc(), even if you are using your theme values:

HTML

<div class="max-h-[calc(100dvh-(--spacing(6)))]">  <!-- ... --></div>

甚至还有一种语法可以生成完全任意的 CSS，包括任意属性名称，这对于设置 CSS 变量很有用：

🌐 There's even a syntax for generating completely arbitrary CSS including an arbitrary property name, which can be useful for setting CSS variables:

HTML

<div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">  <!-- ... --></div>

在文档中了解有关使用任意值的更多信息。

🌐 Learn more in the documentation on using arbitrary values.

这怎么起作用？(How does this even work?)

Tailwind CSS 不是你可能习惯使用其他 CSS 框架的大型静态样式表 - 它根据你在编译 CSS 时实际使用的类生成所需的 CSS。

🌐 Tailwind CSS isn't one big static stylesheet like you might be used to with other CSS frameworks — it generates the CSS needed based on the classes you're actually using when you compile your CSS.

它通过扫描项目中的所有文件来查找任何看起来像是类名的符号来实现这一点：

🌐 It does this by scanning all of the files in your project looking for any symbol that looks like it could be a class name:

Button.jsx

export default function Button({ size, children }) {  let sizeClasses = {    md: "px-4 py-2 rounded-md text-base",    lg: "px-5 py-3 rounded-lg text-lg",  }[size];  return (    <button type="button" className={`font-bold ${sizeClasses}`}>      {children}    </button>  );}

找到所有潜在类后，Tailwind 会为每个类生成 CSS，并将其全部编译成一个仅包含你实际需要的样式的样式表。

🌐 After it's found all of the potential classes, Tailwind generates the CSS for each one and compiles it all into one stylesheet of just the styles you actually need.

由于 CSS 是基于类名生成的，Tailwind 可以识别使用任意值（如 bg-[#316ff6]）的类并生成所需的 CSS，即使该值不在你的主题中。

🌐 Since the CSS is generated based on the class name, Tailwind can recognize classes using arbitrary values like bg-[#316ff6] and generate the necessary CSS, even when the value isn't part of your theme.

了解更多关于如何在源文件中检测类的工作原理。

🌐 Learn more about how this works in detecting classes in source files.

复杂选择器(Complex selectors)

有时你需要在多种条件下设置元素的样式，例如在夜间模式下、在特定断点处、悬停时以及当元素具有特定数据属性时。

🌐 Sometimes you need to style an element under a combination of conditions, for example in dark mode, at a specific breakpoint, when hovered, and when the element has a specific data attribute.

以下是使用 Tailwind 的示例：

🌐 Here's an example of what that looks like with Tailwind:

HTML

<button class="dark:lg:data-current:hover:bg-indigo-600 ...">  <!-- ... --></button>

Simplified CSS

@media (prefers-color-scheme: dark) and (width >= 64rem) {  button[data-current]:hover {    background-color: var(--color-indigo-600);  }}

Tailwind 还支持类似 group-hover 的功能，它可以在特定父元素被悬停时为元素设置样式：

🌐 Tailwind also supports things like group-hover, which let you style an element when a specific parent is hovered:

HTML

<a href="#" class="group rounded-lg p-8">  <!-- ... -->  <span class="group-hover:underline">Read more…</span></a>

Simplified CSS

@media (hover: hover) {  a:hover span {    text-decoration-line: underline;  }}

这个 group-* 语法也适用于其他变体，比如 group-focus、group-active 和更多。

🌐 This group-* syntax works with other variants too, like group-focus, group-active, and many more.

对于非常复杂的场景（尤其是当你无法控制的 HTML 样式时），Tailwind 支持任意变体，让你可以直接在类名中编写任何你想要的选择器：

🌐 For really complex scenarios (especially when styling HTML you don't control), Tailwind supports arbitrary variants which let you write any selector you want, directly in a class name:

HTML

<div class="[&>[data-active]+span]:text-blue-600 ...">  <span data-active><!-- ... --></span>  <span>This text will be blue</span></div>

Simplified CSS

div > [data-active] + span {  color: var(--color-blue-600);}

何时使用内联样式(When to use inline styles)

内联样式在 Tailwind CSS 项目中仍然非常有用，特别是当值来自数据库或 API 等动态源时：

🌐 Inline styles are still very useful in Tailwind CSS projects, particularly when a value is coming from a dynamic source like a database or API:

branded-button.jsx

export function BrandedButton({ buttonColor, textColor, children }) {  return (    <button      style={{        backgroundColor: buttonColor,        color: textColor,      }}      className="rounded-md px-3 py-1.5 font-medium"    >      {children}    </button>  );}

对于非常复杂的任意值，你可能还会使用内联样式，这些值在格式化为类名时难以阅读：

🌐 You might also reach for an inline style for very complicated arbitrary values that are difficult to read when formatted as a class name:

HTML

<div class="grid-[2fr_max(0,var(--gutter-width))_calc(var(--gutter-width)+10px)]"><div style="grid-template-columns: 2fr max(0, var(--gutter-width)) calc(var(--gutter-width) + 10px)">  <!-- ... --></div>

另一个有用的模式是使用内联样式根据动态源设置 CSS 变量，然后使用工具类引用这些变量：

🌐 Another useful pattern is setting CSS variables based on dynamic sources using inline styles, then referencing those variables with utility classes:

branded-button.jsx

export function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) {  return (    <button      style={{        "--bg-color": buttonColor,        "--bg-color-hover": buttonColorHover,        "--text-color": textColor,      }}      className="bg-(--bg-color) text-(--text-color) hover:bg-(--bg-color-hover) ..."    >      {children}    </button>  );}

管理重复(Managing duplication)

当你仅使用工具类构建整个项目时，你不可避免地会发现自己重复某些模式以在不同位置重新创建相同的设计。

🌐 When you build entire projects with just utility classes, you'll inevitably find yourself repeating certain patterns to recreate the same design in different places.

例如，这里每个头像图片的工具类重复了五次：

🌐 For example, here the utility classes for each avatar image are repeated five separate times:

别慌！实际上，这并不像你担心的那样成问题，而且应对它的策略是你每天都在做的事情。

🌐 Don't panic! In practice this isn't the problem you might be worried it is, and the strategies for dealing with it are things you already do every day.

使用循环(Using loops)

很多时候，在渲染页面中多次出现的设计元素实际上只创作了一次，因为实际标记是在循环中渲染的。

🌐 A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop.

例如，本指南开头的重复头像几乎肯定会在真实项目中循环渲染：

🌐 For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project:

当元素在这样的循环中渲染时，实际的类列表只被写入一次，因此没有实际的重复问题需要解决。

🌐 When elements are rendered in a loop like this, the actual class list is only written once so there's no actual duplication problem to solve.

使用多光标编辑(Using multi-cursor editing)

当重复仅局限于单个文件中的一组元素时，处理它的最简单方法是使用多光标编辑来一次性快速选择并编辑每个元素的类列表：

🌐 When duplication is localized to a group of elements in a single file, the easiest way to deal with it is to use multi-cursor editing to quickly select and edit the class list for each element at once:

<nav class="flex justify-center space-x-4">  <a href="/dashboard" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Home  </a>  <a href="/team" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Team  </a>  <a href="/projects" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Projects  </a>  <a href="/reports" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">    Reports  </a></nav>

你会惊讶地发现，这种方法经常会成为最好的解决方案。如果你可以快速同时编辑所有重复的类列表，那么引入任何额外的抽象都没有好处。

🌐 You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction.

使用组件(Using components)

如果你需要在多个文件中重用一些样式，最好的策略是：如果你使用的是像 React、Svelte 或 Vue 这样的前端框架，就创建一个组件；如果你使用的是像 Blade、ERB、Twig 或 Nunjucks 这样的模板语言，就创建一个 模板局部。

🌐 If you need to reuse some styles across multiple files, the best strategy is to create a component if you're using a front-end framework like React, Svelte, or Vue, or a template partial if you're using a templating language like Blade, ERB, Twig, or Nunjucks.

现在，你可以在任意多个地方使用该组件，同时仍然拥有样式的单一真实来源，因此可以轻松地在一个地方一起更新它们。

🌐 Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place.

使用自定义 CSS(Using custom CSS)

如果你使用的是像 ERB 或 Twig 这样的模板语言，而不是 React 或 Vue，那么为像按钮这样小的东西创建一个模板局部可能会显得过于繁琐，相比使用像 btn 这样的简单 CSS 类。

🌐 If you're using a templating language like ERB or Twig instead of something like React or Vue, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like btn.

虽然强烈建议你为更复杂的组件创建适当的模板部分，但当模板部分感觉过于繁琐时，编写一些自定义 CSS 是完全没问题的。

🌐 While it's highly recommended that you create proper template partials for more complex components, writing some custom CSS is totally fine when a template partial feels heavy-handed.

下面是一个 btn-primary 类的示例，使用主题变量来保持设计一致性：

🌐 Here's what a btn-primary class might look like, using theme variables to keep the design consistent:

HTML

<button class="btn-primary">Save changes</button>

CSS

@import "tailwindcss";@layer components {  .btn-primary {    border-radius: calc(infinity * 1px);    background-color: var(--color-violet-500);    padding-inline: --spacing(5);    padding-block: --spacing(2);    font-weight: var(--font-weight-semibold);    color: var(--color-white);    box-shadow: var(--shadow-md);    &:hover {      @media (hover: hover) {        background-color: var(--color-violet-700);      }    }  }}

不过，对于任何比单个 HTML 元素更复杂的东西，我们强烈建议使用模板部分，以便样式和结构可以封装在一个地方。

🌐 Again though, for anything that's more complicated than just a single HTML element, we highly recommend using template partials so the styles and structure can be encapsulated in one place.

管理样式冲突(Managing style conflicts)

冲突的工具类(Conflicting utility classes)

当你添加两个针对相同 CSS 属性的类时，样式表中出现较后的类会生效。因此在这个例子中，尽管 flex 在实际的 class 属性中最后出现，元素仍然会应用 display: grid：

🌐 When you add two classes that target the same CSS property, the class that appears later in the stylesheet wins. So in this example, the element will receive display: grid even though flex comes last in the actual class attribute:

HTML

<div class="grid flex">  <!-- ... --></div>

CSS

.flex {  display: flex;}.grid {  display: grid;}

一般来说，你永远不应该向同一个元素添加两个冲突的类 - 只添加你真正希望生效的类：

🌐 In general, you should just never add two conflicting classes to the same element — only ever add the one you actually want to take effect:

example.jsx

export function Example({ gridLayout }) {  return <div className={gridLayout ? "grid" : "flex"}></div>;}

使用基于组件的库（如 React 或 Vue），这通常意味着公开特定的 props 以进行样式自定义，而不是让消费者从组件外部添加额外的类，因为这些样式通常会发生冲突。

🌐 Using component-based libraries like React or Vue, this often means exposing specific props for styling customizations instead of letting consumers add extra classes from outside of a component, since those styles will often conflict.

使用 important 修饰符(Using the important modifier)

当你确实需要强制某个特定的工具类生效，而没有其他方法来管理特异性时，你可以在类名末尾添加 ! 来使所有的声明变为 !important：

🌐 When you really need to force a specific utility class to take effect and have no other means of managing the specificity, you can add ! to the end of the class name to make all of the declarations !important:

HTML

<div class="bg-teal-500 bg-red-500!">  <!-- ... --></div>

Generated CSS

.bg-red-500\! {  background-color: var(--color-red-500) !important;}.bg-teal-500 {  background-color: var(--color-teal-500);}

使用 important 标志(Using the important flag)

如果你在一个已有复杂 CSS 并且具有高优先级规则的项目中添加 Tailwind，你可以在导入 Tailwind 时使用 important 标记，将所有工具类标记为 !important：

🌐 If you're adding Tailwind to a project that has existing complex CSS with high specificity rules, you can use the important flag when importing Tailwind to mark all utilities as !important:

app.css

@import "tailwindcss" important;

Compiled CSS

@layer utilities {  .flex {    display: flex !important;  }  .gap-4 {    gap: 1rem !important;  }  .underline {    text-decoration-line: underline !important;  }}

使用前缀选项(Using the prefix option)

如果你的项目中有与 Tailwind CSS 工具类名称冲突的类名，你可以使用 prefix 选项为所有 Tailwind 生成的类和 CSS 变量添加前缀：

🌐 If your project has class names that conflict with Tailwind CSS utilities, you can prefix all Tailwind-generated classes and CSS variables using the prefix option:

app.css

@import "tailwindcss" prefix(tw);

Compiled CSS

@layer theme {  :root {    --tw-color-red-500: oklch(0.637 0.237 25.331);  }}@layer utilities {  .tw\:text-red-500 {    color: var(--tw-color-red-500);  }}

概述(Overview)

为什么不直接使用内联样式？(Why not just use inline styles?)

在工具类中思考(Thinking in utility classes)

设置悬停和聚焦状态的样式(Styling hover and focus states)

媒体查询和断点(Media queries and breakpoints)

定位夜间模式(Targeting dark mode)

使用类组合(Using class composition)

使用任意值(Using arbitrary values)

这怎么起作用？(How does this even work?)

复杂选择器(Complex selectors)

何时使用内联样式(When to use inline styles)

管理重复(Managing duplication)

Contributors

使用循环(Using loops)

Contributors

使用多光标编辑(Using multi-cursor editing)

使用组件(Using components)

使用自定义 CSS(Using custom CSS)

管理样式冲突(Managing style conflicts)

冲突的工具类(Conflicting utility classes)

使用 important 修饰符(Using the important modifier)

使用 important 标志(Using the important flag)

使用前缀选项(Using the prefix option)

目录