Nested Nuxt + Tailwind (Please enable a CSS nesting plugin before Tailwind in your configuration)

Question

use Nuxt v2.15.8 + Tailwind. Have a warns about nesting in all files where using after npm run dev and each refresh, example

 WARN  in ./components/Cabinet/CabinetSidebar/CabinetSidebarMenu.vue?vue&type=style&index=0&lang=postcss&

friendly-errors 18:24:59

    Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):

friendly-errors 18:24:59 Warning

    (99:2) 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

File nuxt.config.js

import 'reflect-metadata'
import { join } from 'path'
const isProd = process.env.NODE_ENV === 'production'
export default {

    head: {...},

    css: ['~assets/css/styles.css'],
    loading: false,

    components: {
        dirs: ['~/components', '~/components/Base'],
    },

    buildModules: [
        '@nuxt/typescript-build',
        'nuxt-typed-vuex',
        '@nuxtjs/router-extras',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/composition-api/module',
    ],
    tailwindcss: {
        configPath: 'tailwind.config.js',
        cssPath: '~/assets/css/tailwind.css',
        // jit: true,
        exposeConfig: true,
        config: {},
    },
    modules: [
        // 'nuxt-ssr-cache',
        // 'nuxt-lazy-load',
        'vue-scrollto/nuxt',
        '@nuxtjs/axios',
        'nuxt-i18n',
        '@nuxtjs/svg',
        'cookie-universal-nuxt',
        '@nuxtjs/toast',
        '@nuxtjs/google-analytics'
    ],

    build: {
        postcss: {
            plugins: {
                'postcss-import': true,
                'postcss-nested': {},
            },
        },
    },
}

Didn't find information on this error, maybe someone can suggest a solution

solved by adding 'tailwindcss/nesting': {} in build -> postcss -> plugins — Dmitry
– Dmitry, Commented Dec 26, 2021 at 17:23
Could you please add an answer and share your solution there for the use of others? — mo3n
– mo3n, Commented Dec 27, 2021 at 13:47
build: { postcss: { plugins: { 'postcss-import': true, 'tailwindcss/nesting': {} 'postcss-nested': {}, }, }, }, — Dmitry
– Dmitry, Commented Dec 28, 2021 at 15:07
Shouldn't there also be the "normal" tailwindcss plugin like described here in the docs? tailwindcss.com/docs/using-with-preprocessors#nesting . Also, when using postcss-nested instead of the postcss-nested, that is integrated in tailwind, you should use require('tailwindcss/nesting')(require('postcss-nesting')), according to the docs. Despite that, it is not working for me. I have to say, I'm not using @nuxt/tailwindcss but have integrated it myself. — Marian Klühspies
– Marian Klühspies, Commented Jan 9, 2022 at 8:04

mo3n · Accepted Answer · 2021-12-28 15:15:49Z

5

As Dmitry himself mentioned in the comments, to fix this problem, 'tailwindcss/nesting': {} should be added to postcss plugins in the build section of 'nuxt.config' file, so it would be like this:

build: {
    postcss: {
        plugins: {
            'postcss-import': true,
            'tailwindcss/nesting': {}, 
             'postcss-nested': {},
        },
    },
},

answered Dec 28, 2021 at 15:15

mo3n

1,9103 gold badges15 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Hosseini Parto · Accepted Answer · 2022-12-06 09:39:48Z

I had this type of problem and I fixed it by adding this code:

I added these lines on nuxt.config.ts:

plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}

In short, it is better to have a code similar to the following code in nuxt.config.ts:

export default defineNuxtConfig({
ssr: false,
alias: {
    'class-validator': 'class-validator/cjs/index.js',
},
postcss: {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    },
},
css: [
    '~/assets/css/main.css',
],
modules: [
    "@nuxt/content",
],
content: {
    // https://content.nuxtjs.org/api/configuration
},
components: {
    global: true,
    dirs: ["~/components"],
},
runtimeConfig: {
    public: {
        VUE_APP_I18N_LOCALE: process.env.VUE_APP_I18N_LOCALE,
        VUE_APP_I18N_FALLBACK_LOCALE: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
        VUE_APP_BASE_ROUTE: process.env.VUE_APP_BASE_ROUTE,
        VUE_APP_NAME: process.env.VUE_APP_NAME,
        VUE_APP_Host: process.env.VUE_APP_Host,
        VUE_WSS_Host: process.env.VUE_WSS_Host,
    },
},

});

Collectives™ on Stack Overflow

Nested Nuxt + Tailwind (Please enable a CSS nesting plugin before Tailwind in your configuration)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related