出于某种原因,一些样式在 Netlify 上托管的生产版本中似乎不起作用。这似乎只发生在单个组件上。它是一个位于 ./layout/FormLayout.tsx
的包装器(不知道这是否会改变任何东西)。这是包装器:
const FormLayout: React.FC<FormLayout> = ({ children, title, description }) => {
return (
<div className="w-screen mt-32 flex flex-col items-center justify-center">
<div className="p-6 flex flex-col items-center justify-center">
<h2 className="text-4xl font-semibold text-blue-400">
{title}
</h2>
{description && (
<h6 className="mt-4 text-md font-medium">{description}</h6>
)}
<div className="mt-12 w-max">{children}</div>
</div>
</div>
)
}
在这里使用:
const Register: React.FC<RegisterProps> = () => {
return (
<FormLayout title="Register" description="Register with your email.">
{/* form stuff. styles do work in here */}
</FormLayout>
)
}
这里是一些配置文件:
顺风配置:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss 配置:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
这是正在发生的事情的图形示例:
对于我的构建命令,我使用 next build && next export
,Netlify 部署 /out
目录。
所有代码都是here via github
答案 0 :(得分:8)
对于将来看到此内容的任何人,只需将 purge
数组中任何新文件夹的路径添加到 tailwind 配置中,如下所示:
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./layout/**/*.{js,ts,jsx,tsx}',
'./helpers/**/*.{js,ts,jsx,tsx}',
// Add more here
],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
答案 1 :(得分:0)
就我而言,这是因为我没有在 purge
中的 tailwind.config.css
中提供正确的地址
答案 2 :(得分:0)
我遇到了同样的问题。
我改变了这些:
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
到这些:
purge: ["./pages/**/*.js", "./components/**/*.js"],
就是这样。问题解决了! 奇怪的问题
答案 3 :(得分:0)
如果有人遇到不更新 dom 相应更改的问题。 检查导入和文件名是否使用相同的大小写!
Header.js != header.js