/* 添加自定义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 标签的文字大小样式。
总结来说:
- 这段代码利用了 Tailwind CSS 的样式层自定义功能去覆盖基础样式。
- 通过 “@apply” 和 “theme” 引用了 Tailwind CSS 的样式值。
- “@layer base” 定义的样式需要用到才会存在。
- 实现了自定义 heading 标签的文字大小。
版权归原作者 步子哥 所有, 如有侵权,请联系我们删除。