如何解决PostCSS的:hover和:focus嵌套语法
我正在使用TailwindCSS和PostCSS,并且具有以下CSS代码:
.btn {
@apply py-1;
@apply px-4;
@apply border;
@apply rounded;
}
.btn:hover {
@apply bg-white text-black;
}
.btn:focus {
@apply bg-black text-white;
}
PostCSS(或带有插件)中是否存在一种本机方式来编写如下所示的代码?
.btn {
@apply py-1;
@apply px-4;
@apply border;
@apply rounded;
&:hover {
@apply bg-white text-black;
}
&:focus {
@apply bg-black text-white;
}
}
解决方法
首次安装npm install postcss-preset-env --save-dev
。
然后在您的nesting-rules
文件中启用postcss.config.js
,
module.exports = {
plugins: [
"tailwindcss",[
"postcss-preset-env",{
stage: 3,features: {
"nesting-rules": true,},],};
在这里您可以找到可以启用的list of features ID
,您也可以使用 postcss-nested 插件。
在您的 package.json
中:
{
"dependencies": {
"postcss": "^8.2.9","tailwindcss": "^2.0.4","postcss-nested": "^5.0.5"
}
}
在您的 postcss.config.js
中:
module.exports = {
plugins: [
require('postcss-nested'),require('tailwindcss'),]
}
,
也适用,遵循对象符号 Reference
module.exports = {
plugins: {
'postcss-import': {},tailwindcss: {},autoprefixer: {},'postcss-preset-env': { stage: 2 },}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。