To define a custom color in tailwind.config.js

[rsipakov]

To define a custom color in tailwind.config.js, why not use a simpler designation like the one below (without :root and withOpacity)?

colors: {
   primary: colors.neutral,
   info: colors.indigo
},

[theodorusclarence]

That’s to utilize the CSS Variables itself

With CSS variables we can use something like this theme switcher without additional config

[rsipakov]

Thanks!

[rsipakov]

p.s. Is that explained here? https://tailwindcss.com/docs/customizing-colors#using-css-variables

[theodorusclarence]

Yes that’s it!

[rsipakov]

@theodorusclarence In this case I think it better to use syntax for modern color declarations https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1#rgb-rgba What do you think about it?

[theodorusclarence]

Nice information, I’ll refactor it

[rsipakov]

On my side work this function. Can you @theodorusclarence advise how can I use it inside typography: (theme) => ({....})?

/* globals.css */

:root {
--tw-color-blue-vivid-100: 230 246 255; /* #E6F6FF; hsl(202, 100%, 95%) */
}

h1,
.h1 {
	@apply text-primary-100/50;
}

// tailwind.config.js

function withOpacityValue(variable) {
	return ({ opacityValue }) => {
		if (opacityValue === undefined) {
			return `rgb(var(${variable}))`
		}
		return `rgb(var(${variable}) / ${opacityValue})`
	}
}

module.exports = {
   theme: {
      extend: {
         colors: {
            primary: {
               100: withOpacityValue('--tw-color-blue-vivid-100'),
            }
         }
         typography: (theme) => ({
            DEFAULT: {
               css: {
                  color: theme('colors.primary.100/50'), // it does not work!!!
                }
            }
      }
   }
}

[theodorusclarence]

I don't think you can directly call the primary on tailwind.config. You're gonna have to explicitly assign the color

[rsipakov]

Thanks!