1

I am trying to scope tailwind styles and I am using this postcss config from Tailwind docs:

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

and here is my css

.app-wrapper {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

 }

with this config the nesting is working fine but not all the tailwindCSS classes working as expected.

but when I change the config to the following

 module.exports = {
 plugins: [
     require('postcss-import'),
     require('tailwindcss/nesting'),
     require('tailwindcss'),
    require('autoprefixer'),
 ]
};

the classes works fine but the nesting throw the following error

Nested @tailwind rules were detected, but are not supported.

any idea how I can get the tailwind to work as expected with the nesting enabled?

Peter Wilson
  • 4,150
  • 3
  • 35
  • 62

1 Answers1

3

If you wish to add parent selector for every compiled utility, add important: '.app-wrapper', into your tailwind config and do not wrap @tailwind directives

// postcss.config.js

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

@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js

module.exports = {
    important: '.app-wrapper',
    // ...
};

This called selector strategy. This way text-red-500 utility will be compiled as

.app-wrapper .text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}

Please note: if you set darkMode as class strategy in your config

module.exports = {
    darkMode: 'class',
    important: '.app-wrapper',
    // ...
};

utility dark:text-white (and every other dark utility) will be compiled as

.app-wrapper .dark .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

So if both dark and app-wrapper classes will be placed on the SAME element (e.g. html or body) dark mode would not work. That may explain why some classes are not working when using nesting

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38
  • one problem is that base styles not being prefixed with `.app-wrapper `. Wondering if there is a way to make it work? – Vytalyi Apr 26 '23 at 16:57
  • @Vytalyi doubt aboit it. `base` styles basically are normalizeCSS and only injects [preflights](https://unpkg.com/tailwindcss@3.3.2/src/css/preflight.css) and not handles them in Tailwind way like utilities (no purging, JIT, etc). – Ihar Aliakseyenka Apr 27 '23 at 07:09