我正在研究一种可能性来确定结果顺风CSS的范围。 该项目使用
react-app-rewired
。
我已经使用
tailwindcss-scoped-preflight
将预检样式纳入我的应用程序,但计算的类未纳入范围。
前缀显然也不起作用。使用类或 ID 前缀(例如
prefix: "#root ",
)确实不会发出任何顺风类。
使用scss也不起作用。框架只是发出这样的 css 代码:
#root {
.m-0 {
margin: 0px;
}
...
}
但是
Can I use
表示只有 80.68% 完全支持 css 嵌套..
https://caniuse.com/css-nesting
目标不是创建这样的类:
.m-0 {
margin: 0px;
}
.m-2 {
margin-bottom: 0.5rem;
}
...
创建如下:
#root .m-0 {
margin: 0px;
}
#root .m-2 {
margin-bottom: 0.5rem;
}
...
我能做什么有什么想法吗? 谢谢大家。
您可以考虑使用 important
配置的选择器策略:
[…] 你可以将 important 设置为像 #app 这样的 ID 选择器:
tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { // ... important: '#app', }
此配置将为您的所有实用程序添加给定选择器的前缀,从而有效地提高它们的特异性,而无需实际使它们
。!important
这意味着实用程序分组的Tailwind类将具有此范围“前缀”:
#app .m-0 {
margin: 0px;
}
#app .m-2 {
margin-bottom: 0.5rem;
}
tailwind.config = {
important: '#root',
};
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div id="root">
<div class="h-10 w-10 bg-red-200"></div>
</div>
<div class="h-10 w-10 bg-red-200"></div>
请注意,base和component规则可能not具有此范围前缀,因此您很可能需要继续使用您提到的
tailwindcss-scoped-preflight
包。