Make it play along with opacity utilities...

[crswll]

With tailwind you can do something like:

{
  primary: '#f00',
}

Which gives you something like:

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity, 1))
}

With custom properties this is more difficult to do. We'd need to essentially translate the hex colors to r g b and do something like this but I don't know if this is too much magic or not (especially if things aren't defined as hex).

:root {
  --colors-primary: 255 0 0;
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--colors-primary) / var(--tw-text-opacity, 1));
}

This will be useful. Will definitely need some logic around if we should do this for a given value or not.

const colorNameWithVariable = name => ({ opacityVariable, opacityValue }) => {
  if (opacityValue !== undefined) {
    return `rgb(var(--${name}) / ${opacityValue})`
  }
  if (opacityVariable !== undefined) {
    return `rgb(var(--${name}) / var(${opacityVariable}, 1))`
  }
  return `rgb(var(--${name}))`
}

[Leravig]

Seems to be a good approach. But is it really necessary? You can use the tailwindcss native opacity classes for it.

[crswll]

It is sadly. The opacity utilities do not currently work. The plugin currently outputs:

.text-primary {
  color: var(--colors-primary)
}

and tailwind can't tell var(--colors-primary) is a hex color to change to an RGB so it can apply the tailwind variable for that so we need to handle that.

I'm basically using the logic from Tailwind to transform the colors and it's mostly working. Want to write more tests still. Here's some example:

// input theme
{
  colors: {
    primary: '#f00',
  }
}

// output css
:root {
  --primary: 255 0 0;
}

.text-primary {
    --text-opacity: 1;
    color: rgb(var(--colors-primary) / var(--text-opacity, 1));
}

[crswll]

Updated.

[irg1008]

Sorry to type in here again but it doesn't seem to be working on "colors" while using not base theme (dark, hight contrast, etc). It does though in background and text colors.

Note for images: ("colors" are the variables with "accent" on them)

• Base theme:

• Dark theme:

Edit: Theme config file.

const themeConfig = {
  themes: [
    {
      name: "base",
      selectors: [":root"],
      theme: {
        backgroundColor: {
          primary: lightTheme[300],
          secondary: lightTheme[400],
          tertiary: lightTheme[700],
        },
        textColor: {
          primary: lightTheme[900],
          secondary: lightTheme[700],
          tertiary: lightTheme[50],
        },
        colors: {
          "accent-lighter": lightTheme[100],
          "accent-light": lightTheme[300],
          "accent-medium": lightTheme[500],
          "accent-dark": lightTheme[700],
          "accent-darker": lightTheme[900],
        },
        borderRadius: {
          custom: 0,
        },
        borderWidth: {
          button: "2px",
        },
        borderColor: {
          button: "transparent",
        },
      },
    },
    {
      name: "dark",
      selectors: [".dark"],
      theme: {
        backgroundColor: {
          primary: darkTheme[700],
          secondary: darkTheme[500],
          tertiary: darkTheme[300],
        },
        textColor: {
          primary: darkTheme[50],
          secondary: darkTheme[700],
          tertiary: darkTheme[900],
        },
        color: {
          "accent-lighter": darkTheme[900],
          "accent-light": darkTheme[700],
          "accent-medium": darkTheme[500],
          "accent-dark": darkTheme[300],
          "accent-darker": darkTheme[100],
        },
        borderRadius: {
          custom: "9999rem",
        },
        borderWidth: {
          button: "2px",
        },
        borderColor: {
          button: darkTheme[800],
        },
      },
    },
  ],
};

[crswll]

You're using color in the dark config. You want colors.

[irg1008]

OMG. I did change the first one, didn't realize to change the others. Such a stupid mistake. Thanks for pointing it out so fast. And thanks for the awesome plugin!

[crswll]

No problem. Happy you're finding it useful.