Tailwindcss not compiling all color classes in laravel

I have been playing around with tailwindcss and laravel 8 recently and I came up with this weird "problem". Classes were not loading!

So, have you ever noticed that tailwindcss does not compile all color classes when compiled? Actually it may not load any of the expected classes.

Well that not so true...

The thing is that the way tailwindcss works it is intended not to load the classes.

Let's see how it works!

According to the installation instructions:

https://tailwindcss.com/docs/guides/laravel

only a few steps are required in order to load tailwindcss with laravel, but WAIT! the classes are not there.

The tricky part is the last part saying:

npm run watch

what does this command do?

This command parses all the blade files (actually all the files that are in the directories stated in the content of tailwind.config.js) and compiles the classes that are present! Only the ones that are present!

Letting your terming (command line) "waiting" at this "watch" point (similar to the following image):

is the way to get all the css classes you need! Having as reference the class reference of tailwindcss let's do a trial. First of all, sail is up and npm run watch command is running. (be careful if using sail then npm must run as part of sail, AKA ./vendor/bin/sail npm run watch). Let go...

Searching into the app.css of my laravel installation (public/css/app.css) there is no bg-red-xxx class.

Then I turn to a blade file (eg. index.blade.php) and I add bg-red-500 into a class attribute (note that bg-red-500 did not exist in my files).

 

I save the file and out of the sudden I can see that something happened to the terminal "watching" the Laravel mix. Then I go back to the app.css file and search again for "bg-red". Oh, it's here!

 

Laravel mix with tailwindcss tries to reserve as lower space as possible. This means that any class that is never used does not have to be there reserving space. What is the drawback? Autocomplete does not help with writing the classes. But the tailwind examples and documentation are pretty much clear on how they work and it is easy to find all the required classes.

Next, I will share how to use blade components! used to work with the "extends" way but I find blade components having much more code reusability!

Cheerz!