Why are some Tailwind classes not having effect in JetStream?

Question

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.

Answer 1

I have solve this problem before with this :

npm run prod

this might help you

Answer 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.

ps 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.

Answer 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'

Answer 4

While you're developing run npm run watch , it will refresh the CSS requirements whenever you save a page.

npm run prod is for once you have finished developing and want to put the site into production.

Answer 5

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.