[英]TailwindCSS nesting not working with postCSS config
I am trying to scope tailwind styles and I am using this postcss config from Tailwind docs:我正在尝试 scope tailwind styles 我正在使用 Tailwind 文档中的这个 postcss 配置:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
and here is my css这是我的 css
.app-wrapper {
@tailwind base;
@tailwind components;
@tailwind utilities;
}
with this config the nesting is working fine but not all the tailwindCSS classes working as expected.使用此配置,嵌套工作正常,但并非所有 tailwindCSS 类都按预期工作。
but when I change the config to the following但是当我将配置更改为以下内容时
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
};
the classes works fine but the nesting throw the following error这些类工作正常但嵌套抛出以下错误
Nested @tailwind rules were detected, but are not supported.
检测到嵌套的@tailwind 规则,但不受支持。
any idea how I can get the tailwind to work as expected with the nesting enabled?知道如何在启用嵌套的情况下让顺风按预期工作吗?
If you wish to add parent selector for every compiled utility, add important: '.app-wrapper',
into your tailwind config and do not wrap @tailwind
directives如果您希望为每个已编译的实用程序添加父选择器,请将
important: '.app-wrapper',
添加到您的 tailwind 配置中并且不要包装@tailwind
指令
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
// tailwind.config.js
module.exports = {
important: '.app-wrapper',
// ...
};
This called selector strategy .这称为选择器策略。 This way
text-red-500
utility will be compiled as这样
text-red-500
实用程序将被编译为
.app-wrapper .text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
Please note: if you set darkMode as class strategy in your config请注意:如果您在配置中将 darkMode 设置为 class 策略
module.exports = {
darkMode: 'class',
important: '.app-wrapper',
// ...
};
utility dark:text-white
(and every other dark utility) will be compiled as utility
dark:text-white
(以及所有其他 dark 实用程序)将被编译为
.app-wrapper .dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
So if both dark
and app-wrapper
classes will be placed on the SAME element (eg html
or body
) dark mode would not work.因此,如果将
dark
和app-wrapper
类都放在同一个元素上(例如html
或body
),暗模式将不起作用。 That may explain why some classes are not working when using nesting这可以解释为什么某些类在使用嵌套时不起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.