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

Posted 2023-03-07

【中文标题】TailwindCSS 嵌套不适用于 tailwindcss/nesting 或 postcss-nesting

【英文标题】：TailwindCSS nesting not working with tailwindcss/nesting or postcss-nesting

【发布时间】：2021-11-03 09:28:15

【问题描述】：

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。

【参考方案1】：

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

.form-control p
   //styles

那么你应该写成

.form-control 
   p 
    @apply mb-1;
  

没有 &。