TailwindCSS 嵌套不适用于 tailwindcss/nesting 或 postcss-nesting

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

没有 &.

TailwindCSS 嵌套不适用于 tailwindcss/nesting 或 postcss-nesting

TailwindCSS nesting not working with tailwindcss/nesting or postcss-nesting

css

sass

postcss

next.js

tailwind-css

postcss.config.js

global.css