Custom Colors Not Working?

[jjjrmy]

My custom colors are not being included with the Ripple. Am I missing something? Also will it work with var colors?

module.exports = {
    theme: {
        extend: {
            colors: {
                'brand1': 'var(--brand1)',
                'brand2': 'var(--brand2)',
                'dodgerblue': 'dodgerblue',
            },
        },
        container: {
            center: true,
            padding: '1rem',
        },
        ripple: theme => ({
            colors: theme('colors')
        }),
    },
    variants: {
        borderWidth: ['responsive', 'hover', 'focus'],
        textColor: ['hover', 'active', 'group-hover', 'group-active'],
        boxShadow: ['hover', 'focus', 'active', 'group-hover', 'group-active'],
    },
    plugins: [
        require('@tailwindcss/ui'),
        require('tailwindcss-ripple')(),
    ]
}

[jamessessford]

Hey! I'll try and take a look at this over the next few days :)

[jamessessford]

Hey @jjjrmy - I can't believe how quickly the time I haven't been looking at open source stuff has gone!

I had a look at this today and the latest version will allow you to use named colors (dodgerblue) but it won't work with CSS variables unfortunately. I'll close this off but keep it in mind when I'm looking at it again to see if there's a way I can achieve this.

Cheers!

[Enteleform]

@jamessessford Just ran into the same issue with CSS variables. Is there any particular limitation that is preventing this from working?

[jamessessford]

Hey @Enteleform - the problem I had was in evaluating the variable in the plugin. I've got a bit of free time this weekend so I'll have another look at it and see if I can get it cracked!

Cheers!

[chrber04]

I have the same issue, but not using variables. I have extended the colors & I get this error:

Tailwind CSS: Unable to parse color from object:

Example:

extend: {
    colors: {
      primary: {
              background: {
                DEFAULT: "#17191f",
                50: "#343846",
                100: "#2e323e",
                ...

Appreciate any and all help!

[jamessessford]

Hey @chrber04 - can you paste the contents of your full tailwind config file and your package.json file for me and I'll see if I can spot what's going on

[jamessessford]

Going to close this off as it's not solvable by the package at this time.

Under the hood the package uses lighten and darken functions to set the colours but as these are not functions that can be applied in a stylesheet, css variables can't be used.

I'll revisit again if this changes