Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate Dynamic Custom Properties in Config #89

Open
secondmanveran opened this issue Aug 10, 2023 · 1 comment
Open

Generate Dynamic Custom Properties in Config #89

secondmanveran opened this issue Aug 10, 2023 · 1 comment
Labels
question Further information is requested

Comments

@secondmanveran
Copy link

Versions:

  • Package Version: 2.6.1
  • Tailwindcss Version: 3.3.3

Question:

I'm trying to create the full suite of Tailwind classes into custom props for a package I'm working on.

I've already created the full color palette which look like so:

:root {
  --colors-inherit: inherit;
  --colors-current: currentColor;
  --colors-transparent: transparent;
  --colors-black: #000;
  --colors-white: #fff;
  --colors-slate-50: #f8fafc;
  --colors-slate-100: #f1f5f9;
  ...
}

Now I want to generate other elements with color props, but I want to use the variable obviously as opposed to the hex code again:

:root {
  --border-black: var(--colors-black);
  --bg-slate-400: var(--colors-slate-400);
  ...
}

It would be supper unproductive to have to change hexes all over the place wherever the color prop is used.

So in my Tailwind Config I have the variables property as a function passing in theme and colors:

variables: (theme, colors) => ({
  DEFAULT: {
    bg: {
      '': ??? // what to do here to loop through colors
    }
  }
})

If I do the following:

bg: {
  '': theme('colors')
}

I'll get all the colors with hex

:root {
  ...
  --bg-slate-400: #94a3b8;
  ...
}

How can I dynamically loop through the colors array and generate vars:

`var(--colors-${color}-${number})`

Thanks

@secondmanveran secondmanveran added the question Further information is requested label Aug 10, 2023
@secondmanveran
Copy link
Author

I resolved this if anyone else might need this functionality. Add the following function at the end of your Tailwind config:

const refactorColors = themeColors => {
  const colors = {}

  for (const color in themeColors) {
    if (
      color === 'inherit' ||
      color === 'current' ||
      color === 'transparent' ||
      color === 'black' ||
      color === 'white'
    ) {
      colors[color] = `var(--colors-${color})`
    } else {
      for (const number in themeColors[color]) {
        colors[`${color}-${number}`] = `var(--colors-${color}-${number})`
      }
    }
  }

  return colors
}

Then in your variables prop you can call this function, passing in the theme('colors') object.

export default {
  content: ['./src/**/*.{vue,js}'],
  theme: {
    extend: {},
    variables: theme => ({
      DEFAULT: {
        bg: {
          ...refactorColors(theme('colors'))
        }
      }
    })
  },
  plugins: [forms, variablePlugin]
}

This will produce a full list of bg- prefixed colors assigned to the base --color variable.

:root {
  --bg-inherit: var(--colors-inherit);
  --bg-current: var(--colors-current);
  --bg-transparent: var(--colors-transparent);
  --bg-black: var(--colors-black);
  --bg-white: var(--colors-white);
  --bg-slate-50: var(--colors-slate-50);
  --bg-slate-100: var(--colors-slate-100);
  --bg-slate-200: var(--colors-slate-200);
  --bg-slate-300: var(--colors-slate-300);
  --bg-slate-400: var(--colors-slate-400);
  --bg-slate-500: var(--colors-slate-500);
  --bg-slate-600: var(--colors-slate-600);
  --bg-slate-700: var(--colors-slate-700);
  --bg-slate-800: var(--colors-slate-800);
  --bg-slate-900: var(--colors-slate-900);
  --bg-slate-950: var(--colors-slate-950);
  ...
}

Of course you can set any color based custom props by modifying the variable prop.

variables: theme => ({
  DEFAULT: {
    border: {
      ...refactorColors(theme('colors'))
    }
  }
})

Result:

:root {
  --border-inherit: var(--colors-inherit);
  --border-current: var(--colors-current);
  --border-transparent: var(--colors-transparent);
  --border-black: var(--colors-black);
  --border-white: var(--colors-white);
  --border-slate-50: var(--colors-slate-50);
  --border-slate-100: var(--colors-slate-100);
  --border-slate-200: var(--colors-slate-200);
  --border-slate-300: var(--colors-slate-300);
  --border-slate-400: var(--colors-slate-400);
  --border-slate-500: var(--colors-slate-500);
  --border-slate-600: var(--colors-slate-600);
  --border-slate-700: var(--colors-slate-700);
  --border-slate-800: var(--colors-slate-800);
  --border-slate-900: var(--colors-slate-900);
  --border-slate-950: var(--colors-slate-950);
  ...
}

Hopefully it will be useful to someone 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant