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
This is my config, default that came out of breeze except the addition of the forms plugin
Confirmed colors and variants are defined in the package
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
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).