顺风现在可以使用css模块嵌套吗

Question

我目前正在尝试将CSS模块类和PostCSS的嵌套功能与TailwindCSS一起使用在同一个文件中。但是当在我的Sidebar.module.css:中做这样的事情时

.sidebar {
@apply fixed top-0 left-0 h-full w-64;
&.closed {
@apply w-20;
}
} 

Chrome似乎没有被选中，检查员中出现了以下警告：警告称未知属性名称

所以我一开始就不确定这是否可能。这是我的postcss.config.js

module.exports = {
plugins: [
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}

Answer 1

本指南和使用以下postcss.config.js设置对我有效。

module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
'postcss-nesting': {},
tailwindcss: {},
'postcss-flexbugs-fixes': {},
'postcss-preset-env': {
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': true
}
}
}
}

Answer 2

如果您想使用模块样式的CSS导入，请遵循以下文档请检查您的应用程序设置。

// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}