我的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,但它仍然没有修复它。
你知道如何让它在生产构建中工作吗?
1条答案
按热度按时间06odsfpq1#
我也遇到过这个问题,我发现tailwindcss的优先级较低;不确定你是否在使用其他库,比如Material UI。在我的例子中,React/情绪比顺风获得更高的优先级。
要修复它,需要配置
tailwind.config.js
并添加important
字段参见tailwind文档-https://tailwindcss.com/docs/configuration#selector-strategy
然后在nextjs应用程序中,找到
__document.jsx
文件,并将id
参数添加到body元素中这样就可以了,并且可以在生产环境中正确渲染