TailwindCSS嵌套不适用于尾风not /嵌套或postcss-嵌套

Question

postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

global.css

.form-control {
  @apply w-full px-3;
  & p {
    @apply mb-1;
  }
  & input:not([type="checkbox"]),
  & select,
  & option,
  & textarea {
    @apply placeholder-gray-500 dark:placeholder-gray-text  focus:outline-none focus:border-2 focus:border-brand-100 bg-bg-light-100 dark:bg-bg-dark-100 p-1 px-3 h-9 shadow-md;
  }
  & textarea {
    @apply h-24;
  }
  &.error {
    & input {
      &:not([type="checkbox"]) {
        @apply border-red-600 outline-none border-2;
      }
    }
  }
}

导入插件可以工作postcss-import，但是嵌套插件不能工作(我的样式是渲染的)，顺便说一句，我用的是Nextjs。

Answer 1

您希望css输出为什么？例如，如果您想要：

.form-control p{
   //styles
}

那么你应该把它写成

.form-control {
   p {
    @apply mb-1;
  }
}

不使用&。