TailwindCss Functions & Directives

一般都写在一个 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%);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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%);
}
1
2
3
4
5
6
7
8
9

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