css - PostCSS 的嵌套语法用于 :hover 和 :focus

Question

我正在使用 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;
  }
}

Answer 1

使用postcss-preset-env。

首先安装，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,
        },
      },
    ],
  ],
};

在这里您可以找到可以启用的功能 ID 列表

Answer 2

也可以使用，遵循对象符号参考

module.exports = {
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
        'postcss-preset-env': { stage: 2 },
    },
}

Answer 3

你也可以使用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'),
  ]
}