Tailwind Theme Builder

Build color palettes and generate tailwind.config.ts output.

Generate scale

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: {
          '50': '#f0f6fe',
          '100': '#e2ecfe',
          '200': '#bbd4fc',
          '300': '#8ab5f9',
          '400': '#5090f7',
          '500': '#0b64f4',
          '600': '#0950c3',
          '700': '#073c92',
          '800': '#052861',
          '900': '#03183a',
          '950': '#021027',
        },
        secondary: '#8b5cf6',
        accent: '#10b981',
      },
    },
  },
}

export default config