使用 Tailwind CSS 自定义基础样式层

/* 添加自定义tailwind基础层样式,一般用于覆盖一些tailwind中默认的基础样式 */

/* 如果要引用tailwind自带的值或tailwind.config.js的theme中配置的值,可以通过 "@apply"指令或"theme"函数获取 */

/* 在"@layer"中添加的样式如果在程序中没有用到会在编译后被清除,如果需要强制存在于编译后的样式表,请在"@layer"外定义 */

/* 示例:
h1 {
    @apply text-2xl;
} */

@layer base {
    h1 {
        @apply tw-text-3xl;
    }

    h2 {
        @apply tw-text-2xl;
    }

    h3 {
        @apply tw-text-xl;
    }

    h4 {
        @apply tw-text-lg;
    }

    h5 {
        @apply tw-text-sm;
    }

    h6 {
        @apply tw-text-xs;
    }
}

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
28
29
30
31
32
33
34
35
36
37

首先在注释中说明了这段代码的作用是添加自定义的基础样式层,用于覆盖 Tailwind CSS 中默认的一些基础样式。

然后说明可以通过 “@apply” 指令应用 Tailwind CSS 中现有的样式值,或者通过 “theme” 函数获取在 tailwind.config.js 中配置的主题值。

注释还解释了 “@layer base” 中定义的样式,如果没有被使用的话,会在编译后被删除。如果需要强制存在,需要把样式移动到 “@layer base” 之外定义。

接下来是样式代码:

使用 “@layer base” 定义一个基础样式层。

在里面覆盖了 h1 到 h6 的默认样式,通过 “@apply” 应用了 Tailwind CSS 的文本大小样式类,分别为:

• h1: text-3xl
• h2: text-2xl
• h3: text-xl
• h4: text-lg
• h5: text-sm
• h6: text-xs

这样就自定义了 heading 标签的文字大小样式。

总结来说:

1. 这段代码利用了 Tailwind CSS 的样式层自定义功能去覆盖基础样式。

2. 通过 “@apply” 和 “theme” 引用了 Tailwind CSS 的样式值。

3. “@layer base” 定义的样式需要用到才会存在。

4. 实现了自定义 heading 标签的文字大小。