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

user_17767614 0
Viewed 1771

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

nuxt.js tailwind-css
1 Answers

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': {},
        },
    },
},
user_158780960
Related