一般都写在一个 css 文件。

Directives

• @tailwind
• @layer
• @apply
• @config 【一般放在最后面，@import 导入其他 css 文件后】

@tailwind base;@tailwind components;@tailwind utilities;@layer base {  h1 {    @apply text-2xl;  }  h2 {    @apply text-xl;  }}@layer components {  .btn-blue {    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;  }}@layer utilities {  .filter-none {    filter: none;  }  .filter-grayscale {    filter: grayscale(100%);  }}

Functions

• theme()：使用 theme() 函数使用点表示法访问Tailwind配置值。
• screen()：允许创建媒体查询

.content-area {  height: calc(100vh - theme(spacing.12));  /* 或者 */  height: calc(100vh - theme(spacing[2.5]));  /* 或者 */  background-color: theme(colors.blue.500);  /* 或者 */  background-color: theme(colors.blue.500 / 75%);}

/* 等同于 min-width: 640px */@media screen(sm) {  /* ... */}