Laravel Mix: Not all variants are enabled out of the box

[Marco Rieser]

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.

[Rob de Kort]

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 :-).

[Vlad Dumitrescu]

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.

[Rob de Kort]

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.

[Adam Wathan]

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.