javascript - 一些 Tailwind 样式在 Next.js 的生产环境中不起作用
问题描述
出于某种原因,一些样式似乎不适用于 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
目录。
所有代码都在这里通过github
解决方案
对于将来看到此内容的任何人,只需将purge
数组中任何新文件夹的路径添加到 tailwind 配置中,如下所示:
module.exports = {
purge: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add more here
],
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
2021 年 12 月更新:
在 TailwindCSS v.3 之后,配置文件略有不同。上面的配置将是:
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
// Add extra paths here
],
theme: {
extend: {},
},
plugins: [],
}
推荐阅读
- java - 提供了带有 Spring Boot 启动器 Web 的 Spring Boot 应用程序
- vba - 如何比较 MS Access 中的两个文本框?
- javascript - Vue 去抖滑块事件
- ios - 为应用中所有 UIViewController 的标题实现 DidSet
- masstransit - MassTransit JobConsumer 示例因超时异常而失败
- javascript - 通过 JavaScript 正则表达式解析自定义数据
- bar-chart - 同一轴上的 2 个维度 Tableau
- sql - 与两列中的任何一列或两列中的任何一列连接返回重复项
- .net - .NET CORE 网页在(异步)加载大量图像(来自 AWS S3)时锁定
- javascript - 在此映射减少 mongodb javascript IGNORE NULL 值