ฉันใช้ TailwindCSS และ NextJs สำหรับแอ๊ปของฉัน.
ทุกอย่างคือทำงานตอนที่ฉัน npm run dev
แต่ตอนที่ฉัน npm run build
แล้ว npm run start
ฉันมีบางอย่าเรียนที่ไม่ได้ทำงานอยู่ สำหรับ exemple เข้ารหัส h-20 / text-white
ไม่ได้ทำงานแต่อีก tailwind เรียนดีทำงาน...
<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>
นั่นคือของฉัน 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
ฉันไม่รู้ถ้าคุณต้องมีความคิดอะไรอีกไหม ฉันตาม tailwind docs แต่มันดูเหมือนว่ามันไม่เพียงพอ ahah
Thx