Tailwind Config Generator

Basic Settings

Custom Spacing

Border Radius

/** @type {import('tailwindcss').Config} */
module.exports = {
  "darkMode": "class",
  "theme": {
    "extend": {
      "colors": {
        "primary": {
          "50": "#eff6ff",
          "100": "#dbeafe",
          "200": "#bfdbfe",
          "300": "#93c5fd",
          "400": "#60a5fa",
          "500": "#3b82f6",
          "600": "#2563eb",
          "700": "#1d4ed8",
          "800": "#1e40af",
          "900": "#1e3a8a"
        },
        "secondary": {
          "50": "#f8fafc",
          "100": "#f1f5f9",
          "200": "#e2e8f0",
          "300": "#cbd5e1",
          "400": "#94a3b8",
          "500": "#64748b",
          "600": "#475569",
          "700": "#334155",
          "800": "#1e293b",
          "900": "#0f172a"
        }
      },
      "spacing": {
        "xs": "0.25rem",
        "sm": "0.5rem",
        "md": "1rem",
        "lg": "1.5rem",
        "xl": "2rem",
        "2xl": "3rem"
      },
      "borderRadius": {
        "sm": "0.125rem",
        "default": "0.25rem",
        "md": "0.375rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "2xl": "1rem",
        "full": "9999px"
      },
      "fontFamily": {
        "sans": [
          "Inter",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "Georgia",
          "serif"
        ],
        "mono": [
          "Fira Code",
          "monospace"
        ]
      }
    }
  },
  "plugins": []
}