Export Tailwind Colors

Convertissez votre palette en thème tailwind.config.js et variables CSS.

Couleurs
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