嵌套 Nuxt + Tailwind（请在您的配置中启用 CSS 嵌套插件 *before* Tailwind）答案

【问题标题】：Nested Nuxt + Tailwind (Please enable a CSS nesting plugin *before* Tailwind in your configuration)嵌套 Nuxt + Tailwind（请在您的配置中启用 CSS 嵌套插件 *before* Tailwind）
【发布时间】：2022-01-25 23:53:45
【问题描述】：

使用 Nuxt v2.15.8 + Tailwind。在 npm run dev 和每次刷新后使用的所有文件中都会发出警告，例如

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

友好错误 18:24:59

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

友好错误 18:24:59 警告

    (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

文件 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': {},
            },
        },
    },
}

没有找到有关此错误的信息，也许有人可以提出解决方案

【问题讨论】：

通过在 build -> postcss -> plugins 中添加 'tailwindcss/nesting': {} 解决
您能否添加一个答案并在那里分享您的解决方案以供其他人使用？
build: { postcss: { plugins: { 'postcss-import': true, 'tailwindcss/nesting': {} 'postcss-nested': {}, }, }, },跨度>
不应该还有文档中描述的“正常”tailwindcss插件吗？ tailwindcss.com/docs/using-with-preprocessors#nesting 。此外，根据文档，当使用 postcss-nested 而不是集成在 tailwind 中的 postcss-nested 时，您应该使用 require('tailwindcss/nesting')(require('postcss-nesting'))。尽管如此，它对我不起作用。我不得不说，我没有使用@nuxt/tailwindcss，而是自己集成了它。

标签： nuxt.js tailwind-css

【解决方案1】：

正如 Dmitry 本人在 cmets 中提到的，要解决此问题，应将 'tailwindcss/nesting': {} 添加到 'nuxt.config' 文件的 build 部分的 postcss 插件中，所以它会是这样的：

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

【讨论】：