Tailwind nesting does not work

[dctalbot]

Astro Info

Astro                    v4.0.7
Node                     v18.15.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

• Unable to nest styles when using Tailwind integration.
• It seems like there is some kind of conflict with postcss-nesting.
• Local build works correctly but with lots of warning logs in the console (see below)
• Production build fails to apply the styles correctly, notably in my astro layout files

01:07:38 [WARN] [vite] [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
6  |    background: red;
7  |  
8  |    h1 {
   |    ^^^^
9  |      font-style: italic;
   |  ^^^^^^^^^^^^^^^^^^^^^^^
10 |    }
   |  ^^^
01:07:38 [200] / 8ms
01:07:39 [WARN] [vite] [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
6  |    background: red;
7  |  
8  |    h1 {
   |    ^^^^
9  |      font-style: italic;
   |  ^^^^^^^^^^^^^^^^^^^^^^^
10 |    }

What's the expected result?

• No warnings in the console
• Production builds match behavior of local builds
• Ideally the integration "just works", but some amount of configuration is also valid as long as it's documented

Link to Minimal Reproducible Example

https://github.com/dctalbot/astro-repro-issue-9526

Participation

• I am willing to submit a pull request for this issue.

[dctalbot]

I'm aware of #6202, but the suggested workaround of changing the file extension did not work. I also tried a variety of configurations with a custom postcss.config.js/cjs/mjs file, as well as updating the vite.css.postcss config option in astro.config.mjs.

[bluwy]

I'm able to get it to work with this config:

import { defineConfig } from 'astro/config'

import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({ applyBaseStyles: false })],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  }
})

You don't need to initialize the tailwindcss postcss plugin as @astrojs/tailwind handles that for you.

I'm leaving this open though as I found a bug that doesn't let this work if you used a postcss.config.js file instead. I was mistaken, it does work but you need to import with tailwindcss/nesting/index.js instead because tailwind's export is not Node.js ESM friendly. Ideally a file should be used instead. Also, perhaps the nesting support can be added as an option for @astrojs/tailwind too.

[dctalbot]

Thank you so much for the quick response! That vite configuration works for me too.

I agree, the integration should probably handle this. You could maybe have it on by default since the syntax it enables is just a superset of the regular syntax AFAIK. In that case it would not be a breaking change.

[Sergi0Martin]

I'm able to get it to work with this config:

import { defineConfig } from 'astro/config'

import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({ applyBaseStyles: false })],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  }
})

You don't need to initialize the tailwindcss postcss plugin as @astrojs/tailwind handles that for you.

I'm leaving this open though as I found a bug that doesn't let this work if you used a postcss.config.js file instead. I was mistaken, it does work but you need to import with tailwindcss/nesting/index.js instead because tailwind's export is not Node.js ESM friendly. Ideally a file should be used instead. Also, perhaps the nesting support can be added as an option for @astrojs/tailwind too.

It worked for me but setting applyBaseStyles to true.

import { defineConfig } from 'astro/config'
import tailwind from '@astrojs/tailwind'
import tailwindcssNesting from 'tailwindcss/nesting'
import robotsTxt from "astro-robots-txt"

// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind({ applyBaseStyles: true }),
    robotsTxt()
  ],
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting()]
      }
    }
  },
  site: 'https://Sergi0Martin.github.io',
})