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;
  }
}

解决方法

使用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,},],};

在这里您可以找到可以启用的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 },}