Eu uso TailwindCSS e NextJs para o meu aplicativo.
Tudo está funcionando quando eu npm run dev
mas quando eu npm run build
em seguida, npm run start
Eu tenho algumas classes que não estão funcionando. Por exemplo, neste código, h-20 / text-white
não trabalho, mas outros tailwind classes estão funcionando perfeitamente...
<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>
Não é o meu 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
Eu não sei se você tem alguma idéia ? Eu segui o vento de cauda docs, mas parece que não é suficiente ahah
Thx