Last active
September 1, 2023 16:18
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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