J'utilise TailwindCSS et NextJs pour mon application.
Tout fonctionne quand je npm run dev
mais quand je npm run build
alors npm run start
J'ai certaines classes qui ne sont pas de travail. Par exemple dans ce code, h-20 / text-white
ne pas travailler, mais d'autres tailwind classes sont parfaitement de travail...
<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>
Il y a mes 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
Je ne sais pas si vous avez des idées ? J'ai suivi tailwind docs, mais on dirait qu'il n'est pas assez ahah
Thx