将顺风范围扩展到某个类别/ID

问题描述 投票:0回答:1

我正在研究一种可能性来确定结果顺风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;
}
...

我能做什么有什么想法吗? 谢谢大家。

tailwind-css create-react-app react-app-rewired
1个回答
0
投票

您可以考虑使用 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>

请注意,basecomponent规则可能not具有此范围前缀,因此您很可能需要继续使用您提到的

tailwindcss-scoped-preflight
包。

© www.soinside.com 2019 - 2024. All rights reserved.