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

user_12255661 0
Viewed 2015

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

The import plugin is working postcss-import but the nesting plugins aren't working (my styles are rendering) I'm using Nextjs by the way.

postcss tailwind-css next.js sass css
1 Answers

What do you want the css to output as? For instance if you want:

.form-control p{
   //styles
}

then you should write it as

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

without the &.

user_109800720
Related