I have updated Tailwind V2 to Tailwind V3 in my Sage 9 project by following Tailwind's upgrade guide. When I add a class to my blade file, the new engine doesn't generate the required classes in the css. The only way I seem to get it to generate the classes is by updating (saving a change) my tailwind.config.js
. This happens when I use either the yarn build
or yarn start
commands.
Using bg-blue text-primary
as an example; the text colour works, but the background doesn't. Then if I add some slash comments to my tailwind.config.js
file, save it and run yarn build
then, behold a blue background with red text.
I had to downgrade autoprefixer to v 9.0.0 because of this error: Module build failed: Error: PostCSS plugin autoprefixer requires PostCSS 8.
so I don't know whether or not this affects it's ability to generate the classes.
dependencies:
"autoprefixer": "^9.0.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.7",
Tailwind.config.js:
module.exports = {
content: [
'./resources/views/**/*.blade.php'
],
theme: {
colors: {
primary: {
DEFAULT: 'red',
},
secondary: {
DEFAULT: '',
},
white: '#fff',
black: '#000',
blue: 'blue',
gray: {
DEFAULT: '',
},
transparent: 'transparent',
},
extend: {
screens: {
'sm' : '567px',
'md' : '768px',
'lg' : '1025px',
'xl' : '1200px',
'2xl' : '1366px',
'3xl': '1660px',
'4xl': '1920px'
},
zIndex: {
'-10': '-10',
}
},
},
plugins: [
globalStyles,
],
}
i think the watch command on npx will help you generate the new css details, see if this post can help you npx --watch required to compile