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.

Welcome to SO! Your question is difficult to answer without any context. Perhaps you can provide a [minimal example](https://stackoverflow.com/help/minimal-reproducible-example)? Could be numerous reasons: Did you recompile? What does your tailwind configuration look like? Are your purging classes perhaps? If you update your answer, we can help you better! — Eric Landheer, Jul 09 '21 at 15:34
have you used `npm run dev` to mix your `.css` files after changing it? — , Jul 09 '21 at 15:49

score 2 · Answer 1 · edited Aug 26 '21 at 16:26

2

I have solve this problem before with this :

npm run prod

this might help you

edited Aug 26 '21 at 16:26

Abilogos

4,777
2
19
39

answered Aug 26 '21 at 16:02

Miftakhusy Syiroth

21
2

score 0 · Answer 2 · answered Aug 18 '21 at 13:58

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.

score 0 · Answer 3 · answered May 08 '22 at 15:36

0

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'

answered May 08 '22 at 15:36

shahil

941
9
20

score 0 · Answer 4 · answered Jun 27 '22 at 01:04

0

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.

answered Jun 27 '22 at 01:04

Aaron Harker

173
1
2
11

score -1 · Answer 5 · answered Jul 09 '21 at 17:07

-1

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.

answered Jul 09 '21 at 17:07

Toby Allen

10,997
11
73
124

Why are some Tailwind classes not having effect in JetStream?

5 Answers5