To define a custom color in tailwind.config.js with :root and withOpacity

[rsipakov]

Will the following method give an advantage for defining a custom color?

// globals.css

: root {
   --tw-clr-primary-50: 250, 250, 250;
   --clr-primary-50: rgb(var(--tw-clr-primary-50)); /* #fafafa */
}

// tailwind.config.js

function withOpacity(variableName) {
	return ({ opacityValue }) => {
		if (opacityValue !== undefined) {
			return `rgba(var(${variableName}), ${opacityValue})`;
		}
		return `rgb(var(${variableName}))`;
	};
}

module.exports = {
....
theme: {
   extend: {
      colors: {
             primary: {
             50: withOpacity('--tw-clr-primary-50'),
          },
       },
    },
  },
}

References: https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

[rsipakov]

This seems to be explained in the Tailwind CSS documentation https://tailwindcss.com/docs/customizing-colors#using-css-variables

[timlrx]

I think it's overcomplicating things. The current approach makes it easy to change and customize with some constraints and generates a full color palette. If you want to use CSS variables, feel free to refactor, but I would prefer not to make it the default.

[rsipakov]

Thank you for your opinion! Maybe someone would be interested in experimenting with CSS variables ) Also, some useful information about syntax for modern color declarations https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1#rgb-rgba

/* 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'), // Herу it does not work!!! only `color: theme('colors.primary.100')`
                }
            }
      }
   }
}