Skip to content

Instantly share code, notes, and snippets.

@iamnbutler
Last active September 1, 2023 16:18
Show Gist options
  • Save iamnbutler/e23256bf9bc77bb63206d02f8b574c1a to your computer and use it in GitHub Desktop.
Save iamnbutler/e23256bf9bc77bb63206d02f8b574c1a to your computer and use it in GitHub Desktop.
A quick lil function to add a radix color scale to your tailwind config
import type { Config } from 'tailwindcss';
const radix_color_scale = (colorName: string) => {
return {
DEFAULT: `var(--${colorName}-9)`,
a1: `var(--${colorName}-a1)`,
a2: `var(--${colorName}-a2)`,
a3: `var(--${colorName}-a3)`,
a4: `var(--${colorName}-a4)`,
a5: `var(--${colorName}-a5)`,
a6: `var(--${colorName}-a6)`,
a7: `var(--${colorName}-a7)`,
a8: `var(--${colorName}-a8)`,
a9: `var(--${colorName}-a9)`,
a10: `var(--${colorName}-a10)`,
a11: `var(--${colorName}-a11)`,
a12: `var(--${colorName}-a12)`,
c1: `var(--${colorName}-1)`,
c2: `var(--${colorName}-2)`,
c3: `var(--${colorName}-3)`,
c4: `var(--${colorName}-4)`,
c5: `var(--${colorName}-5)`,
c6: `var(--${colorName}-6)`,
c7: `var(--${colorName}-7)`,
c8: `var(--${colorName}-8)`,
c9: `var(--${colorName}-9)`,
c10: `var(--${colorName}-10)`,
c11: `var(--${colorName}-11)`,
c12: `var(--${colorName}-12)`,
} as const
}
export default {
content: ['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
'red': colorStyle('red'),
'yellow': colorStyle('yellow'),
'blue': colorStyle('blue'),
'violet': colorStyle('violet'),
},
},
},
variants: {},
plugins: [require('@tailwindcss/typography')],
} satisfies Config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment