Tailwind CSS 进阶技巧

进阶技巧

任意值

当你需要的数值不在默认主题里，可以用方括号直接写任意值，无需先去 @theme 注册。

<div class="bg-[#123456] w-[200px] h-[100px]">任意色与尺寸</div>

任意值也支持复杂表达式，比如网格列数：

<div class="grid grid-cols-[repeat(3,1fr)] gap-4">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-100 p-4">2</div>
  <div class="bg-gray-100 p-4">3</div>
</div>

还可以用 text-[length:...]、p-[...] 等写法精确控制。任意值虽然灵活，但用多了会削弱主题统一性，适合临时或一次性需求。

重要修饰符

默认情况下，后面的工具类或自定义 CSS 可能覆盖 Tailwind 生成的样式。要强制某条工具类生效，在类前面加 !。

<p class="!text-red-500">这条文字一定是红色</p>

! 会为该类添加 !important，优先级最高。常见用途是覆盖第三方组件库的样式，或调试时临时锁定某个值。不要滥用，否则以后难覆盖。

与现有 CSS 或第三方样式共存

实际项目里常常要接入已有的 CSS 或组件库样式。Tailwind v4 通过 @layer 和明确的优先级来解决冲突。

Tailwind 的 utilities 层默认带 !important 级别的处理（在冲突场景可通过配置调整），所以写在 HTML 上的工具类通常能压过普通 CSS。若第三方样式优先级过高，可以用 @layer 把自己样式放进正确层级：

@layer base {
  h1 {
    font-size: 2rem;
  }
}

层级从低到高大致是：base → components → utilities。把项目工具类放进 utilities，就能稳定覆盖 base 里的默认元素样式。

容器查询 @container

除了基于视口（屏幕）的响应式，Tailwind v4 还支持基于「容器」尺寸的响应式：同一个组件放在不同宽度的容器里，会按容器大小自动调整，而不是按屏幕大小。适合写可复用、不挑位置的组件。

先用内置的 @container 类把一个元素标记为容器：

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 p-4">A</div>
    <div class="bg-gray-100 p-4">B</div>
    <div class="bg-gray-100 p-4">C</div>
  </div>
</div>

变体以 @ 开头（@sm:/@md:/@lg:/@xl:/@2xl:），含义是「当最近的容器达到该尺寸时生效」，与视口断点无关。把上面这段放进窄的侧边栏，它会保持 1 列；放进宽的主区域，就会变成 2~3 列。

如果页面里有多个容器、想精确指定受哪个容器影响，可以给容器起名：

<div class="@container/main">
  <div class="@md/main:grid-cols-2">...</div>
</div>

注意区分：第 8 篇讲的 container 类是用来「限制内容最大宽度并居中」的普通布局工具；这里的 @container 是用来「开启容器查询」的标记，两者名字接近但用途不同。

背景模糊与滤镜

Tailwind 把 CSS 滤镜（filter）做成了工具类，常用来给浮层、弹窗、顶栏增加层次感。最常用的是 backdrop-blur，它只模糊「元素背后的内容」，元素自身保持清晰：

<div class="fixed inset-0 bg-black/30 backdrop-blur-sm">
  半透明遮罩 + 背后内容被模糊
</div>

backdrop-blur 分等级：backdrop-blur-xs(最弱)/backdrop-blur-sm/backdrop-blur-md/backdrop-blur-lg/backdrop-blur-xl/backdrop-blur-2xl/backdrop-blur-3xl。它必须配合半透明背景（如 bg-white/70）才看得出效果，否则背后没有可模糊的东西。

如果连元素自身也要模糊，用 blur（不带 backdrop），同样分等级：

<img class="blur-sm hover:blur-0" src="photo.jpg" alt="示例" />

其他常用滤镜类：brightness-50/75/100/110/125(明度)、contrast-*(对比度)、grayscale(去色)、invert(反相)、saturate-*(饱和度)。它们能直接写在类上，也能配合状态变体，比如 hover:backdrop-blur-md 让鼠标移上去才模糊。

小结

任意值 [...] 解决一次性取值
! 强制优先级，谨慎使用
@layer 控制与既有 CSS 的层级关系
容器查询：@container 标记容器，@md: 等变体按容器尺寸响应，与视口无关
背景模糊 backdrop-blur 与滤镜 blur/brightness 等，需配半透明背景，可结合状态变体