'Why are some Tailwind classes not having effect in JetStream?

Some classes like text-green-500, rounded are having effect and the styling is updated.

Ohter classes, like bg-black, don't have any effect on the styling.

I am using Jetstream and TailwindCSS.

csslaravellaravel-8tailwind-cssjetstream


Solution 1:[1]

I have solve this problem before with this :

npm run prod

this might help you

Solution 2:[2]

There are plenty of possibilities which may cause this, but as a kind of a workaround you could use the safelist in the tailwind.config.js, as follows:

    purge: {

      content: [
     './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    ],
    safelist: [
        'rounded',
        'text-green-500',
    ],
},

and don't forget to run npm run dev.

p.s. for some reason, sometimes npm run dev is not enough and I have to go for npm run watch, and ctrl+c it after the mix recompile is over. Don't know what could the reason be, but it helped.

Solution 3:[3]

If you add some html with tailwind CSS elements not used before then just run 'npm run dev' and that should add the CSS classes.

After that, you can start the server using 'php artisan serve'

Solution 4:[4]

As suggested by @DaviMendesDev you need to run npm to compile your classes for use.

npm run dev

or

npm run prod

this will generate .css files you can use.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abilogos
Solution 2 Kay
Solution 3 shahil
Solution 4 Toby Allen

Related Questions