Installation

  npm install -D tailwindcss
  npx tailwindcss init

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --main: 210 14% 95%; /* slate-100 */
    --main-text: 0 0% 0%; /* black */
    --main-border: 0 0% 83%; /* neutral-300 */
 
    --surface: 0 0% 98%; /* neutral-50 */
    --surface-text: 0 0% 0%; /* black */
 
    --muted: 0 0% 83%; /* neutral-300 */
    --muted-text: 0 0% 25%; /* neutral-700 */
 
    --accent: 0 0% 90%; /* neutral-200 */
    --accent-text: 0 0% 0%; /* black */
 
    --primary: 29 100% 52%; /* orange-500 */
    --primary-text: 0 0% 100%; /* white */
 
    --secondary: 34 100% 82%; /* #FED7AA */
    --secondary-text: 29 93% 39%; /* orange-700 */
 
    --info: 216 76% 52%; /* blue-500 */
    --info-text: 219 64% 43%; /* blue-800 */
    --info-filled-text: 0 0% 100%; /* white */
 
    --danger: 0 72% 43%; /* red-500 */
    --danger-text: 0 82% 31%; /* red-800 */
    --danger-filled-text: 0 0% 100%; /* white */
 
    --warning: 45 92% 47%; /* yellow-500 */
    --warning-text: 28 73% 26%; /* yellow-900 */
    --warning-filled-text: 0 0% 0%; /* white */
 
    --success: 140 76% 38%; /* green-500 */
    --success-text: 140 49% 20%; /* green-800 */
    --success-filled-text: 0 0% 100%; /* white */
 
    --radius: 0.375rem;
 
    --ring: 0 0% 15%; /* neutral-800 */
 
    --input-border: 0 0% 0%; /* black */
  }
 
  .dark {
    --main: 0 0% 4%; /* neutral-950 */
    --main-text: 0 0% 96%; /* neutral-100 */
    --main-border: 0 0% 15%; /* neutral-800 */
 
    --surface: 0 0% 7%; /* neutral-925 */
    --surface-text: 0 0% 96%; /* neutral-100 */
 
    --muted: 0 0% 15%; /* neutral-800 */
    --muted-text: 0 0% 64%; /* neutral-400 */
 
    --accent: 0 0% 12%; /* neutral-850 */
    --accent-text: 0 0% 96%; /* neutral-100 */
 
    --primary: 29 100% 52%; /* orange-500 */
    --primary-text: 0 0% 100%; /* white */
 
    --secondary: 34 100% 82%; /* #FED7AA */
    --secondary-text: 29 93% 39%; /* orange-700 */
 
    --info: 216 76% 52%; /* blue-500 */
    --info-text: 207 70% 80%; /* blue-200 */
    --info-filled-text: 0 0% 100%; /* white */
 
    --danger: 0 72% 43%; /* red-500 */
    --danger-text: 0 79% 79%; /* red-200 */
    --danger-filled-text: 0 0% 100%; /* white */
 
    --warning: 45 92% 47%; /* yellow-500 */
    --warning-text: 45 94% 70%; /* yellow-200 */
    --warning-filled-text: 0 0% 0%; /* white */
 
    --success: 140 76% 38%; /* green-500 */
    --success-text: 140 71% 82%; /* green-200 */
    --success-filled-text: 0 0% 100%; /* white */
 
    --radius: 0.375rem;
 
    --ring: 0 0% 96%; /* neutral-100 */
 
    --input-border: 0 0% 96%; /* neutral-100 */
  }
 
  * {
    @apply border-main-border;
  }
 
  body {
    @apply bg-main text-main-text;
  }
}

/** @type {import('tailwindcss').Config} \*/
 
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        main: {
          DEFAULT: "hsl(var(--main) / <alpha-value>)",
          text: "hsl(var(--main-text) / <alpha-value>)",
          border: "hsl(var(--main-border) / <alpha-value>)",
        },
 
        surface: {
          DEFAULT: "hsl(var(--surface) / <alpha-value>)",
          text: "hsl(var(--surface-text) / <alpha-value>)",
        },
 
        muted: {
          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
          text: "hsl(var(--muted-text) / <alpha-value>)",
        },
 
        accent: {
          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
          text: "hsl(var(--accent-text) / <alpha-value>)",
        },
 
        primary: {
          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
          text: "hsl(var(--primary-text) / <alpha-value>)",
        },
 
        secondary: {
          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
          text: "hsl(var(--secondary-text) / <alpha-value>)",
        },
 
        info: {
          DEFAULT: "hsl(var(--info) / <alpha-value>)",
          text: "hsl(var(--info-text) / <alpha-value>)",
        },
 
        warning: {
          DEFAULT: "hsl(var(--warning) / <alpha-value>)",
          text: "hsl(var(--warning-text) / <alpha-value>)",
        },
 
        danger: {
          DEFAULT: "hsl(var(--danger) / <alpha-value>)",
          text: "hsl(var(--danger-text) / <alpha-value>)",
        },
 
        success: {
          DEFAULT: "hsl(var(--success) / <alpha-value>)",
          text: "hsl(var(--success-text) / <alpha-value>)",
        },
 
        "input-border": "hsl(var(--input-border) / <alpha-value>)",
        ring: "hsl(var(--ring) / <alpha-value>)",
      },
    },
  },
}