Search code examples
laravellaravel-8tailwind-csstailwind-3

Tailwind missing classes after update from v2 to v3 Laravel 8


I updated tailwind from v2 to v3 and now some classes are missing. I have tried to reinstall tailwind and its dependencies, but it did not help. What is causes such strange behaviour?

Example:

w-6/12
w-7/12 <- does not exist
w-8/12
w-9/12
w-10/12
w-11/12 <- does not exist
w-12/12 <- does not exist

And other classes from grid, fonts-sizes, etc.

Versions

tailwindcss: 3.0.15
tailwindcss/aspect-ratio: 0.4.0
tailwindcss/forms: 0.4.0
tailwindcss/line-clamp: 0.3.1
tailwindcss/typography: 0.5.0

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
    content: [
        './storage/framework/views/*.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './resources/views/**/*.blade.php',
    ],

    prefix: 'tw-',

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
        backgroundColor: theme => ({
            ...theme('colors'),
            'header': '#ffffff',
            'main': '#f2f2f3',
            'content': '#ffffff'
        }),

        textColor: theme => ({
            ...theme('colors'),
            'main': '#333333'
        })
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss")])
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

resources/css/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Solution

  • Solved this pseudo issue.

    The problem was that I didn't quite understand the new thing about changing purge to content and that now I have to compile the styles whenever I change them. Also, the previous version of phpstorm didn't see the classes and didn't give hints because of this.