csslaraveltailwind-csstailwind-3laravel-breeze

Tailwind missing lots of styles


I built a new site using Laravel Breeze with Vue as a base. Now have found there to be lots of missing classes from what's defined within the Tailwind docs.

Edit: To clarify these are classes I tried to use in a static fashion e.g. <div class="outline-green>" and <div class="outline-green-100>" after seeing them in the docs and they didn't render the styles.

For example there's only a handful of classes tied to the color green e.g. text-green-600 and bg-green. Also there's no outline classes at all except for 4: focus:outline-none, focus:outline:focus, focus:ountline-2:focus, and .focus:outline-red-500:focus

Initially noticed this on version 3.3.6 and have updated to 3.4.1, re-built and still seeing the same thing.

I have tried updating to the latest version
enter image description here

This is my config, default that came out of breeze except the addition of the forms plugin
enter image description here

Confirmed colors and variants are defined in the packageenter image description here

This is a shot of the newly attempted build of the css showing lots of variants in certain classes, but they all have gaps, there's not one example of it having generated all classes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 enter image description here


Solution

  • Tailwind monitors the files in your tailwind.config.js (in your case, mostly Blade and Vue files) for usage of Tailwind classes. It then renders a CSS file with only those classes; this keeps the file size down, and also permits things like arbitrary values for classes.

    As a result, using new classes Tailwind hasn't seen before won't do anything unless you're running npm run dev during development (or you ran npm run build for prod).