Laravel Mix: Not all variants are enabled out of the box
marcorieser opened this issue · comments
What version of @tailwindcss/jit are you using?
0.1.3
What version of Node.js are you using?
v14.3.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction repository
https://github.com/marcorieser/laravel-tw-jit
- I install a standard Laravel application and configure Tailwind JIT via Laravel Mix.
- In tailwind.config.js I add the purge paths, but otherwise leave it as is.
- In the home view I insert the class
text-teal-500
and expect it to be generated in css, although I have not enabled the color variant in the configuration. - The same applies, for example, to the class
hover:focus:bg-blue-200
. - Unfortunately, the non-standard variants have not been generated.
- Variants enabled by default work as expected, as far as I can tell.
I don't think this a bug to be honest. A color isn't a variant. So for colours you have to explicitly enable them in your config. It's variants that should automagically work. So if you enable the teal colours in your config you don't have to define the hover
and focus
variants for backgrounds. That should be automatically picked up, which I noticed it does at the moment :-).
So if we do
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
extend: {
colors: colors
}
}
}
Then we can use all default colors at will. Would it be meaningful to make that the default? It means that the configuration won't be working well for non-jit setups, though.
I guess you're right Vlad. That should work probably. Personally I'm not sure about defaulting though as the current way forces you to think about your design system.
I wouldn't recommend making that the default, there's no reason to have 5 different sets of grays, 2 similar blues, 2 similar purples, etc. in the same app. Generally I recommend folks actually customize their config to use less colors than we ship by default, as most real-world projects don't need as much 👍🏻
We also recommend aliasing colors right, like this:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
// ...
gray: colors.trueGray,
purple: violet,
red: colors.rose,
yellow: colors.amber,
}
}
}
So that if you are using trueGray
as your gray you don't have to write bg-true-gray-500
everywhere vs. just bg-gray-500
.