Yo uso TailwindCSS y NextJs para mi aplicación.
Todo está funcionando cuando me npm run dev
pero cuando me npm run build
entonces npm run start
Tengo algunas clases que no están funcionando. Por ejemplo en este código, h-20 / text-white
no funcionan pero otros tailwind clases que funcionan a la perfección...
<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>
No es mi 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
No sé si usted tiene alguna idea ? He seguido tailwind docs, pero parece que no es suficiente ahah
Thx