[英]Build Next.JS and tailwindcss
I use TailwindCSS and NextJs for my app.我将 TailwindCSS 和 NextJs 用于我的应用程序。 Everything is working when I npm run dev
but when I npm run build
then npm run start
I have some classes that aren't working.当我npm run dev
时一切正常,但是当我npm run build
然后npm run start
,我有一些类不工作。 For exemple in this code, h-20 / text-white
don't work but other tailwind classes are perfectly working...例如,在此代码中, h-20 / text-white
不起作用,但其他顺风类都可以正常工作......
<div class="flex text-white font-semibold cursor-pointer">
<div class="flex-1 h-20 center-hv text-center bg-blue-primary hover:bg-blue-hover button-shadow">
<div>
<div>Acheter 200 €</div>
</div>
</div>
</div>
There is my confs:有我的confs:
//next.config.js
module.exports = {
images: {
domains: ["picsum.photos"],
},
env: {
customKey: 'my-value',
}
}
//postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
//tailwind.css
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundColor: theme => ({
...theme('colors'),
'blue-primary': '#A9C4D2',
'blue-secondary': '#bbd9e8',
'blue-hover': '#74afcd',
'alert-info': '#d5e9f3',
'alert-warning': '#ffd585',
'alert-danger': '#ffb3b3'
}),
textColor: theme => ({
...theme('colors'),
'blue-primary': '#A9C4D2',
'blue-secondary': '#bbd9e8',
'blue-hover': '#74afcd',
'alert-info': '#d5e9f3',
'alert-warning': '#ffd585',
'alert-danger': '#ffb3b3'
}),
},
flex: {
'1': '1 1 0%',
'2': '2 2 0%',
'3': '3 3 0%',
'4': '4 4 0%',
'5': '5 5 0%',
auto: '1 1 auto',
initial: '0 1 auto',
inherit: 'inherit',
none: 'none',
}
},
variants: {
extend: {},
},
plugins: [],
}
//jsconfig.json
{
"typeAcquisition": {
"include": ["jest"]
}
}
//_app.js
import Navigation from '../componsants/navigation/Navigation'
import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return (
<>
<div className="mtb">
<Navigation />
<Component {...pageProps} />
</div>
</>
)
}
export default MyApp
I don't know if you have any ideas?不知道大家有没有想法? I followed tailwind docs, but it looks like it's not enough ahah我关注了顺风文档,但看起来还不够啊啊啊
Thx谢谢
If some classes are not working, and another working = check your tailwind.css
如果某些课程不工作,而另一个工作 = 检查你的tailwind.css
Also, you have the example Nextjs - Tailwind此外,您还有Nextjs - Tailwind示例
PS Your code test PS你的代码测试
I found the answer in an other post and testing Because I have some components that are on conditionnal rendering and while building my app tailwind don't create the classes我在另一篇文章和测试中找到了答案因为我有一些组件在条件渲染中并且在构建我的应用顺风时不要创建类
To solve this you can:要解决此问题,您可以:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.