Tailwind 颜色导出

将调色板转换为 tailwind.config.js 颜色主题和 CSS 变量。

颜色

primary

100

200

300

400

500

600

700

800

900

950

accent

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;
}