使用 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;}}

首先在注释中说明了这段代码的作用是添加自定义的基础样式层,用于覆盖 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 标签的文字大小。