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