use non rgb/rgba values about tailwindcss-theming HOT 8 CLOSED

Yeah, sorry. Since the support of transparency requires this: rgba(var(--color-variable), var(--opacity-variable)), for consistency, non-transparent color use the RGB format, which allows for more flexibility.

If this is a concern, there is a possibility to PR a change that adds a setting to the ThemeBuilder to output non-transparent colors as hexadecimal values instead.

from tailwindcss-theming.

Hey @sijad, can you test tailwindcss-theming@hex and use the hexadecimal() method on your ThemeBuilder?

It should do exactly what you want :)

https://github.com/hawezo/tailwindcss-theming/releases/tag/v2.4.0

from tailwindcss-theming.

Hi, what do you mean? You can pass any valid color if that's what you mean.

https://github.com/hawezo/tailwindcss-theming/blob/master/docs/configuration.md#colors

from tailwindcss-theming.

sorry for not explaining my use case.

I wanted to pass custom values by wrapping my elements inside a div and pass customized variables.

for example:

<div style="--color-brand: #ff00ff">...

but it's not possible to do it without converting color to RGB.

from tailwindcss-theming.

I think this is not the right package for me, I'm going to pass variables to tailwind as directly:

module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      background: 'var(--color-background)',
      heading: 'var(--color-heading)',
      text: 'var(--color-text)',
    },
  },
};

thanks for your great package

from tailwindcss-theming.

Thanks!

wouldn't it more clear to always pass color directly instead of in-lining rgb(a)

why not passing color to root as is (rgba in case of alpha, hex otherwise)?

if this is necessary, IMO naming it hexadecimal is not proper, because it's also possible pass values in rgb(a) too, <div style="--color-brand: rgba(255,0,255,200)">

from tailwindcss-theming.

wouldn't it more clear to always pass color directly instead of in-lining rgb(a)

I'm not sure what you mean? Abandoning the RGB/RGBA way of working. This is not possible because of the reason below.

why not passing color to root as is (rgba in case of alpha, hex otherwise)?

This is necessary to be able to work with opacity. This plugin leverages the annoying work so the user only has to specify the wanted color.

I think the hexadecimal name is appropriate though, because it does what its name says: it outputs the variables as hexadecimal instead of RGB/RGBA. For instance, if you set the color white in your theme, it will output --color-name: #FFFFFF instead of --color-name: 255,255,255 previsouly, and the utilities will be color: var(--color-name) instead of color: rgb(var(--color-name)).

Although this allows you to define the colors in whatever format you want by inlining them (style="--color-name: #fff"), the plugin itself outputs them in hexadecimal and just that. The difference is that it won't use the rgb and rgba functions anymore.

Anyway, regardless of how the internals work, can you tell me if it works as you'd want? Remember to call the hexadecimal method on your ThemeBuilder. You can still enter the color in whatever format you want in your themes, they will be converted.

from tailwindcss-theming.

I'm closing this issue. Feel free to reopen or create a new one about this topic if needed.

from tailwindcss-theming.