1.@import

@import 用来引入样式文件或者 tailwindcss 预设样式。

@import 'tailwindcss';

它其实等同于：

@layer theme, base, components, utilities;

@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

2.@theme

@theme 用来定义全局样式变量。

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-red-50: oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-200: oklch(0.885 0.062 18.334);
  --color-red-300: oklch(0.808 0.114 19.571);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-900: oklch(0.396 0.141 25.723);
  --color-red-950: oklch(0.258 0.092 26.042);
  /* ... */
}

3.@layer

@layer 用来定义样式的层级，支持如下值：

1. @layer base：基础样式，用来处理样式的初始化，可以理解成 reset 样式。
2. @layer components：组件样式，用来自定义 class。
3. @layer utilities：工具样式，用来自定义工具类。

TIP

Tailwind 不支持使用 @layer theme，它不会解析 @layer theme 语法，请直接使用 @theme。

4.@source

@source用来定义依赖样式的来源。

tailwindcss 默认会根据内置的规则来解析文件，从而获取到对应的样式设置。

内置的规则解析，默认是不包含 node_modules 中的文件的。

假设我们在开发中使用了 node_modules 下某一依赖库提供的 tailwindcss 样式，那么我们使用 @source 来引入该样式来源。

@source "../node_modules/@my-company/ui-lib";

5.@utility

@utility 可以用来自定义工具类样式。

@utility content-auto {
  content-visibility: auto;
}

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility tab-* {
  tab-size: --value(--tab-size-*);
}

6.@variant

@variant 可以在 css 中引用变体。

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

7.@custom-variant

@custom-variant 可以自定义变体。

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

8.@apply

@apply 可以在 css 中引用工具类样式。

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply rounded border border-gray-300;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

9.@reference

@reference 用来在 CSS modules 中声明样式引用。

譬如在 Vue 的 SFC 中：

<template>
  <h1>Hello world!</h1>
</template>
<style>
  @reference "../../app.css";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>