Tailwind样式不适用于NextJS的生产构建,但适用于开发

hjqgdpho  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(156)

我的Tailwind样式不适用于使用npm run build + npm run start制作的生产版本。
当我做npm run dev的样式工作和我的页面看起来像(紫色按钮):

当我在构建后执行npm run start时,我的页面看起来像:

这是我的文件夹结构:

这是我的tailwind. config.js:

/** @type {import('tailwindcss').Config} */
/* eslint-env node */
module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
        fontFamily: {
            sans: ['Roboto', 'sans-serif'],
        },
    },
    plugins: [],
}

这是我的postcss.config.js:

/* eslint-env node */
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

这是我的global.css文件:

@tailwind base;
@tailwind components;
@tailwind utilities;

我还添加了tailwindcss作为依赖项和devDependency,但它仍然没有修复它。
你知道如何让它在生产构建中工作吗?

06odsfpq

06odsfpq1#

我也遇到过这个问题,我发现tailwindcss的优先级较低;不确定你是否在使用其他库,比如Material UI。在我的例子中,React/情绪比顺风获得更高的优先级。
要修复它,需要配置tailwind.config.js并添加important字段

module.exports = {
  // ...
  important: '#app',
}

参见tailwind文档-https://tailwindcss.com/docs/configuration#selector-strategy
然后在nextjs应用程序中,找到__document.jsx文件,并将id参数添加到body元素中

<Html lang="en">
    <Head />
    <body id="app">
        <Main />
        <NextScript />
    </body>
</Html>

这样就可以了,并且可以在生产环境中正确渲染

相关问题