如何解决Tailwind-如果使用图层,则css规则不可见
您是否知道为什么Tailwind CSS中的@layer
不起作用?
例如,如果我使用styles.css编写
h1 {
@apply text-2xl;
}
它可以工作,但是如果我这样做:
@layer base {
h1 {
@apply text-2xl;
}
}
不是。只是看不到这种风格。
解决方法
您的h1
样式可能已被Tailwind的样式器清除过程清除:https://tailwindcss.com/docs/controlling-file-size:
使用@layer指令还将指示Tailwind考虑 清除图层时要清除的样式。
由于大概您没有在h1
中引用@apply
样式,所以Tailwind可能正在考虑未使用的样式。尽管,人们希望Tailwind不会清除基于标签的选择器。
查看在文件系统或浏览器中的检查器上构建的CSS文件,并查找您的h1
样式。
从Tailwind文档中,也许尝试将h1
添加到白名单中-尽管我认为白名单似乎想要基于类的选择器,但我认为它不起作用。
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.html'],// These options are passed through directly to PurgeCSS
options: {
whitelist: ['bg-red-500','px-4'],}
},// ...
}
我建议询问标签选择器是否可以与Tailwind Discord或论坛上的图层配合使用:https://tailwindcss.com/community
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。