tailwind/nesting not recognized as a postcss plugin(can astro read the postcss.config.js file?)

[Lilja]

What version of astro are you using?

^2.0.4

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Windows/WSL

Describe the Bug

[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
1  |  .nuxt-content-md:where(.astro-7JJQPTXK){h1 {padding-bottom: 2rem} h1 {font-size: 3.75rem; line-height: 1} h2 {padding-bottom: 1.75rem} h2 {font-size: 3rem; line-height: 1} h3 {padding-bottom: 1.5rem} h3 {font-size: 2.25rem; line-height: 2.5rem} h4 {padding-bottom: 1.25rem} h4 {font-size: 1.875rem; line-height: 2.25rem} h5 {padding-bottom: 1rem} h5 {font-size: 1.5rem; line-height: 2rem} h5 {padding-bottom: 0.75rem} h5 {font-size: 1.25rem; line-height: 1.75rem} h6 {padding-bottom: 0.5rem} h6 {font-size: 1.125rem; line-height: 1.75rem} p {padding-top: 0.5rem} p {padding-bottom: 0.5rem} pre {margin-top: 0.5rem} pre {margin-bottom: 0.5rem} pre {border-radius: 0.375rem} pre { --tw-bg-opacity: 1; background-color: rgb(13 17 23 / var(--tw-bg-opacity)) } pre {padding: 1rem}}

Click to view astro component

---
// src/pages/blog/[...slug].vue
import Layout from "../../layouts/Layout.astro";
import type { CollectionEntry } from "astro:content";
import { getCollection } from "astro:content";
export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
  return blogEntries.map((entry: any) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;

const { Content } = await entry.render();
---

<Layout title="welcome to astro">
  <p class="mb-5">
    <span
      class="cursor-pointer rounded-xl border-2 border-yellow-500 p-2 align-middle"
    >
      <span> Go back</span>
    </span>
  </p>
  <Content class="nuxt-content-md mt-10" />
</Layout>

<style lang="postcss">
  .nuxt-content-md {
    h1 {
      @apply pb-8 text-6xl;
    }
    h2 {
      @apply pb-7 text-5xl;
    }
    h3 {
      @apply pb-6 text-4xl;
    }
    h4 {
      @apply pb-5 text-3xl;
    }
    h5 {
      @apply pb-4 text-2xl;
    }
    h5 {
      @apply pb-3 text-xl;
    }
    h6 {
      @apply pb-2 text-lg;
    }

    p {
      @apply pt-2 pb-2;
    }
    pre {
      @apply bg-github-bg p-4 rounded-md mt-2 mb-2;
    }
  }
</style>

// postconfig.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    "tailwindcss/nesting": {},
    autoprefixer: {},
  },
};

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-elgzfe?file=postcss.config.js

Participation

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

[mfrachet]

Have you tried what is suggested in the error console? The link from tailwind doc pointed that, for nesting CSS selectors, they encourage to use one of their modules:

$ npm i npm i @tailwindcss/nesting

And to add it to the plugin section of postcss:

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

[Lilja]

I think tailwindcss/nesting is already shipped with tailwind. And as you can see in the postcss config, it's already in there.

[mfrachet]

Also, they suggest to put it before the tailwind plugin. It may help?

[Lilja]

Hmm, I can still reproduce the error. https://stackblitz.com/edit/github-elgzfe-wtdjpf?file=postcss.config.js

For me, even after explicitly adding the tailwind nesting dependency(the postcss-import is already in node_modules so I guess I don't have to npm install that too), I still get that warning...

[MoustaphaDev]

Renaming file extension to .cjs fixes the issue, not sure why it is an issue in the first place

[natemoo-re]

Renaming file extension to .cjs fixes the issue, not sure why it is an issue in the first place

Ah because the project has "type": "module" in the package.json, so postcss.config.js is treated as ESM but is using CJS syntax. I think we silently swallow the error when loading the config, otherwise Node would have thrown a helpful error here.

[MoustaphaDev]

Renaming file extension to .cjs fixes the issue, not sure why it is an issue in the first place

Ah because the project has "type": "module" in the package.json, so postcss.config.js is treated as ESM but is using CJS syntax. I think we silently swallow the error when loading the config, otherwise Node would have thrown a helpful error here.

Good call! I was just going to test that possibility

[MoustaphaDev]

Feel free to reopen if you still encounter the issue @Lilja

[Lilja]

Thank you fellas!

[chrismwilliams]

Just hit this warning also, but it seems that it's not just astro users experiencing this tailwindlabs/tailwindcss#7035.

As an not-so-nice alternative you can also add the plugins via the astro config

[projct1]

I did everything exactly as described in the documentation https://tailwindcss.com/docs/using-with-preprocessors#nesting

// package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.1.0",
        "autoprefixer": "^10.4.14",
        "laravel-vite-plugin": "^0.7.4",
        "postcss": "^8.4.21",
        "postcss-nesting": "^11.2.2",
        "tailwindcss": "^3.3.1",
        "vite": "^4.2.1"
    },
    "dependencies": {
        "shepherd.js": "^11.1.1",
        "vue": "^3.2.47"
    }
}

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

// vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            refresh: true,
            input: ['resources/css/app.css', 'resources/js/app.js']
        })
    ]
})

After run command vite i got error:
Here is part of my app.css: