tailwind.config.js•2.58 kB
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./.storybook/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// These will be populated from Figma tokens
primary: {
50: 'var(--color-primary-50)',
100: 'var(--color-primary-100)',
200: 'var(--color-primary-200)',
300: 'var(--color-primary-300)',
400: 'var(--color-primary-400)',
500: 'var(--color-primary-500)',
600: 'var(--color-primary-600)',
700: 'var(--color-primary-700)',
800: 'var(--color-primary-800)',
900: 'var(--color-primary-900)',
},
},
spacing: {
// These will be populated from Figma tokens
'4xs': 'var(--spacing-4xs)',
'3xs': 'var(--spacing-3xs)',
'2xs': 'var(--spacing-2xs)',
'xs': 'var(--spacing-xs)',
'sm': 'var(--spacing-sm)',
'md': 'var(--spacing-md)',
'lg': 'var(--spacing-lg)',
'xl': 'var(--spacing-xl)',
'2xl': 'var(--spacing-2xl)',
'3xl': 'var(--spacing-3xl)',
'4xl': 'var(--spacing-4xl)',
},
borderRadius: {
// These will be populated from Figma tokens
'none': 'var(--radius-none)',
'sm': 'var(--radius-sm)',
'md': 'var(--radius-md)',
'lg': 'var(--radius-lg)',
'xl': 'var(--radius-xl)',
'full': 'var(--radius-full)',
},
fontFamily: {
// These will be populated from Figma tokens
sans: ['var(--font-sans)'],
mono: ['var(--font-mono)'],
},
fontSize: {
// These will be populated from Figma tokens
'xs': 'var(--font-size-xs)',
'sm': 'var(--font-size-sm)',
'base': 'var(--font-size-base)',
'lg': 'var(--font-size-lg)',
'xl': 'var(--font-size-xl)',
'2xl': 'var(--font-size-2xl)',
'3xl': 'var(--font-size-3xl)',
'4xl': 'var(--font-size-4xl)',
},
lineHeight: {
// These will be populated from Figma tokens
'none': 'var(--line-height-none)',
'tight': 'var(--line-height-tight)',
'normal': 'var(--line-height-normal)',
'relaxed': 'var(--line-height-relaxed)',
'loose': 'var(--line-height-loose)',
},
boxShadow: {
// These will be populated from Figma tokens
'sm': 'var(--shadow-sm)',
'md': 'var(--shadow-md)',
'lg': 'var(--shadow-lg)',
'xl': 'var(--shadow-xl)',
},
},
},
plugins: [],
}