Config colors are not LessCSS color objects? about discuss HOT 6 CLOSED

One solution is to escape the string in less:

background: ~"color(red a(90%))";

from discuss.

Hey @aphofstede! The reason this isn't working as you'd expect is that Less processes your CSS before Tailwind does; Tailwind is meant to work on Less' output.

That means that Less is literally trying to run the code fade(config('colors.grey'), 50%), because Tailwind hasn't replaced the config call with the actual color value by the time Less is trying to apply the fade function.

The best way to add transparent variations of colors would be to add them as new colors in your tailwind.js config file.

Another approach that I bet would work is to use the postcss-color-function plugin, which would let you do that sort of alpha channel manipulation in the PostCSS phase:

.input[type=text], .input[type=password] {
    background-color: color(config('colors.grey'), a(50%));
}

I haven't tested it myself but it should work.

from discuss.

Thanks @adamwathan , that makes sense. It takes a bit of getting used to the pipeline I guess. (the PostCSS step is new, for me)

I added 'teal-lightest-half-transparent': 'rgba(232,255,254,0.5)', to the colors array.
In my app.css it appears to have rendered correctly:

.bg-teal-lightest-half-transparent,
.hover\:bg-teal-lightest-half-transparent:hover {
	background-color: rgba(232, 255, 254, 0.5);
}

So I can do:

  input[type=text], input[type=password] {
    @apply .bg-teal-lightest-half-transparent;
  }

Yet I get background-color: undefined in the CSS if I try to do:

  input[type=text], input[type=password] {
    background-color: config('colors.teal-lightest-half-transparent');
  }

the docs imply that that should work?

from discuss.

@aphofstede Can you share a demo repo so I can try it out? Are you sure it's in the colors array and not just the backgroundColors array? Try config('backgroundColors.teal-lightest-half-transparent') and see if that makes a different 👍

from discuss.

Can't reproduce it anymore.. I think you might be right about the backgroundColors array actually, good instinct! 🤭 😄 Thanks

from discuss.

I know this is closed, but unfortunately the trick with postcss-color-function won't work with LESS, because it has its own color function. The LESS compiler is therefor throwing an error and not passing it on to the postcss pipeline. You can use this npm lib instead though: postcss-color-mod-function, which uses "color-mod" as the function name instead.

from discuss.