Exportar colores Tailwind
Convierte tu paleta en tema tailwind.config.js y variables CSS.
Colores
primary
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': {
'50': '#ffffff',
'100': '#dce2ff',
'200': '#bbc4fe',
'300': '#9ba6fb',
'400': '#7d87f7',
'500': '#6366f1',
'600': '#4b53d2',
'700': '#343fb4',
'800': '#1e2c97',
'900': '#0a187a',
'950': '#00005e'
},
'accent': {
'50': '#ffffff',
'100': '#ffddea',
'200': '#ffbbd5',
'300': '#fb98c1',
'400': '#f573ad',
'500': '#ec4899',
'600': '#cb387b',
'700': '#aa295f',
'800': '#8a1a45',
'900': '#6b0b2e',
'950': '#4d001a'
}
}
}
}
}CSS Variables
:root {
--color-primary-50: #ffffff;
--color-primary-100: #dce2ff;
--color-primary-200: #bbc4fe;
--color-primary-300: #9ba6fb;
--color-primary-400: #7d87f7;
--color-primary-500: #6366f1;
--color-primary-600: #4b53d2;
--color-primary-700: #343fb4;
--color-primary-800: #1e2c97;
--color-primary-900: #0a187a;
--color-primary-950: #00005e;
--color-accent-50: #ffffff;
--color-accent-100: #ffddea;
--color-accent-200: #ffbbd5;
--color-accent-300: #fb98c1;
--color-accent-400: #f573ad;
--color-accent-500: #ec4899;
--color-accent-600: #cb387b;
--color-accent-700: #aa295f;
--color-accent-800: #8a1a45;
--color-accent-900: #6b0b2e;
--color-accent-950: #4d001a;
}Ad