Jump to content

Tailwind v3 classes not compiling in Sage 9 (Wordpress) after upgrading from Tailwind v2


Recommended Posts

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.


"autoprefixer": "^9.0.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.7",


module.exports = {

content: [
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: [

I also check this but can't find my answer: npx -https://stackoverflow.com/questions/71327552/tailwind-css-jit-or-v3-0-is-not-working-basic-installation-not-workingdeoland

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in

Sign In Now

  • Create New...