Skip to content
Nerden's Docs

Tailwind v4 Setup (Astro)

V3

Section titled “V3”

Install (Astro)

Section titled “Install (Astro)”
Terminal window
npm install tailwindcss @tailwindcss/vite

Install (Others)

Section titled “Install (Others)”
Terminal window
npm install tailwindcss @tailwindcss/postcss postcss

In your astro.config.mjs file add:

// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config
export default defineConfig({
    vite: {
        plugins: [tailwindcss()],
    },
});

Import Tailwind CSS

Section titled “Import Tailwind CSS”

Create a ./src/styles/global.css file and add an @import for Tailwind CSS.

Terminal window
mkdir -p src/styles && touch src/styles/global.css
mkdir -p src/layouts && touch src/layouts/Layout.astro
mkdir -p src/components && touch src/components/BlankComponent.astro

Import this file in the pages where you want Tailwind to apply. This is often done in a layout component so that Tailwind styles can be used on all pages sharing that layout:

---
import '../styles/global.css';
import '@fontsource-variable/inter';
---
@import '@fontsource-variable/inter';
@import 'tailwindcss';
@config '../../tailwind.config.mjs';


/* @plugin '@tailwindcss/typography'; */
/* @plugin '@tailwindcss/forms'; */


/* --------------------------------------------------------------- */
@import 'tailwindcss';
/* --------------------------------------------------------------- */


/* --------------------------------------------------------------- */
/* Imports */
/* --------------------------------------------------------------- */
/* Inter Font */
@import '@fontsource-variable/inter';
/* Preline UI */
@import '../../node_modules/preline/variants.css';
/* Flowbite */
/* @import 'flowbite/src/themes/default'; */


/* --------------------------------------------------------------- */
/* Plugins */
/* --------------------------------------------------------------- */
@plugin '@tailwindcss/forms';
@plugin 'flowbite/plugin';


/* --------------------------------------------------------------- */
/* Source */
/* --------------------------------------------------------------- */
@source '../../node_modules/flowbite';


/* --------------------------------------------------------------- */
/* Custom Variants */
/* --------------------------------------------------------------- */
@custom-variant dark (&:where(.dark, .dark *));


/* --------------------------------------------------------------- */
/* Font Face */
/* --------------------------------------------------------------- */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('@fontsource-variable/inter/files/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------- */
/* Nerden's Theme */
/* --------------------------------------------------------------- */
@theme {
    /* --------------------------------------------------------------- */
    /* Font family utilities */
    /* --------------------------------------------------------------- */


    --font-sans:
        'Inter Variable', 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto',
        'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-body:
        'Inter Variable', 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto',
        'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-mono:
        'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
    /* --------------------------------------------------------------- */
    /* Color utilities */
    /* --------------------------------------------------------------- */
    --color-*: initial;


    --color-red: oklch(0.64 0.21 25.33);
    --color-red-50: oklch(0.96 0.02 17.48);
    --color-red-100: oklch(0.91 0.04 17.89);
    --color-red-200: oklch(0.83 0.08 18.91);
    --color-red-300: oklch(0.76 0.13 20.43);
    --color-red-400: oklch(0.69 0.17 22.57);
    --color-red-500: oklch(0.64 0.21 25.33);
    --color-red-600: oklch(0.58 0.23 28.56);
    --color-red-700: oklch(0.47 0.18 28.31);
    --color-red-800: oklch(0.35 0.13 27.88);
    --color-red-900: oklch(0.22 0.08 26.68);
    --color-red-950: oklch(0.15 0.05 25.98);


    --color-orange: oklch(0.7 0.19 47.6);
    --color-orange-50: oklch(0.96 0.02 58.07);
    --color-orange-100: oklch(0.94 0.04 56.93);
    --color-orange-200: oklch(0.87 0.08 56.57);
    --color-orange-300: oklch(0.81 0.12 55.55);
    --color-orange-400: oklch(0.75 0.16 53.19);
    --color-orange-500: oklch(0.7 0.19 47.6);
    --color-orange-600: oklch(0.61 0.17 46.22);
    --color-orange-700: oklch(0.5 0.14 47.33);
    --color-orange-800: oklch(0.37 0.1 48.91);
    --color-orange-900: oklch(0.25 0.06 54.46);
    --color-orange-950: oklch(0.17 0.03 63.53);


    --color-amber: oklch(0.77 0.16 70.08);
    --color-amber-50: oklch(0.97 0.02 79.1);
    --color-amber-100: oklch(0.95 0.04 81.89);
    --color-amber-200: oklch(0.9 0.09 81.41);
    --color-amber-300: oklch(0.85 0.12 79.36);
    --color-amber-400: oklch(0.81 0.15 76.55);
    --color-amber-500: oklch(0.77 0.16 70.08);
    --color-amber-600: oklch(0.65 0.14 71.04);
    --color-amber-700: oklch(0.53 0.11 71.64);
    --color-amber-800: oklch(0.4 0.08 74.05);
    --color-amber-900: oklch(0.26 0.05 78.08);
    --color-amber-950: oklch(0.18 0.03 85.75);


    --color-yellow: oklch(0.8 0.16 86.05);
    --color-yellow-50: oklch(0.98 0.02 91.61);
    --color-yellow-100: oklch(0.96 0.05 91.32);
    --color-yellow-200: oklch(0.92 0.1 91.73);
    --color-yellow-300: oklch(0.88 0.14 90.98);
    --color-yellow-400: oklch(0.85 0.16 88.6);
    --color-yellow-500: oklch(0.8 0.16 86.05);
    --color-yellow-600: oklch(0.67 0.14 85.72);
    --color-yellow-700: oklch(0.55 0.11 85.73);
    --color-yellow-800: oklch(0.41 0.08 86.91);
    --color-yellow-900: oklch(0.27 0.05 89.27);
    --color-yellow-950: oklch(0.19 0.04 93.53);


    --color-lime: oklch(0.77 0.2 130.85);
    --color-lime-50: oklch(0.98 0.03 124.86);
    --color-lime-100: oklch(0.96 0.06 125.84);
    --color-lime-200: oklch(0.92 0.12 126.41);
    --color-lime-300: oklch(0.89 0.17 128.01);
    --color-lime-400: oklch(0.85 0.22 129.95);
    --color-lime-500: oklch(0.77 0.2 130.85);
    --color-lime-600: oklch(0.64 0.17 130.7);
    --color-lime-700: oklch(0.53 0.14 130.48);
    --color-lime-800: oklch(0.4 0.1 130.31);
    --color-lime-900: oklch(0.26 0.06 127.95);
    --color-lime-950: oklch(0.17 0.04 124.65);


    --color-green: oklch(0.72 0.19 149.58);
    --color-green-50: oklch(0.97 0.02 159.16);
    --color-green-100: oklch(0.94 0.05 157.78);
    --color-green-200: oklch(0.89 0.11 155.61);
    --color-green-300: oklch(0.84 0.15 153.84);
    --color-green-400: oklch(0.8 0.19 151.16);
    --color-green-500: oklch(0.72 0.19 149.58);
    --color-green-600: oklch(0.61 0.16 149.81);
    --color-green-700: oklch(0.49 0.13 150.19);
    --color-green-800: oklch(0.37 0.09 150.66);
    --color-green-900: oklch(0.24 0.05 152.56);
    --color-green-950: oklch(0.18 0.04 153.79);


    --color-emerald: oklch(0.7 0.15 162.48);
    --color-emerald-50: oklch(0.97 0.03 172.89);
    --color-emerald-100: oklch(0.95 0.06 172.7);
    --color-emerald-200: oklch(0.9 0.11 170.46);
    --color-emerald-300: oklch(0.86 0.15 167.24);
    --color-emerald-400: oklch(0.84 0.18 162.78);
    --color-emerald-500: oklch(0.7 0.15 162.48);
    --color-emerald-600: oklch(0.6 0.13 162.48);
    --color-emerald-700: oklch(0.49 0.1 162.73);
    --color-emerald-800: oklch(0.37 0.08 163.98);
    --color-emerald-900: oklch(0.24 0.05 165.91);
    --color-emerald-950: oklch(0.17 0.03 169.76);


    --color-teal: oklch(0.7 0.12 182.5);
    --color-teal-50: oklch(0.97 0.03 188.02);
    --color-teal-100: oklch(0.95 0.05 187.18);
    --color-teal-200: oklch(0.9 0.09 186.47);
    --color-teal-300: oklch(0.86 0.13 184.48);
    --color-teal-400: oklch(0.83 0.15 182.05);
    --color-teal-500: oklch(0.7 0.12 182.5);
    --color-teal-600: oklch(0.6 0.1 182.17);
    --color-teal-700: oklch(0.48 0.08 182.68);
    --color-teal-800: oklch(0.37 0.06 182.24);
    --color-teal-900: oklch(0.24 0.04 183.55);
    --color-teal-950: oklch(0.17 0.03 185.46);


    --color-cyan: oklch(0.71 0.13 215.22);
    --color-cyan-50: oklch(0.97 0.03 208.28);
    --color-cyan-100: oklch(0.94 0.05 207.72);
    --color-cyan-200: oklch(0.89 0.09 210.37);
    --color-cyan-300: oklch(0.85 0.12 211);
    --color-cyan-400: oklch(0.81 0.14 214.98);
    --color-cyan-500: oklch(0.71 0.13 215.22);
    --color-cyan-600: oklch(0.6 0.11 215.89);
    --color-cyan-700: oklch(0.5 0.09 215.34);
    --color-cyan-800: oklch(0.37 0.06 213.68);
    --color-cyan-900: oklch(0.25 0.04 213.21);
    --color-cyan-950: oklch(0.16 0.03 209.01);


    --color-sky: oklch(0.68 0.15 237.32);
    --color-sky-50: oklch(0.96 0.02 230.69);
    --color-sky-100: oklch(0.93 0.04 226.79);
    --color-sky-200: oklch(0.86 0.08 228.43);
    --color-sky-300: oklch(0.8 0.11 230.05);
    --color-sky-400: oklch(0.74 0.14 233.74);
    --color-sky-500: oklch(0.68 0.15 237.32);
    --color-sky-600: oklch(0.58 0.13 237.69);
    --color-sky-700: oklch(0.47 0.1 237.28);
    --color-sky-800: oklch(0.35 0.07 235.5);
    --color-sky-900: oklch(0.24 0.04 231.95);
    --color-sky-950: oklch(0.17 0.03 225.25);


    --color-blue: oklch(0.62 0.19 259.81);
    --color-blue-50: oklch(0.96 0.02 256.28);
    --color-blue-100: oklch(0.92 0.03 260.39);
    --color-blue-200: oklch(0.85 0.07 259.08);
    --color-blue-300: oklch(0.77 0.11 259.62);
    --color-blue-400: oklch(0.69 0.15 259.56);
    --color-blue-500: oklch(0.62 0.19 259.81);
    --color-blue-600: oklch(0.53 0.22 260.91);
    --color-blue-700: oklch(0.44 0.18 260.74);
    --color-blue-800: oklch(0.33 0.13 260.18);
    --color-blue-900: oklch(0.22 0.07 259.06);
    --color-blue-950: oklch(0.15 0.04 252.92);


    --color-indigo: oklch(0.59 0.2 277.12);
    --color-indigo-50: oklch(0.96 0.02 286.07);
    --color-indigo-100: oklch(0.91 0.04 284.02);
    --color-indigo-200: oklch(0.84 0.08 283.79);
    --color-indigo-300: oklch(0.75 0.12 282.03);
    --color-indigo-400: oklch(0.66 0.16 280.12);
    --color-indigo-500: oklch(0.59 0.2 277.12);
    --color-indigo-600: oklch(0.45 0.27 267.93);
    --color-indigo-700: oklch(0.37 0.24 266.41);
    --color-indigo-800: oklch(0.28 0.18 267.24);
    --color-indigo-900: oklch(0.18 0.1 269.56);
    --color-indigo-950: oklch(0.13 0.07 272.75);


    --color-violet: oklch(0.61 0.22 292.72);
    --color-violet-50: oklch(0.96 0.02 300.07);
    --color-violet-100: oklch(0.92 0.04 299.78);
    --color-violet-200: oklch(0.84 0.08 298.32);
    --color-violet-300: oklch(0.76 0.13 297.16);
    --color-violet-400: oklch(0.68 0.18 295.14);
    --color-violet-500: oklch(0.61 0.22 292.72);
    --color-violet-600: oklch(0.49 0.27 283.17);
    --color-violet-700: oklch(0.4 0.24 280.77);
    --color-violet-800: oklch(0.31 0.17 282.4);
    --color-violet-900: oklch(0.19 0.1 286.4);
    --color-violet-950: oklch(0.14 0.07 291.13);


    --color-purple: oklch(0.63 0.23 303.9);
    --color-purple-50: oklch(0.97 0.02 311.09);
    --color-purple-100: oklch(0.92 0.05 309.2);
    --color-purple-200: oklch(0.84 0.1 307.53);
    --color-purple-300: oklch(0.77 0.14 307.01);
    --color-purple-400: oklch(0.69 0.19 305.8);
    --color-purple-500: oklch(0.63 0.23 303.9);
    --color-purple-600: oklch(0.53 0.28 298.14);
    --color-purple-700: oklch(0.44 0.23 297.2);
    --color-purple-800: oklch(0.33 0.17 298.14);
    --color-purple-900: oklch(0.21 0.1 301.21);
    --color-purple-950: oklch(0.15 0.07 303.93);


    --color-fuchsia: oklch(0.67 0.26 322.15);
    --color-fuchsia-50: oklch(0.96 0.03 322.18);
    --color-fuchsia-100: oklch(0.92 0.06 321.44);
    --color-fuchsia-200: oklch(0.85 0.11 321.51);
    --color-fuchsia-300: oklch(0.78 0.17 322.37);
    --color-fuchsia-400: oklch(0.71 0.22 322.22);
    --color-fuchsia-500: oklch(0.67 0.26 322.15);
    --color-fuchsia-600: oklch(0.6 0.28 321.35);
    --color-fuchsia-700: oklch(0.49 0.22 321.18);
    --color-fuchsia-800: oklch(0.37 0.17 321.37);
    --color-fuchsia-900: oklch(0.23 0.1 321.73);
    --color-fuchsia-950: oklch(0.16 0.06 323.47);


    --color-pink: oklch(0.66 0.21 354.31);
    --color-pink-50: oklch(0.96 0.02 345.68);
    --color-pink-100: oklch(0.92 0.04 345.51);
    --color-pink-200: oklch(0.84 0.09 347.67);
    --color-pink-300: oklch(0.77 0.13 349.04);
    --color-pink-400: oklch(0.71 0.18 351.62);
    --color-pink-500: oklch(0.66 0.21 354.31);
    --color-pink-600: oklch(0.59 0.23 359.09);
    --color-pink-700: oklch(0.48 0.19 358.18);
    --color-pink-800: oklch(0.36 0.14 357.69);
    --color-pink-900: oklch(0.23 0.08 354.33);
    --color-pink-950: oklch(0.16 0.05 352.23);


    --color-rose: oklch(0.65 0.22 16.44);
    --color-rose-50: oklch(0.96 0.02 5.98);
    --color-rose-100: oklch(0.91 0.04 6.92);
    --color-rose-200: oklch(0.84 0.09 8.24);
    --color-rose-300: oklch(0.76 0.13 10.19);
    --color-rose-400: oklch(0.69 0.18 12.93);
    --color-rose-500: oklch(0.65 0.22 16.44);
    --color-rose-600: oklch(0.59 0.23 23.11);
    --color-rose-700: oklch(0.48 0.19 22.68);
    --color-rose-800: oklch(0.36 0.14 21.4);
    --color-rose-900: oklch(0.23 0.08 17.97);
    --color-rose-950: oklch(0.15 0.05 13.01);


    --color-slate: oklch(0.55 0.04 257.42);
    --color-slate-50: oklch(0.96 0 247.86);
    --color-slate-100: oklch(0.91 0.01 258.34);
    --color-slate-200: oklch(0.83 0.02 257.2);
    --color-slate-300: oklch(0.74 0.03 257.66);
    --color-slate-400: oklch(0.65 0.03 255.64);
    --color-slate-500: oklch(0.55 0.04 257.42);
    --color-slate-600: oklch(0.48 0.03 257.79);
    --color-slate-700: oklch(0.39 0.03 259.16);
    --color-slate-800: oklch(0.3 0.02 258.37);
    --color-slate-900: oklch(0.2 0.01 260.66);
    --color-slate-950: oklch(0.15 0.01 270.96);


    --color-gray: oklch(0.55 0.02 264.36);
    --color-gray-50: oklch(0.96 0 247.84);
    --color-gray-100: oklch(0.91 0 258.33);
    --color-gray-200: oklch(0.82 0.01 267.34);
    --color-gray-300: oklch(0.74 0.02 264.47);
    --color-gray-400: oklch(0.65 0.02 265.91);
    --color-gray-500: oklch(0.55 0.02 264.36);
    --color-gray-600: oklch(0.47 0.02 262.67);
    --color-gray-700: oklch(0.39 0.02 266.51);
    --color-gray-800: oklch(0.3 0.01 260.71);
    --color-gray-900: oklch(0.2 0.01 271.1);
    --color-gray-950: oklch(0.16 0 285.9);


    --color-zinc: oklch(0.55 0.01 285.94);
    --color-zinc-50: oklch(0.96 0 286.38);
    --color-zinc-100: oklch(0.91 0 286.35);
    --color-zinc-200: oklch(0.82 0.01 286.28);
    --color-zinc-300: oklch(0.74 0.01 286.15);
    --color-zinc-400: oklch(0.65 0.01 286.02);
    --color-zinc-500: oklch(0.55 0.01 285.94);
    --color-zinc-600: oklch(0.47 0.01 285.97);
    --color-zinc-700: oklch(0.39 0.01 286.01);
    --color-zinc-800: oklch(0.29 0.01 285.95);
    --color-zinc-900: oklch(0.2 0 286.04);
    --color-zinc-950: oklch(0.15 0 286.15);


    --color-neutral: oklch(0.56 0 0);
    --color-neutral-50: oklch(0.96 0 0);
    --color-neutral-100: oklch(0.92 0 0);
    --color-neutral-200: oklch(0.83 0 0);
    --color-neutral-300: oklch(0.74 0 0);
    --color-neutral-400: oklch(0.65 0 0);
    --color-neutral-500: oklch(0.56 0 0);
    --color-neutral-600: oklch(0.47 0 0);
    --color-neutral-700: oklch(0.39 0 0);
    --color-neutral-800: oklch(0.3 0 0);
    --color-neutral-900: oklch(0.2 0 0);
    --color-neutral-950: oklch(0.16 0 0);


    --color-stone: oklch(0.55 0.01 58.07);
    --color-stone-50: oklch(0.96 0 67.8);
    --color-stone-100: oklch(0.92 0 84.56);
    --color-stone-200: oklch(0.83 0.01 48.67);
    --color-stone-300: oklch(0.74 0.01 61.41);
    --color-stone-400: oklch(0.65 0.01 58.12);
    --color-stone-500: oklch(0.55 0.01 58.07);
    --color-stone-600: oklch(0.48 0.01 56.14);
    --color-stone-700: oklch(0.39 0.01 59.47);
    --color-stone-800: oklch(0.3 0.01 56.17);
    --color-stone-900: oklch(0.21 0 67.69);
    --color-stone-950: oklch(0.15 0 17.35);


    --color-secondary: oklch(0.84 0.16 84.43);
    --color-secondary-50: oklch(0.98 0.02 87.51);
    --color-secondary-100: oklch(0.96 0.04 89.89);
    --color-secondary-200: oklch(0.93 0.08 89.5);
    --color-secondary-300: oklch(0.89 0.12 87.87);
    --color-secondary-400: oklch(0.86 0.15 86.77);
    --color-secondary-500: oklch(0.84 0.16 84.43);
    --color-secondary-600: oklch(0.75 0.16 81.02);
    --color-secondary-700: oklch(0.61 0.13 81.53);
    --color-secondary-800: oklch(0.46 0.09 82.45);
    --color-secondary-900: oklch(0.29 0.06 86.33);
    --color-secondary-950: oklch(0.2 0.04 90.24);


    --color-primary: oklch(0.22 0 0);
    --color-primary-50: oklch(0.93 0 0);
    --color-primary-100: oklch(0.86 0 0);
    --color-primary-200: oklch(0.72 0 0);
    --color-primary-300: oklch(0.56 0 0);
    --color-primary-400: oklch(0.4 0 0);
    --color-primary-500: oklch(0.22 0 0);
    --color-primary-600: oklch(0.19 0 0);
    --color-primary-700: oklch(0.17 0 0);
    --color-primary-800: oklch(0.14 0 0);
    --color-primary-900: oklch(0.11 0 0);
    --color-primary-950: oklch(0.1 0 0);


    --color-success: oklch(0.48 0.13 150.15);
    --color-success-50: oklch(0.96 0.04 159.01);
    --color-success-100: oklch(0.93 0.08 157.4);
    --color-success-200: oklch(0.86 0.15 154.7);
    --color-success-300: oklch(0.81 0.21 150.59);
    --color-success-400: oklch(0.68 0.19 149.28);
    --color-success-500: oklch(0.48 0.13 150.15);
    --color-success-600: oklch(0.41 0.11 150.39);
    --color-success-700: oklch(0.34 0.09 150.76);
    --color-success-800: oklch(0.26 0.06 152.09);
    --color-success-900: oklch(0.18 0.04 154.17);
    --color-success-950: oklch(0.15 0.03 156.21);


    --color-danger: oklch(0.38 0.15 29.23);
    --color-danger-50: oklch(0.92 0.04 17.9);
    --color-danger-100: oklch(0.84 0.09 19.11);
    --color-danger-200: oklch(0.7 0.19 23.19);
    --color-danger-300: oklch(0.63 0.25 28.43);
    --color-danger-400: oklch(0.53 0.22 29.23);
    --color-danger-500: oklch(0.38 0.15 29.23);
    --color-danger-600: oklch(0.32 0.13 29.23);
    --color-danger-700: oklch(0.26 0.11 29.23);
    --color-danger-800: oklch(0.2 0.08 29.23);
    --color-danger-900: oklch(0.13 0.05 29.23);
    --color-danger-950: oklch(0.11 0.04 29.23);


    --color-warning: oklch(0.75 0.15 77.52);
    --color-warning-50: oklch(0.97 0.02 87.51);
    --color-warning-100: oklch(0.95 0.04 83.83);
    --color-warning-200: oklch(0.9 0.07 83.96);
    --color-warning-300: oklch(0.85 0.11 83.84);
    --color-warning-400: oklch(0.8 0.14 81.91);
    --color-warning-500: oklch(0.75 0.15 77.52);
    --color-warning-600: oklch(0.64 0.13 78.2);
    --color-warning-700: oklch(0.52 0.1 78.71);
    --color-warning-800: oklch(0.39 0.08 78.94);
    --color-warning-900: oklch(0.25 0.05 80.79);
    --color-warning-950: oklch(0.18 0.03 84.55);


    --color-info: oklch(0.72 0.1 222.06);
    --color-info-50: oklch(0.97 0.01 219.59);
    --color-info-100: oklch(0.95 0.02 219.69);
    --color-info-200: oklch(0.88 0.04 220.57);
    --color-info-300: oklch(0.83 0.06 220.88);
    --color-info-400: oklch(0.77 0.08 221.71);
    --color-info-500: oklch(0.72 0.1 222.06);
    --color-info-600: oklch(0.64 0.11 225);
    --color-info-700: oklch(0.52 0.08 224.14);
    --color-info-800: oklch(0.39 0.06 223.5);
    --color-info-900: oklch(0.26 0.04 222.85);
    --color-info-950: oklch(0.18 0.02 217.8);


    --color-light: oklch(0.98 0 247.84);
    --color-light-50: oklch(1 0 0);
    --color-light-100: oklch(1 0 0);
    --color-light-200: oklch(0.99 0 286.38);
    --color-light-300: oklch(0.99 0 286.38);
    --color-light-400: oklch(0.98 0 247.84);
    --color-light-500: oklch(0.98 0 247.84);
    --color-light-600: oklch(0.82 0.02 248.07);
    --color-light-700: oklch(0.66 0.04 249.69);
    --color-light-800: oklch(0.49 0.04 249.96);
    --color-light-900: oklch(0.32 0.02 248.54);
    --color-light-950: oklch(0.21 0.01 243.56);


    --color-dark: oklch(0.28 0.03 256.85);
    --color-dark-50: oklch(0.93 0.01 252.81);
    --color-dark-100: oklch(0.86 0.02 256.74);
    --color-dark-200: oklch(0.72 0.05 255.96);
    --color-dark-300: oklch(0.57 0.07 256.35);
    --color-dark-400: oklch(0.44 0.05 256.86);
    --color-dark-500: oklch(0.28 0.03 256.85);
    --color-dark-600: oklch(0.25 0.03 258.33);
    --color-dark-700: oklch(0.21 0.02 258.34);
    --color-dark-800: oklch(0.18 0.01 258.36);
    --color-dark-900: oklch(0.13 0.01 268.54);
    --color-dark-950: oklch(0.11 0.01 261);


    --color-black: #000;
    --color-black-50: oklch(0.92 0 0);
    --color-black-100: oklch(0.85 0 0);
    --color-black-200: oklch(0.68 0 0);
    --color-black-300: oklch(0.51 0 0);
    --color-black-400: oklch(0.32 0 0);
    --color-black-500: oklch(0 0 0);
    --color-black-600: oklch(0 0 0);
    --color-black-700: oklch(0 0 0);
    --color-black-800: oklch(0 0 0);
    --color-black-900: oklch(0 0 0);
    --color-black-950: oklch(0 0 0);


    --color-white: #fff;
    --color-white-50: oklch(1 0 0);
    --color-white-100: oklch(1 0 0);
    --color-white-200: oklch(1 0 0);
    --color-white-300: oklch(1 0 0);
    --color-white-400: oklch(1 0 0);
    --color-white-500: oklch(1 0 0);
    --color-white-600: oklch(0.85 0 0);
    --color-white-700: oklch(0.68 0 0);
    --color-white-800: oklch(0.51 0 0);
    --color-white-900: oklch(0.32 0 0);
    --color-white-950: oklch(0.22 0 0);


    --color-blue-gray: oklch(0.57 0.04 229.02);
    --color-blue-gray-50: oklch(0.96 0 236.5);
    --color-blue-gray-100: oklch(0.92 0.01 225.09);
    --color-blue-gray-200: oklch(0.83 0.02 230.96);
    --color-blue-gray-300: oklch(0.75 0.03 229.26);
    --color-blue-gray-400: oklch(0.66 0.04 228.64);
    --color-blue-gray-500: oklch(0.57 0.04 229.02);
    --color-blue-gray-600: oklch(0.49 0.03 231.01);
    --color-blue-gray-700: oklch(0.4 0.03 226.86);
    --color-blue-gray-800: oklch(0.31 0.02 227.26);
    --color-blue-gray-900: oklch(0.21 0.01 234.29);
    --color-blue-gray-950: oklch(0.16 0.01 214.54);


    --color-brown: oklch(0.48 0.05 40.69);
    --color-brown-50: oklch(0.95 0.01 39.46);
    --color-brown-100: oklch(0.91 0.01 41.19);
    --color-brown-200: oklch(0.8 0.03 42.62);
    --color-brown-300: oklch(0.7 0.05 39.25);
    --color-brown-400: oklch(0.59 0.07 40.32);
    --color-brown-500: oklch(0.48 0.05 40.69);
    --color-brown-600: oklch(0.41 0.04 39.83);
    --color-brown-700: oklch(0.35 0.03 40.85);
    --color-brown-800: oklch(0.27 0.02 40.53);
    --color-brown-900: oklch(0.19 0.01 41.53);
    --color-brown-950: oklch(0.14 0.01 35.75);


    --color-deep-orange: oklch(0.68 0.21 36.53);
    --color-deep-orange-50: oklch(0.96 0.02 34.3);
    --color-deep-orange-100: oklch(0.92 0.04 38.19);
    --color-deep-orange-200: oklch(0.85 0.08 38.38);
    --color-deep-orange-300: oklch(0.78 0.13 37.69);
    --color-deep-orange-400: oklch(0.72 0.18 37.3);
    --color-deep-orange-500: oklch(0.68 0.21 36.53);
    --color-deep-orange-600: oklch(0.6 0.22 34.03);
    --color-deep-orange-700: oklch(0.49 0.17 34.47);
    --color-deep-orange-800: oklch(0.37 0.13 35.63);
    --color-deep-orange-900: oklch(0.23 0.07 40.01);
    --color-deep-orange-950: oklch(0.17 0.05 46.01);


    --color-light-green: oklch(0.75 0.16 130.5);
    --color-light-green-50: oklch(0.97 0.02 127.14);
    --color-light-green-100: oklch(0.95 0.03 128);
    --color-light-green-200: oklch(0.9 0.07 128.2);
    --color-light-green-300: oklch(0.85 0.1 128.62);
    --color-light-green-400: oklch(0.8 0.14 129.68);
    --color-light-green-500: oklch(0.75 0.16 130.5);
    --color-light-green-600: oklch(0.65 0.15 130.85);
    --color-light-green-700: oklch(0.54 0.12 131.12);
    --color-light-green-800: oklch(0.4 0.08 130.68);
    --color-light-green-900: oklch(0.27 0.05 129.91);
    --color-light-green-950: oklch(0.18 0.03 128.42);


    --color-light-blue: oklch(0.7 0.16 238.99);
    --color-light-blue-50: oklch(0.97 0.02 227.52);
    --color-light-blue-100: oklch(0.93 0.04 226.28);
    --color-light-blue-200: oklch(0.86 0.09 228.5);
    --color-light-blue-300: oklch(0.8 0.12 231.04);
    --color-light-blue-400: oklch(0.75 0.15 234.24);
    --color-light-blue-500: oklch(0.7 0.16 238.99);
    --color-light-blue-600: oklch(0.59 0.13 239.4);
    --color-light-blue-700: oklch(0.48 0.11 238.67);
    --color-light-blue-800: oklch(0.36 0.08 236.74);
    --color-light-blue-900: oklch(0.24 0.05 231.77);
    --color-light-blue-950: oklch(0.17 0.03 226.68);


    --color-deep-purple: oklch(0.47 0.19 294.78);
    --color-deep-purple-50: oklch(0.95 0.02 300.06);
    --color-deep-purple-100: oklch(0.89 0.04 302.2);
    --color-deep-purple-200: oklch(0.79 0.08 301.23);
    --color-deep-purple-300: oklch(0.67 0.13 299.82);
    --color-deep-purple-400: oklch(0.57 0.17 297.97);
    --color-deep-purple-500: oklch(0.47 0.19 294.78);
    --color-deep-purple-600: oklch(0.41 0.16 295.13);
    --color-deep-purple-700: oklch(0.33 0.12 296.54);
    --color-deep-purple-800: oklch(0.26 0.09 296.82);
    --color-deep-purple-900: oklch(0.18 0.05 298.64);
    --color-deep-purple-950: oklch(0.14 0.03 301.61);


    --color-body: oklch(0.43 0 0);
    --color-body-50: oklch(0.95 0 0);
    --color-body-100: oklch(0.89 0 0);
    --color-body-200: oklch(0.78 0 0);
    --color-body-300: oklch(0.67 0 0);
    --color-body-400: oklch(0.56 0 0);
    --color-body-500: oklch(0.43 0 0);
    --color-body-600: oklch(0.37 0 0);
    --color-body-700: oklch(0.31 0 0);
    --color-body-800: oklch(0.24 0 0);
    --color-body-900: oklch(0.17 0 0);
    --color-body-950: oklch(0.13 0 0);


    --color-body-dark: oklch(0.31 0 0);
    --color-body-dark-50: oklch(0.94 0 0);
    --color-body-dark-100: oklch(0.88 0 0);
    --color-body-dark-200: oklch(0.75 0 0);
    --color-body-dark-300: oklch(0.61 0 0);
    --color-body-dark-400: oklch(0.46 0 0);
    --color-body-dark-500: oklch(0.31 0 0);
    --color-body-dark-600: oklch(0.27 0 0);
    --color-body-dark-700: oklch(0.23 0 0);
    --color-body-dark-800: oklch(0.19 0 0);
    --color-body-dark-900: oklch(0.14 0 0);
    --color-body-dark-950: oklch(0.11 0 0);


    --color-disabled: oklch(0.71 0.02 261.32);
    --color-disabled-50: oklch(0.97 0 247.84);
    --color-disabled-100: oklch(0.95 0 247.86);
    --color-disabled-200: oklch(0.89 0.01 268.54);
    --color-disabled-300: oklch(0.83 0.01 261.79);
    --color-disabled-400: oklch(0.77 0.01 258.35);
    --color-disabled-500: oklch(0.71 0.02 261.32);
    --color-disabled-600: oklch(0.6 0.03 263.24);
    --color-disabled-700: oklch(0.49 0.02 260.14);
    --color-disabled-800: oklch(0.37 0.02 262.28);
    --color-disabled-900: oklch(0.24 0.01 268.27);
    --color-disabled-950: oklch(0.17 0 264.45);


    --color-dark-gray: oklch(0.32 0.03 253.94);
    --color-dark-gray-50: oklch(0.93 0.01 252.81);
    --color-dark-gray-100: oklch(0.87 0.02 252.89);
    --color-dark-gray-200: oklch(0.73 0.04 254.1);
    --color-dark-gray-300: oklch(0.6 0.06 254.14);
    --color-dark-gray-400: oklch(0.47 0.05 253.73);
    --color-dark-gray-500: oklch(0.32 0.03 253.94);
    --color-dark-gray-600: oklch(0.28 0.03 255.18);
    --color-dark-gray-700: oklch(0.24 0.02 254.25);
    --color-dark-gray-800: oklch(0.19 0.01 253.19);
    --color-dark-gray-900: oklch(0.14 0.01 245.72);
    --color-dark-gray-950: oklch(0.11 0 245);


    --color-light-gray: oklch(0.89 0.02 250.86);
    --color-light-gray-50: oklch(0.99 0 286.38);
    --color-light-gray-100: oklch(0.98 0 247.86);
    --color-light-gray-200: oklch(0.96 0.01 255.48);
    --color-light-gray-300: oklch(0.93 0.01 252.81);
    --color-light-gray-400: oklch(0.91 0.01 254.61);
    --color-light-gray-500: oklch(0.89 0.02 250.86);
    --color-light-gray-600: oklch(0.75 0.04 250.75);
    --color-light-gray-700: oklch(0.6 0.07 252.61);
    --color-light-gray-800: oklch(0.45 0.05 251.99);
    --color-light-gray-900: oklch(0.28 0.03 248.83);
    --color-light-gray-950: oklch(0.2 0.02 248.58);


    --color-muted: oklch(0.46 0.02 266.12);
    --color-muted-50: oklch(0.95 0 264.54);
    --color-muted-100: oklch(0.9 0.01 264.53);
    --color-muted-200: oklch(0.79 0.01 261.79);
    --color-muted-300: oklch(0.69 0.02 267.72);
    --color-muted-400: oklch(0.58 0.02 265.64);
    --color-muted-500: oklch(0.46 0.02 266.12);
    --color-muted-600: oklch(0.4 0.01 264.4);
    --color-muted-700: oklch(0.33 0.01 267.15);
    --color-muted-800: oklch(0.26 0.01 264.42);
    --color-muted-900: oklch(0.18 0 264.46);
    --color-muted-950: oklch(0.14 0 247.09);


    --color-primary-accent: oklch(0.39 0 0);
    --color-primary-accent-50: oklch(0.95 0 0);
    --color-primary-accent-100: oklch(0.89 0 0);
    --color-primary-accent-200: oklch(0.77 0 0);
    --color-primary-accent-300: oklch(0.65 0 0);
    --color-primary-accent-400: oklch(0.52 0 0);
    --color-primary-accent-500: oklch(0.39 0 0);
    --color-primary-accent-600: oklch(0.33 0 0);
    --color-primary-accent-700: oklch(0.28 0 0);
    --color-primary-accent-800: oklch(0.23 0 0);
    --color-primary-accent-900: oklch(0.16 0 0);
    --color-primary-accent-950: oklch(0.13 0 0);


    --color-surface: oklch(0.43 0 0);
    --color-surface-50: oklch(0.95 0 0);
    --color-surface-100: oklch(0.89 0 0);
    --color-surface-200: oklch(0.78 0 0);
    --color-surface-300: oklch(0.67 0 0);
    --color-surface-400: oklch(0.56 0 0);
    --color-surface-500: oklch(0.43 0 0);
    --color-surface-600: oklch(0.37 0 0);
    --color-surface-700: oklch(0.31 0 0);
    --color-surface-800: oklch(0.24 0 0);
    --color-surface-900: oklch(0.17 0 0);
    --color-surface-950: oklch(0.13 0 0);


    --color-tertiary: oklch(0.72 0.02 261.33);
    --color-tertiary-50: oklch(0.98 0 286.38);
    --color-tertiary-100: oklch(0.95 0 247.86);
    --color-tertiary-200: oklch(0.89 0.01 260.73);
    --color-tertiary-300: oklch(0.84 0.01 256.7);
    --color-tertiary-400: oklch(0.78 0.02 264.48);
    --color-tertiary-500: oklch(0.72 0.02 261.33);
    --color-tertiary-600: oklch(0.61 0.03 259.81);
    --color-tertiary-700: oklch(0.5 0.02 261.7);
    --color-tertiary-800: oklch(0.37 0.02 264.32);
    --color-tertiary-900: oklch(0.24 0.01 268.27);
    --color-tertiary-950: oklch(0.18 0.01 271.04);


    --color-error: oklch(0.38 0.15 29.23);
    --color-error-50: oklch(0.92 0.04 17.9);
    --color-error-100: oklch(0.84 0.09 19.11);
    --color-error-200: oklch(0.7 0.19 23.19);
    --color-error-300: oklch(0.63 0.25 28.43);
    --color-error-400: oklch(0.53 0.22 29.23);
    --color-error-500: oklch(0.38 0.15 29.23);
    --color-error-600: oklch(0.32 0.13 29.23);
    --color-error-700: oklch(0.26 0.11 29.23);
    --color-error-800: oklch(0.2 0.08 29.23);
    --color-error-900: oklch(0.13 0.05 29.23);
    --color-error-950: oklch(0.11 0.04 29.23);


    --color-nerden-dark: oklch(0.2 0 0);
    --color-nerden-dark-50: oklch(0.93 0 0);
    --color-nerden-dark-100: oklch(0.86 0 0);
    --color-nerden-dark-200: oklch(0.71 0 0);
    --color-nerden-dark-300: oklch(0.56 0 0);
    --color-nerden-dark-400: oklch(0.39 0 0);
    --color-nerden-dark-500: oklch(0.2 0 0);
    --color-nerden-dark-600: oklch(0.18 0 0);
    --color-nerden-dark-700: oklch(0.16 0 0);
    --color-nerden-dark-800: oklch(0.13 0 0);
    --color-nerden-dark-900: oklch(0.11 0 0);
    --color-nerden-dark-950: oklch(0.1 0 0);


    --color-natural: oklch(0.56 0 0);
    --color-natural-50: oklch(0.96 0 0);
    --color-natural-100: oklch(0.92 0 0);
    --color-natural-200: oklch(0.83 0 0);
    --color-natural-300: oklch(0.74 0 0);
    --color-natural-400: oklch(0.65 0 0);
    --color-natural-500: oklch(0.56 0 0);
    --color-natural-600: oklch(0.47 0 0);
    --color-natural-700: oklch(0.39 0 0);
    --color-natural-800: oklch(0.3 0 0);
    --color-natural-900: oklch(0.2 0 0);
    --color-natural-950: oklch(0.16 0 0);


    --color-grey: oklch(0.55 0.02 264.36);
    --color-grey-50: oklch(0.96 0 247.84);
    --color-grey-100: oklch(0.91 0 258.33);
    --color-grey-200: oklch(0.82 0.01 267.34);
    --color-grey-300: oklch(0.74 0.02 264.47);
    --color-grey-400: oklch(0.65 0.02 265.91);
    --color-grey-500: oklch(0.55 0.02 264.36);
    --color-grey-600: oklch(0.47 0.02 262.67);
    --color-grey-700: oklch(0.39 0.02 266.51);
    --color-grey-800: oklch(0.3 0.01 260.71);
    --color-grey-900: oklch(0.2 0.01 271.1);
    --color-grey-950: oklch(0.16 0 285.9);


    --color-accent: oklch(0.84 0.16 84.43);
    --color-accent-50: oklch(0.98 0.02 87.51);
    --color-accent-100: oklch(0.96 0.04 89.89);
    --color-accent-200: oklch(0.93 0.08 89.5);
    --color-accent-300: oklch(0.89 0.12 87.87);
    --color-accent-400: oklch(0.86 0.15 86.77);
    --color-accent-500: oklch(0.84 0.16 84.43);
    --color-accent-600: oklch(0.75 0.16 81.02);
    --color-accent-700: oklch(0.61 0.13 81.53);
    --color-accent-800: oklch(0.46 0.09 82.45);
    --color-accent-900: oklch(0.29 0.06 86.33);
    --color-accent-950: oklch(0.2 0.04 90.24);


    --color-text-secondary: oklch(0.43 0 0);
    --color-text-secondary-50: oklch(0.95 0 0);
    --color-text-secondary-100: oklch(0.89 0 0);
    --color-text-secondary-200: oklch(0.78 0 0);
    --color-text-secondary-300: oklch(0.67 0 0);
    --color-text-secondary-400: oklch(0.56 0 0);
    --color-text-secondary-500: oklch(0.43 0 0);
    --color-text-secondary-600: oklch(0.37 0 0);
    --color-text-secondary-700: oklch(0.31 0 0);
    --color-text-secondary-800: oklch(0.24 0 0);
    --color-text-secondary-900: oklch(0.17 0 0);
    --color-text-secondary-950: oklch(0.13 0 0);


    --color-background: oklch(0.98 0 247.84);
    --color-background-50: oklch(1 0 0);
    --color-background-100: oklch(1 0 0);
    --color-background-200: oklch(0.99 0 286.38);
    --color-background-300: oklch(0.99 0 286.38);
    --color-background-400: oklch(0.98 0 247.84);
    --color-background-500: oklch(0.98 0 247.84);
    --color-background-600: oklch(0.82 0.02 248.07);
    --color-background-700: oklch(0.66 0.04 249.69);
    --color-background-800: oklch(0.49 0.04 249.96);
    --color-background-900: oklch(0.32 0.02 248.54);
    --color-background-950: oklch(0.21 0.01 243.56);


    --nerdenColor-black: oklch(0 0 0);
    --nerdenColor-black-100: oklch(0.85 0 0);
    --nerdenColor-black-300: oklch(0.51 0 0);
    --nerdenColor-blue-gray-100: oklch(0.92 0.01 225.09);
    --nerdenColor-blue-gray-400: oklch(0.66 0.04 228.64);
    --nerdenColor-blue-gray-50: oklch(0.96 0 236.5);
    --nerdenColor-blue-gray-700: oklch(0.4 0.03 226.86);
    --nerdenColor-body-500: oklch(0.3 0.01 260.71);
    --nerdenColor-border-containerGlobal-base: oklch(0.93 0.01 264.53);
    --nerdenColor-danger: oklch(0.38 0.15 29.23);
    --nerdenColor-danger-700: oklch(0.26 0.11 29.23);
    --nerdenColor-dark: oklch(0.28 0.03 256.85);
    --nerdenColor-dark-100: oklch(0.86 0.02 256.74);
    --nerdenColor-disabled-200: oklch(0.89 0.01 268.54);
    --nerdenColor-errorLight: oklch(0.92 0.04 17.9);


    --nerdenColor-gray-50: oklch(0.96 0 247.84);
    --nerdenColor-gray-100: oklch(0.91 0 258.33);
    --nerdenColor-gray-200: oklch(0.82 0.01 267.34);
    --nerdenColor-gray-300: oklch(0.74 0.02 264.47);
    --nerdenColor-gray-400: oklch(0.65 0.02 265.91);
    --nerdenColor-gray-500: oklch(0.55 0.02 264.36);
    --nerdenColor-gray-600: oklch(0.47 0.02 262.67);
    --nerdenColor-gray-700: oklch(0.39 0.02 266.51);
    --nerdenColor-gray-800: oklch(0.3 0.01 260.71);
    --nerdenColor-gray-900: oklch(0.2 0.01 271.1);
    --nerdenColor-gray-950: oklch(0.16 0 285.9);


    --nerdenColor-green-500: oklch(0.72 0.19 149.58);
    --nerdenColor-greyMedium: oklch(0.55 0.01 285.94);
    --nerdenColor-indigo-700: oklch(0.37 0.24 266.41);
    --nerdenColor-indigo-500: oklch(0.49 0.26 270.92);
    --nerdenColor-info: oklch(0.68 0.15 237.32);
    --nerdenColor-infoLight: oklch(0.96 0.02 230.69);
    --nerdenColor-light-200: oklch(0.99 0 0);
    --nerdenColor-light-500: oklch(0.99 0 0);
    --nerdenColor-light-700: oklch(0.67 0 0);
    --nerdenColor-light-gray: oklch(0.98 0 286.38);
    --nerdenColor-light-gray-500: oklch(0.89 0.02 250.86);
    --nerdenColor-muted-50: oklch(0.94 0 264.54);
    --nerdenColor-muted-100: oklch(0.9 0.01 264.53);
    --nerdenColor-muted-700: oklch(0.33 0.01 267.15);
    --nerdenColor-on-dark-100: oklch(0.99 0 0);
    --nerdenColor-on-light-100: oklch(0.87 0.02 252.89);
    --nerdenColor-on-secondary-200: oklch(0.73 0.01 262.37);
    --nerdenColor-on-secondary-400: oklch(0.45 0.02 258.37);
    --nerdenColor-orange-500: oklch(0.7 0.19 47.6);
    --nerdenColor-primary-100: oklch(0.86 0 0);
    --nerdenColor-primary-300: oklch(0.56 0 0);
    --nerdenColor-primary-600: oklch(0.19 0 0);
    --nerdenColor-primary-900: oklch(0.11 0 0);
    --nerdenColor-primary-950: oklch(0.1 0 0);
    --nerdenColor-primary-base: oklch(0.22 0 0);
    --nerdenColor-primaryDark: oklch(0.2 0 0);
    --nerdenColor-primaryDarker: oklch(0.17 0 0);
    --nerdenColor-secondary: oklch(0.84 0.16 84.43);
    --nerdenColor-secondary-dark: oklch(0.8 0.16 86.05);
    --nerdenColor-secondary-darker: oklch(0.65 0.14 71.04);
    --nerdenColor-secondary-light: oklch(0.88 0.15 91.61);
    --nerdenColor-slate-800: oklch(0.3 0.02 258.37);
    --nerdenColor-stone-100: oklch(0.92 0 84.56);
    --nerdenColor-success: oklch(0.48 0.13 150.15);
    --nerdenColor-successLight: oklch(0.94 0.05 157.78);
    --nerdenColor-tertiary-800: oklch(0.37 0.02 264.32);
    --nerdenColor-textBase: oklch(0.26 0.01 248.19);
    --nerdenColor-textLink--active: oklch(0.49 0.22 264.38);
    --nerdenColor-very-light-400: oklch(0.97 0 228.78);
    --nerdenColor-warning: oklch(0.75 0.15 77.52);
    --nerdenColor-white-base: oklch(1 0 0);
    --nerdenColor-yellow-50: oklch(0.98 0.02 91.61);
    --nerdenColor-zinc-200: oklch(0.82 0.01 286.28);
    --nerdenFocusTooltip-backgroundColor: oklch(0.37 0.03 259.73);
    --nerdenNeutral-800: oklch(0.3 0 0);


    /* --------------------------------------------------------------- */
    /* Spacing and sizing utilities */
    --spacing: 0.25rem;
    /* --------------------------------------------------------------- */


    /* --------------------------------------------------------------- */
    /* Responsive breakpoint variants */
    /* --------------------------------------------------------------- */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 600px;
    --breakpoint-lg: 768px;
    --breakpoint-xl: 1024px;
    --breakpoint-2xl: 1280px;
    --breakpoint-3xl: 1440px;
    --breakpoint-4xl: 1600px;
    --breakpoint-5xl: 1920px;


    /* --------------------------------------------------------------- */
    /* Container query variants */
    /* --------------------------------------------------------------- */
    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;


    /* --------------------------------------------------------------- */
    /* Font size utilities */
    /* --------------------------------------------------------------- */
    --text-xxs: 0.5rem;
    --text-xxs--line-height: calc(1 / 0.5);
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;


    /* --------------------------------------------------------------- */
    /* Font weight utilities */
    /* --------------------------------------------------------------- */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;


    /* --------------------------------------------------------------- */
    /* Letter spacing utilities */
    /* --------------------------------------------------------------- */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;


    /* --------------------------------------------------------------- */
    /* Line height utilities */
    /* --------------------------------------------------------------- */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;


    /* --------------------------------------------------------------- */
    /* Border radius utilities */
    /* --------------------------------------------------------------- */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;


    /* --------------------------------------------------------------- */
    /* Box shadow utilities */
    /* --------------------------------------------------------------- */
    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);


    /* --------------------------------------------------------------- */
    /* Inset box shadow utilities */
    /* --------------------------------------------------------------- */
    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);


    /* --------------------------------------------------------------- */
    /* Drop shadow filter utilities */
    /* --------------------------------------------------------------- */
    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);


    /* --------------------------------------------------------------- */
    /* Blur filter utilities */
    /* --------------------------------------------------------------- */
    --blur-2xs: 2px;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;


    /* --------------------------------------------------------------- */
    /* Perspective utilities */
    /* --------------------------------------------------------------- */
    --perspective-dramatic: 100px;
    --perspective-near: 300px;
    --perspective-normal: 500px;
    --perspective-midrange: 800px;
    --perspective-distant: 1200px;


    /* --------------------------------------------------------------- */
    /* Aspect ratio utilities */
    /* --------------------------------------------------------------- */
    --aspect-video: 16 / 9;
    --aspect-square: 1 / 1;


    /* --------------------------------------------------------------- */
    /* Transition timing function utilities */
    /* --------------------------------------------------------------- */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;


    /* --------------------------------------------------------------- */
    /* Animation utilities */
    /* --------------------------------------------------------------- */
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes ping {
        75%,
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }
    @keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }
    @keyframes bounce {
        0%,
        100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }


        50% {
            transform: none;
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
    }


    --default-ring-width: 3px;
    --default-ring-color: var(--color-primary-500);
}


@utility container {
    margin-inline: auto;
    padding-inline: 2rem;
}


@layer components {
    .btn-block {
        @apply block w-full rounded-lg px-6 py-3 text-center align-middle font-sans text-xs font-bold uppercase transition-all select-none;
    }


    .btn-primary {
        @apply rounded bg-[#1b1b1b] px-6 pt-2.5 pb-2 text-xs leading-normal font-medium uppercase shadow-[0_4px_9px_-4px_#1b1b1b] transition duration-150 ease-in-out hover:bg-[#0f0f0f] focus:bg-[#0f0f0f] focus:shadow-[0_8px_9px_-4px_rgba(27,27,27,0.3),0_4px_18px_0_rgba(27,27,27,0.2)] focus:ring-0 focus:outline-none active:bg-[#474747] active:shadow-[0_8px_9px_-4px_rgba(27,27,27,0.3),0_4px_18px_0_rgba(27,27,27,0.2)];
    }


    .btn-secondary {
        @apply rounded bg-[#fbbf24] px-6 pt-2.5 pb-2 text-xs leading-normal font-medium text-[#1b1b1b] uppercase shadow-[0_4px_9px_-4px_#d1d1d1] transition duration-150 ease-in-out hover:bg-[#aa7b03] hover:shadow-[0_8px_9px_-4px_rgb(170,123,3,0.3),0_4px_18px_0_rgba(170,123,3,0.2)] focus:bg-[#fccb50] focus:shadow-[0_8px_9px_-4px_rgba(170,123,3,0.3),0_4px_18px_0_rgba(170,123,3,0.2)] focus:ring-0 focus:outline-none active:bg-[#fccb50] active:shadow-[0_8px_9px_-4px_rgba(170,123,3,0.3),0_4px_18px_0_rgba(170,123,3,0.2)];
    }


    .btn-block:disabled {
        @apply pointer-events-none opacity-50 shadow-none;
    }


    .btn-block:hover {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    }


    .btn-block:focus,
    .btn-block:active {
        box-shadow: none;
        opacity: 0.85;
    }


    .btn {
        @apply rounded-lg px-6 py-3 text-center align-middle font-sans text-xs font-bold uppercase shadow-md shadow-primary-900/10 transition-all select-none;
    }


    .btn:hover {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    }


    .btn:focus,
    .btn:active {
        box-shadow: none;
        opacity: 0.85;
    }


    .btn:disabled {
        box-shadow: none;
        opacity: 0.5;
        pointer-events: none;
    }


    .btn-gradient {
        @apply rounded-lg bg-gradient-to-tr from-primary-900 to-primary-800 px-6 py-3 text-center align-middle font-sans text-xs font-bold uppercase shadow-md shadow-primary-900/10 transition-all select-none;
    }


    .btn-gradient:hover,
    .btn-gradient:focus {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    }


    .btn-gradient:active {
        opacity: 0.85;
    }


    .btn-gradient:disabled {
        box-shadow: none;
        opacity: 0.5;
        pointer-events: none;
    }


    .btn-outlined-primary,
    .btn-outline-light {
        @apply rounded-lg border border-primary-900 px-6 py-3 text-center align-middle font-sans text-xs font-bold text-primary-900 uppercase transition-all select-none;
    }


    .btn-outlined-primary:hover,
    .btn-outline-light:hover {
        opacity: 0.75;
    }


    .btn-outlined-primary:focus,
    .btn-outline-light:focus {
        outline: none;
        box-shadow: 0 0 0 3px theme('colors.primary.300'); /* Replacing focus:ring */
    }


    .btn-outlined-primary:active,
    .btn-outline-light:active {
        opacity: 0.85;
    }


    .btn-outlined-primary:disabled,
    .btn-outline-light:disabled {
        box-shadow: none;
        opacity: 0.5;
        pointer-events: none;
    }


    .form-label {
        @apply pointer-events-none absolute left-0 flex h-full w-full truncate !overflow-visible text-[11px] leading-tight font-normal text-primary-500 transition-all select-none peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-primary-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-primary-900;
    }


    .form-label::before,
    .form-label::after {
        content: ' ';
        display: block;
        box-sizing: border-box;
        width: 10px;
        height: 6px;
        margin-top: 6.5px;
        border-top-width: 1px;
        transition: all;
    }


    .form-label::before {
        margin-right: 4px;
        border-left-width: 1px;
        border-top-left-radius: 4px;
        border-color: theme('colors.primary.200');
    }


    .form-label::after {
        margin-left: 4px;
        border-right-width: 1px;
        border-top-right-radius: 4px;
        border-color: theme('colors.primary.200');
    }


    .peer:focus ~ .form-label::before,
    .peer:focus ~ .form-label::after {
        border-color: theme('colors.primary.900');
        border-top-width: 2px;
        border-left-width: 2px;
        border-right-width: 2px;
    }


    .peer-disabled ~ .form-label {
        color: transparent;
    }


    .peer-disabled:placeholder-shown ~ .form-label {
        color: theme('colors.primary.500');
    }


    .peer-disabled ~ .form-label::before,
    .peer-disabled ~ .form-label::after {
        border-color: transparent;
    }


    .btn-primary {
        @apply ml-2 rounded-md border border-transparent bg-primary-800 px-4 py-2 text-center text-sm shadow-md transition-all;
    }


    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: theme('colors.primary.700');
        box-shadow: none;
    }


    .btn-primary:disabled {
        box-shadow: none;
        opacity: 0.5;
        pointer-events: none;
    }


    .btn-link {
        @apply rounded-md border border-transparent px-4 py-2 text-center text-sm text-slate-600 transition-all;
    }


    .btn-link:hover,
    .btn-link:focus,
    .btn-link:active {
        background-color: theme('colors.slate.100');
    }


    .btn-link:disabled {
        box-shadow: none;
        opacity: 0.5;
        pointer-events: none;
    }


    .btn-success {
        @apply rounded bg-[#0e7235] px-6 pt-2.5 pb-2 text-xs leading-normal font-medium uppercase transition duration-150 ease-in-out;
    }


    .btn-success:hover,
    .btn-success:focus {
        background-color: #139c49;
        box-shadow:
            0 8px 9px -4px rgba(20, 164, 77, 0.3),
            0 4px 18px 0 rgba(20, 164, 77, 0.2);
    }


    .btn-success:active {
        background-color: theme('colors.success.400');
        box-shadow:
            0 8px 9px -4px rgba(20, 164, 77, 0.3),
            0 4px 18px 0 rgba(20, 164, 77, 0.2);
    }
}


@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-primary-200, currentColor);
    }


    input::placeholder,
    textarea::placeholder {
        color: var(--color-primary-400);
    }


    button:not(:disabled),
    [role='button']:not(:disabled) {
        cursor: pointer;
    }


    dialog {
        margin: auto;
    }
}

Create a JS Config

Section titled “Create a JS Config”
Terminal window
touch tailwind.config.mjs
// import colors from 'tailwindcss/colors';
// import typography from '@tailwindcss/typography';


/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    safelist: [
        // In Markdown (README…)
        'justify-evenly',
        'overflow-hidden',
        'rounded-md',


        // From the Hugo Dashboard
        'w-64',
        'w-1/2',
        'rounded-l-lg',
        'rounded-r-lg',
        'bg-gray-200',
        'grid-cols-4',
        'grid-cols-7',
        'h-6',
        'leading-6',
        'h-9',
        'leading-9',
        'shadow-lg',
        'bg-opacity-50',
        'dark:bg-opacity-80',


        // For Astro one
        'grid',
    ],
    theme: {
        accentColor: ({ theme }) => ({
            ...theme('colors'),
            auto: 'auto',
        }),
        animation: {
            none: 'none',
            spin: 'spin 1s linear infinite',
            ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
            pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            bounce: 'bounce 1s infinite',
        },
        aria: {
            busy: 'busy="true"',
            checked: 'checked="true"',
            disabled: 'disabled="true"',
            expanded: 'expanded="true"',
            hidden: 'hidden="true"',
            pressed: 'pressed="true"',
            readonly: 'readonly="true"',
            required: 'required="true"',
            selected: 'selected="true"',
        },
        aspectRatio: {
            auto: 'auto',
            square: '1 / 1',
            video: '16 / 9',
        },
        backdropBlur: ({ theme }) => theme('blur'),
        backdropBrightness: ({ theme }) => theme('brightness'),
        backdropContrast: ({ theme }) => theme('contrast'),
        backdropGrayscale: ({ theme }) => theme('grayscale'),
        backdropHueRotate: ({ theme }) => theme('hueRotate'),
        backdropInvert: ({ theme }) => theme('invert'),
        backdropOpacity: ({ theme }) => theme('opacity'),
        backdropSaturate: ({ theme }) => theme('saturate'),
        backdropSepia: ({ theme }) => theme('sepia'),
        backgroundColor: ({ theme }) => theme('colors'),
        backgroundImage: {
            none: 'none',
            'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
            'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
            'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
            'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
            'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
            'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
            'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
            'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
        },
        backgroundOpacity: ({ theme }) => theme('opacity'),
        backgroundPosition: {
            bottom: 'bottom',
            center: 'center',
            left: 'left',
            'left-bottom': 'left bottom',
            'left-top': 'left top',
            right: 'right',
            'right-bottom': 'right bottom',
            'right-top': 'right top',
            top: 'top',
        },
        backgroundSize: {
            auto: 'auto',
            cover: 'cover',
            contain: 'contain',
        },
        blur: {
            0: '0',
            none: '',
            sm: '4px',
            DEFAULT: '8px',
            md: '12px',
            lg: '16px',
            xl: '24px',
            '2xl': '40px',
            '3xl': '64px',
        },
        borderColor: ({ theme }) => ({
            ...theme('colors'),
            DEFAULT: theme('colors.gray.200', 'currentColor'),
        }),
        borderOpacity: ({ theme }) => theme('opacity'),
        borderRadius: {
            none: '0px',
            sm: '0.125rem',
            DEFAULT: '0.25rem',
            md: '0.375rem',
            lg: '0.5rem',
            xl: '0.75rem',
            '2xl': '1rem',
            '3xl': '1.5rem',
            full: '9999px',
        },
        borderSpacing: ({ theme }) => ({
            ...theme('spacing'),
        }),
        borderWidth: {
            DEFAULT: '1px',
            0: '0px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        boxShadow: {
            sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
            DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
            md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
            lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
            xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
            '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
            inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
            none: 'none',
        },
        boxShadowColor: ({ theme }) => theme('colors'),
        brightness: {
            0: '0',
            50: '.5',
            75: '.75',
            90: '.9',
            95: '.95',
            100: '1',
            105: '1.05',
            110: '1.1',
            125: '1.25',
            150: '1.5',
            200: '2',
        },
        caretColor: ({ theme }) => theme('colors'),
        colors: ({ colors }) => ({
            inherit: colors.inherit,
            current: colors.current,
            transparent: 'transparent',
            text: {
                DEFAULT: '#151515',
                50: '#E8E8E8',
                100: '#D1D1D1',
                200: '#A1A1A1',
                300: '#737373',
                400: '#454545',
                500: '#151515',
                600: '#121212',
                700: '#0D0D0D',
                800: '#080808',
                900: '#050505',
                950: '#030303',
            },
            'nerden-dark': {
                DEFAULT: '#151515',
                50: '#E8E8E8',
                100: '#D1D1D1',
                200: '#A1A1A1',
                300: '#737373',
                400: '#454545',
                500: '#151515',
                600: '#121212',
                700: '#0D0D0D',
                800: '#080808',
                900: '#050505',
                950: '#030303',
            },
            black: {
                DEFAULT: '#000000',
                50: '#e6e6e6',
                100: '#cccccc',
                200: '#999999',
                300: '#666666',
                400: '#333333',
                500: '#000000',
                600: '#000000',
                700: '#000000',
                800: '#000000',
                900: '#000000',
                950: '#000000',
            },
            white: '#ffffff',
            slate: {
                DEFAULT: '#64748b',
                50: '#f0f2f4',
                100: '#dee2e8',
                200: '#c1c8d2',
                300: '#a0abbb',
                400: '#8291a5',
                500: '#64748b',
                600: '#515e71',
                700: '#3c4553',
                800: '#292f38',
                900: '#13161b',
                950: '#0b0c0f',
            },
            gray: {
                DEFAULT: '#6b7280',
                50: '#f1f2f3',
                100: '#e0e2e5',
                200: '#c2c5cc',
                300: '#a6abb5',
                400: '#888e9b',
                500: '#6b7280',
                600: '#565c67',
                700: '#41454e',
                800: '#2a2d32',
                900: '#151619',
                950: '#0c0c0e',
            },
            zinc: {
                DEFAULT: '#71717a',
                50: '#f2f2f3',
                100: '#e2e2e4',
                200: '#c5c5c9',
                300: '#aaaab1',
                400: '#8d8d96',
                500: '#71717a',
                600: '#5b5b62',
                700: '#45454a',
                800: '#2c2c30',
                900: '#161618',
                950: '#0c0c0d',
            },
            neutral: {
                DEFAULT: '#737373',
                50: '#f2f2f2',
                100: '#e3e3e3',
                200: '#c7c7c7',
                300: '#ababab',
                400: '#8f8f8f',
                500: '#737373',
                600: '#5c5c5c',
                700: '#454545',
                800: '#2e2e2e',
                900: '#171717',
                950: '#0d0d0d',
            },
            stone: {
                DEFAULT: '#78716c',
                50: '#f1f0ef',
                100: '#e4e3e1',
                200: '#cac6c4',
                300: '#afaaa6',
                400: '#958e89',
                500: '#78716c',
                600: '#615b57',
                700: '#484441',
                800: '#302d2b',
                900: '#181716',
                950: '#0b0a0a',
            },
            red: {
                DEFAULT: '#ef4444',
                50: '#fdecec',
                100: '#fcd9d9',
                200: '#f9b4b4',
                300: '#f58e8e',
                400: '#f26969',
                500: '#ef4444',
                600: '#e11313',
                700: '#a90f0f',
                800: '#710a0a',
                900: '#380505',
                950: '#1c0202',
            },
            orange: {
                DEFAULT: '#f97316',
                50: '#fef0e6',
                100: '#fee4d2',
                200: '#fdc7a1',
                300: '#fbac74',
                400: '#fa8f42',
                500: '#f97316',
                600: '#d15a05',
                700: '#9f4504',
                800: '#682d03',
                900: '#371801',
                950: '#190b01',
            },
            amber: {
                DEFAULT: '#f59e0b',
                50: '#fef5e7',
                100: '#fdecce',
                200: '#fbd99d',
                300: '#f9c56c',
                400: '#f7b23b',
                500: '#f59e0b',
                600: '#c47f08',
                700: '#935f06',
                800: '#624004',
                900: '#312002',
                950: '#181001',
            },
            yellow: {
                DEFAULT: '#eab308',
                50: '#fef8e6',
                100: '#fdf1ce',
                200: '#fbe297',
                300: '#fad566',
                400: '#f8c630',
                500: '#eab308',
                600: '#bb8e06',
                700: '#8f6c05',
                800: '#5e4703',
                900: '#312502',
                950: '#191301',
            },
            lime: {
                DEFAULT: '#84cc16',
                50: '#f2fce3',
                100: '#e7facc',
                200: '#d0f49a',
                300: '#b8ef67',
                400: '#9fe930',
                500: '#84cc16',
                600: '#68a111',
                700: '#507c0d',
                800: '#355309',
                900: '#1b2904',
                950: '#0c1202',
            },
            green: {
                DEFAULT: '#22c55e',
                50: '#e9fbf0',
                100: '#cff7de',
                200: '#9fefbc',
                300: '#6fe69b',
                400: '#40de7a',
                500: '#22c55e',
                600: '#1b9d4b',
                700: '#147538',
                800: '#0d4e25',
                900: '#072713',
                950: '#04160a',
            },
            emerald: {
                DEFAULT: '#10b981',
                50: '#e3fdf4',
                100: '#c7fae9',
                200: '#8ef5d3',
                300: '#56f0bd',
                400: '#1eeca7',
                500: '#10b981',
                600: '#0d9668',
                700: '#0a714e',
                800: '#064b34',
                900: '#03261a',
                950: '#02130d',
            },
            teal: {
                DEFAULT: '#14b8a6',
                50: '#e3fcf9',
                100: '#c8f9f3',
                200: '#91f3e8',
                300: '#59eddc',
                400: '#22e7d0',
                500: '#14b8a6',
                600: '#109384',
                700: '#0c6e63',
                800: '#084a42',
                900: '#042521',
                950: '#021210',
            },
            cyan: {
                DEFAULT: '#06b6d4',
                50: '#e1fafe',
                100: '#c8f6fd',
                200: '#8debfc',
                300: '#56e2fa',
                400: '#1bd7f9',
                500: '#06b6d4',
                600: '#0590a9',
                700: '#046e81',
                800: '#024854',
                900: '#01262d',
                950: '#011114',
            },
            sky: {
                DEFAULT: '#0ea5e9',
                50: '#e7f6fe',
                100: '#cfeefc',
                200: '#9adbf9',
                300: '#6acaf6',
                400: '#3ab8f3',
                500: '#0ea5e9',
                600: '#0b84bc',
                700: '#08628c',
                800: '#05405b',
                900: '#032230',
                950: '#011118',
            },
            blue: {
                DEFAULT: '#3b82f6',
                50: '#ebf3fe',
                100: '#d8e6fd',
                200: '#b1cefb',
                300: '#8ab5fa',
                400: '#639cf8',
                500: '#3b82f6',
                600: '#0b60ea',
                700: '#0848b0',
                800: '#053075',
                900: '#03183b',
                950: '#010c1d',
            },
            indigo: {
                DEFAULT: '#6366f1',
                50: '#f1f1fe',
                100: '#dedffc',
                200: '#c2c3fa',
                300: '#a1a3f7',
                400: '#8183f4',
                500: '#6366f1',
                600: '#2326eb',
                700: '#1114bb',
                800: '#0b0d7e',
                900: '#05063d',
                950: '#030321',
            },
            violet: {
                DEFAULT: '#8b5cf6',
                50: '#f5f1fe',
                100: '#e7ddfd',
                200: '#d2c0fc',
                300: '#ba9efa',
                400: '#a27df8',
                500: '#8b5cf6',
                600: '#5c1cf2',
                700: '#410bc1',
                800: '#2c0782',
                900: '#15033f',
                950: '#0b0222',
            },
            purple: {
                DEFAULT: '#a855f7',
                50: '#f8f0fe',
                100: '#eeddfd',
                200: '#dcbbfc',
                300: '#cb99fa',
                400: '#ba77f9',
                500: '#a855f7',
                600: '#8815f4',
                700: '#6609be',
                800: '#44067f',
                900: '#22033f',
                950: '#120222',
            },
            fuchsia: {
                DEFAULT: '#d946ef',
                50: '#fbecfd',
                100: '#f7d9fc',
                200: '#efb4f9',
                300: '#e88ef5',
                400: '#e069f2',
                500: '#d946ef',
                600: '#c613e1',
                700: '#940fa9',
                800: '#630a71',
                900: '#310538',
                950: '#19021c',
            },
            pink: {
                DEFAULT: '#ec4899',
                50: '#fdedf5',
                100: '#fbdaeb',
                200: '#f7b5d6',
                300: '#f390c2',
                400: '#f06bad',
                500: '#ec4899',
                600: '#de177a',
                700: '#a6115c',
                800: '#6f0c3d',
                900: '#37061f',
                950: '#1c030f',
            },
            rose: {
                DEFAULT: '#f43f5e',
                50: '#feecef',
                100: '#fdd8de',
                200: '#fbb2be',
                300: '#f88b9d',
                400: '#f6657d',
                500: '#f43f5e',
                600: '#e80d32',
                700: '#ae0a25',
                800: '#740719',
                900: '#3a030c',
                950: '#1d0206',
            },
        }),
        columns: {
            auto: 'auto',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
            '3xs': '16rem',
            '2xs': '18rem',
            xs: '20rem',
            sm: '24rem',
            md: '28rem',
            lg: '32rem',
            xl: '36rem',
            '2xl': '42rem',
            '3xl': '48rem',
            '4xl': '56rem',
            '5xl': '64rem',
            '6xl': '72rem',
            '7xl': '80rem',
        },
        container: {},
        content: {
            none: 'none',
        },
        contrast: {
            0: '0',
            50: '.5',
            75: '.75',
            100: '1',
            125: '1.25',
            150: '1.5',
            200: '2',
        },
        cursor: {
            auto: 'auto',
            default: 'default',
            pointer: 'pointer',
            wait: 'wait',
            text: 'text',
            move: 'move',
            help: 'help',
            'not-allowed': 'not-allowed',
            none: 'none',
            'context-menu': 'context-menu',
            progress: 'progress',
            cell: 'cell',
            crosshair: 'crosshair',
            'vertical-text': 'vertical-text',
            alias: 'alias',
            copy: 'copy',
            'no-drop': 'no-drop',
            grab: 'grab',
            grabbing: 'grabbing',
            'all-scroll': 'all-scroll',
            'col-resize': 'col-resize',
            'row-resize': 'row-resize',
            'n-resize': 'n-resize',
            'e-resize': 'e-resize',
            's-resize': 's-resize',
            'w-resize': 'w-resize',
            'ne-resize': 'ne-resize',
            'nw-resize': 'nw-resize',
            'se-resize': 'se-resize',
            'sw-resize': 'sw-resize',
            'ew-resize': 'ew-resize',
            'ns-resize': 'ns-resize',
            'nesw-resize': 'nesw-resize',
            'nwse-resize': 'nwse-resize',
            'zoom-in': 'zoom-in',
            'zoom-out': 'zoom-out',
        },
        divideColor: ({ theme }) => theme('borderColor'),
        divideOpacity: ({ theme }) => theme('borderOpacity'),
        divideWidth: ({ theme }) => theme('borderWidth'),
        dropShadow: {
            sm: '0 1px 1px rgb(0 0 0 / 0.05)',
            DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
            md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
            lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
            xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
            '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
            none: '0 0 #0000',
        },
        extend: {
            // Defined animations
            animation: {
                'fade-in': 'fade-in 1s ease-in-out',
                'fade-out': 'fade-out 1s ease-in-out',
                disappear: 'disappear 1.5s ease-in-out forwards',
            },
            blur: {
                xs: '2px',
            },
            borderRadius: {
                '4xl': '2rem',
            },
            boxShadow: {
                xs: '0 1px 2px 0 rgb(0 0 0 / 0.02)',
            },
            colors: {
                // Your preferred accent color. Indigo is closest to Starlight’s defaults.
                // accent: colors.secondary,
                accent: {
                    DEFAULT: '#fbbf24',
                    50: '#fff9eb',
                    100: '#fef2d2',
                    200: '#fde6aa',
                    300: '#fdd87d',
                    400: '#fccb50',
                    500: '#fbbf24',
                    600: '#e1a304',
                    700: '#aa7b03',
                    800: '#735302',
                    900: '#372801',
                    950: '#1e1601',
                },
                // Your preferred gray scale. Zinc is closest to Starlight’s defaults.
                // gray: colors.grey,
                gray: {
                    DEFAULT: '#6b7280',
                    50: '#f1f2f3',
                    100: '#e0e2e5',
                    200: '#c2c5cc',
                    300: '#a6abb5',
                    400: '#888e9b',
                    500: '#6b7280',
                    600: '#565c67',
                    700: '#41454e',
                    800: '#2a2d32',
                    900: '#151619',
                    950: '#0c0c0e',
                },
                'nerden-dark': {
                    DEFAULT: '#151515',
                    50: '#E8E8E8',
                    100: '#D1D1D1',
                    200: '#A1A1A1',
                    300: '#737373',
                    400: '#454545',
                    500: '#151515',
                    600: '#121212',
                    700: '#0D0D0D',
                    800: '#080808',
                    900: '#050505',
                    950: '#030303',
                },
                black: {
                    DEFAULT: '#000000',
                    50: '#e6e6e6',
                    100: '#cccccc',
                    200: '#999999',
                    300: '#666666',
                    400: '#333333',
                    500: '#000000',
                    600: '#000000',
                    700: '#000000',
                    800: '#000000',
                    900: '#000000',
                    950: '#000000',
                },
                white: {
                    DEFAULT: '#ffffff',
                    50: '#ffffff',
                    100: '#ffffff',
                    200: '#ffffff',
                    300: '#ffffff',
                    400: '#ffffff',
                    500: '#ffffff',
                    600: '#ffffff',
                    700: '#ffffff',
                    800: '#ffffff',
                    900: '#ffffff',
                    950: '#ffffff',
                },
                slate: {
                    DEFAULT: '#64748b',
                    50: '#f0f2f4',
                    100: '#dee2e8',
                    200: '#c1c8d2',
                    300: '#a0abbb',
                    400: '#8291a5',
                    500: '#64748b',
                    600: '#515e71',
                    700: '#3c4553',
                    800: '#292f38',
                    900: '#13161b',
                    950: '#0b0c0f',
                },
                zinc: {
                    DEFAULT: '#71717a',
                    50: '#f2f2f3',
                    100: '#e2e2e4',
                    200: '#c5c5c9',
                    300: '#aaaab1',
                    400: '#8d8d96',
                    500: '#71717a',
                    600: '#5b5b62',
                    700: '#45454a',
                    800: '#2c2c30',
                    900: '#161618',
                    950: '#0c0c0d',
                },
                neutral: {
                    DEFAULT: '#737373',
                    50: '#f2f2f2',
                    100: '#e3e3e3',
                    200: '#c7c7c7',
                    300: '#ababab',
                    400: '#8f8f8f',
                    500: '#737373',
                    600: '#5c5c5c',
                    700: '#454545',
                    800: '#2e2e2e',
                    900: '#171717',
                    950: '#0d0d0d',
                },
                stone: {
                    DEFAULT: '#78716c',
                    50: '#f1f0ef',
                    100: '#e4e3e1',
                    200: '#cac6c4',
                    300: '#afaaa6',
                    400: '#958e89',
                    500: '#78716c',
                    600: '#615b57',
                    700: '#484441',
                    800: '#302d2b',
                    900: '#181716',
                    950: '#0b0a0a',
                },
                red: {
                    DEFAULT: '#ef4444',
                    50: '#fdecec',
                    100: '#fcd9d9',
                    200: '#f9b4b4',
                    300: '#f58e8e',
                    400: '#f26969',
                    500: '#ef4444',
                    600: '#e11313',
                    700: '#a90f0f',
                    800: '#710a0a',
                    900: '#380505',
                    950: '#1c0202',
                },
                orange: {
                    DEFAULT: '#f97316',
                    50: '#fef0e6',
                    100: '#fee4d2',
                    200: '#fdc7a1',
                    300: '#fbac74',
                    400: '#fa8f42',
                    500: '#f97316',
                    600: '#d15a05',
                    700: '#9f4504',
                    800: '#682d03',
                    900: '#371801',
                    950: '#190b01',
                },
                amber: {
                    DEFAULT: '#f59e0b',
                    50: '#fef5e7',
                    100: '#fdecce',
                    200: '#fbd99d',
                    300: '#f9c56c',
                    400: '#f7b23b',
                    500: '#f59e0b',
                    600: '#c47f08',
                    700: '#935f06',
                    800: '#624004',
                    900: '#312002',
                    950: '#181001',
                },
                yellow: {
                    DEFAULT: '#eab308',
                    50: '#fef8e6',
                    100: '#fdf1ce',
                    200: '#fbe297',
                    300: '#fad566',
                    400: '#f8c630',
                    500: '#eab308',
                    600: '#bb8e06',
                    700: '#8f6c05',
                    800: '#5e4703',
                    900: '#312502',
                    950: '#191301',
                },
                lime: {
                    DEFAULT: '#84cc16',
                    50: '#f2fce3',
                    100: '#e7facc',
                    200: '#d0f49a',
                    300: '#b8ef67',
                    400: '#9fe930',
                    500: '#84cc16',
                    600: '#68a111',
                    700: '#507c0d',
                    800: '#355309',
                    900: '#1b2904',
                    950: '#0c1202',
                },
                green: {
                    DEFAULT: '#22c55e',
                    50: '#e9fbf0',
                    100: '#cff7de',
                    200: '#9fefbc',
                    300: '#6fe69b',
                    400: '#40de7a',
                    500: '#22c55e',
                    600: '#1b9d4b',
                    700: '#147538',
                    800: '#0d4e25',
                    900: '#072713',
                    950: '#04160a',
                },
                emerald: {
                    DEFAULT: '#10b981',
                    50: '#e3fdf4',
                    100: '#c7fae9',
                    200: '#8ef5d3',
                    300: '#56f0bd',
                    400: '#1eeca7',
                    500: '#10b981',
                    600: '#0d9668',
                    700: '#0a714e',
                    800: '#064b34',
                    900: '#03261a',
                    950: '#02130d',
                },
                teal: {
                    DEFAULT: '#14b8a6',
                    50: '#e3fcf9',
                    100: '#c8f9f3',
                    200: '#91f3e8',
                    300: '#59eddc',
                    400: '#22e7d0',
                    500: '#14b8a6',
                    600: '#109384',
                    700: '#0c6e63',
                    800: '#084a42',
                    900: '#042521',
                    950: '#021210',
                },
                cyan: {
                    DEFAULT: '#06b6d4',
                    50: '#e1fafe',
                    100: '#c8f6fd',
                    200: '#8debfc',
                    300: '#56e2fa',
                    400: '#1bd7f9',
                    500: '#06b6d4',
                    600: '#0590a9',
                    700: '#046e81',
                    800: '#024854',
                    900: '#01262d',
                    950: '#011114',
                },
                sky: {
                    DEFAULT: '#0ea5e9',
                    50: '#e7f6fe',
                    100: '#cfeefc',
                    200: '#9adbf9',
                    300: '#6acaf6',
                    400: '#3ab8f3',
                    500: '#0ea5e9',
                    600: '#0b84bc',
                    700: '#08628c',
                    800: '#05405b',
                    900: '#032230',
                    950: '#011118',
                },
                blue: {
                    DEFAULT: '#3b82f6',
                    50: '#ebf3fe',
                    100: '#d8e6fd',
                    200: '#b1cefb',
                    300: '#8ab5fa',
                    400: '#639cf8',
                    500: '#3b82f6',
                    600: '#0b60ea',
                    700: '#0848b0',
                    800: '#053075',
                    900: '#03183b',
                    950: '#010c1d',
                },
                indigo: {
                    DEFAULT: '#6366f1',
                    50: '#f1f1fe',
                    100: '#dedffc',
                    200: '#c2c3fa',
                    300: '#a1a3f7',
                    400: '#8183f4',
                    500: '#6366f1',
                    600: '#2326eb',
                    700: '#1114bb',
                    800: '#0b0d7e',
                    900: '#05063d',
                    950: '#030321',
                },
                violet: {
                    DEFAULT: '#8b5cf6',
                    50: '#f5f1fe',
                    100: '#e7ddfd',
                    200: '#d2c0fc',
                    300: '#ba9efa',
                    400: '#a27df8',
                    500: '#8b5cf6',
                    600: '#5c1cf2',
                    700: '#410bc1',
                    800: '#2c0782',
                    900: '#15033f',
                    950: '#0b0222',
                },
                purple: {
                    DEFAULT: '#a855f7',
                    50: '#f8f0fe',
                    100: '#eeddfd',
                    200: '#dcbbfc',
                    300: '#cb99fa',
                    400: '#ba77f9',
                    500: '#a855f7',
                    600: '#8815f4',
                    700: '#6609be',
                    800: '#44067f',
                    900: '#22033f',
                    950: '#120222',
                },
                fuchsia: {
                    DEFAULT: '#d946ef',
                    50: '#fbecfd',
                    100: '#f7d9fc',
                    200: '#efb4f9',
                    300: '#e88ef5',
                    400: '#e069f2',
                    500: '#d946ef',
                    600: '#c613e1',
                    700: '#940fa9',
                    800: '#630a71',
                    900: '#310538',
                    950: '#19021c',
                },
                pink: {
                    DEFAULT: '#ec4899',
                    50: '#fdedf5',
                    100: '#fbdaeb',
                    200: '#f7b5d6',
                    300: '#f390c2',
                    400: '#f06bad',
                    500: '#ec4899',
                    600: '#de177a',
                    700: '#a6115c',
                    800: '#6f0c3d',
                    900: '#37061f',
                    950: '#1c030f',
                },
                rose: {
                    DEFAULT: '#f43f5e',
                    50: '#feecef',
                    100: '#fdd8de',
                    200: '#fbb2be',
                    300: '#f88b9d',
                    400: '#f6657d',
                    500: '#f43f5e',
                    600: '#e80d32',
                    700: '#ae0a25',
                    800: '#740719',
                    900: '#3a030c',
                    950: '#1d0206',
                },
                'blue-gray': {
                    DEFAULT: '#607d8b',
                    50: '#f0f3f5',
                    100: '#dee5e8',
                    200: '#bdcad1',
                    300: '#9eb2bc',
                    400: '#7d98a5',
                    500: '#607d8b',
                    600: '#4d6470',
                    700: '#3a4c54',
                    800: '#263136',
                    900: '#13181b',
                    950: '#0a0e0f',
                },
                body: {
                    DEFAULT: '#4f4f4f',
                    50: '#ededed',
                    100: '#dbdbdb',
                    200: '#b8b8b8',
                    300: '#969696',
                    400: '#737373',
                    500: '#4f4f4f',
                    600: '#404040',
                    700: '#303030',
                    800: '#1f1f1f',
                    900: '#0f0f0f',
                    950: '#080808',
                    dark: '#303030',
                },
                'body-dark': {
                    DEFAULT: '#303030',
                    50: '#ebebeb',
                    100: '#d6d6d6',
                    200: '#adadad',
                    300: '#828282',
                    400: '#595959',
                    500: '#303030',
                    600: '#262626',
                    700: '#1c1c1c',
                    800: '#141414',
                    900: '#0a0a0a',
                    950: '#050505',
                },
                brown: {
                    DEFAULT: '#795548',
                    50: '#f4eeec',
                    100: '#e8ddd9',
                    200: '#cfb8af',
                    300: '#b99589',
                    400: '#a0705f',
                    500: '#795548',
                    600: '#604339',
                    700: '#4a342c',
                    800: '#30221d',
                    900: '#1a120f',
                    950: '#0d0908',
                },
                danger: {
                    DEFAULT: '#800000',
                    50: '#ffdbdb',
                    100: '#ffb3b3',
                    200: '#ff6666',
                    300: '#ff1a1a',
                    400: '#cc0000',
                    500: '#800000',
                    600: '#660000',
                    700: '#4d0000',
                    800: '#330000',
                    900: '#190000',
                    950: '#0f0000',
                },
                dark: {
                    DEFAULT: '#1f2937',
                    50: '#e5eaf0',
                    100: '#c8d2e0',
                    200: '#93a7c2',
                    300: '#5c7aa3',
                    400: '#3f536f',
                    500: '#1f2937',
                    600: '#1a222e',
                    700: '#121821',
                    800: '#0d1117',
                    900: '#06070a',
                    950: '#040507',
                },
                'deep-orange': {
                    DEFAULT: '#ff5722',
                    50: '#ffefeb',
                    100: '#ffdcd1',
                    200: '#ffbda8',
                    300: '#ff997a',
                    400: '#ff764d',
                    500: '#ff5722',
                    600: '#e63600',
                    700: '#ad2800',
                    800: '#751b00',
                    900: '#380d00',
                    950: '#1f0700',
                },
                'deep-purple': {
                    DEFAULT: '#673ab7',
                    50: '#f0ecf9',
                    100: '#dfd4f2',
                    200: '#c2aee5',
                    300: '#a283d8',
                    400: '#855ccb',
                    500: '#673ab7',
                    600: '#532f93',
                    700: '#3e226c',
                    800: '#2a174a',
                    900: '#140b23',
                    950: '#0b0613',
                },
                disabled: {
                    DEFAULT: '#9ca3af',
                    50: '#f4f5f6',
                    100: '#ebedef',
                    200: '#d8dadf',
                    300: '#c4c8cf',
                    400: '#b0b6bf',
                    500: '#9ca3af',
                    600: '#788192',
                    700: '#59616e',
                    800: '#3b4049',
                    900: '#1e2025',
                    950: '#0e0f11',
                },
                'gray-dark': {
                    DEFAULT: '#273444',
                    50: '#e5eaf0',
                    100: '#cbd5e1',
                    200: '#97abc4',
                    300: '#6784a8',
                    400: '#455c78',
                    500: '#273444',
                    600: '#202a37',
                    700: '#18202a',
                    800: '#0f141a',
                    900: '#070a0d',
                    950: '#040506',
                },
                'gray-light': {
                    DEFAULT: '#d3dce6',
                    50: '#fcfcfd',
                    100: '#f5f7f9',
                    200: '#eff2f6',
                    300: '#e5eaf0',
                    400: '#dbe2eb',
                    500: '#d3dce6',
                    600: '#9aafc6',
                    700: '#6382a6',
                    800: '#415872',
                    900: '#1f2b37',
                    950: '#11171d',
                },
                grey: {
                    DEFAULT: '#6b7280',
                    50: '#f1f2f3',
                    100: '#e0e2e5',
                    200: '#c2c5cc',
                    300: '#a6abb5',
                    400: '#888e9b',
                    500: '#6b7280',
                    600: '#565c67',
                    700: '#41454e',
                    800: '#2a2d32',
                    900: '#151619',
                    950: '#0c0c0e',
                },
                info: {
                    DEFAULT: '#54b4d3',
                    50: '#eff8fb',
                    100: '#dff1f7',
                    200: '#bae0ed',
                    300: '#9ad2e5',
                    400: '#75c2dc',
                    500: '#54b4d3',
                    600: '#3098bb',
                    700: '#25748e',
                    800: '#184c5d',
                    900: '#0d2831',
                    950: '#061418',
                },
                background: {
                    DEFAULT: '#f9fafb',
                    50: '#ffffff',
                    100: '#ffffff',
                    200: '#fcfcfd',
                    300: '#fcfcfd',
                    400: '#f9fafb',
                    500: '#f9fafb',
                    600: '#bcc7d2',
                    700: '#8296ab',
                    800: '#506377',
                    900: '#29333d',
                    950: '#141a1f',
                },
                light: {
                    DEFAULT: '#f9fafb',
                    50: '#ffffff',
                    100: '#ffffff',
                    200: '#fcfcfd',
                    300: '#fcfcfd',
                    400: '#f9fafb',
                    500: '#f9fafb',
                    600: '#bcc7d2',
                    700: '#8296ab',
                    800: '#506377',
                    900: '#29333d',
                    950: '#141a1f',
                },
                'light-blue': {
                    DEFAULT: '#03a9f4',
                    50: '#e6f7ff',
                    100: '#cdeffe',
                    200: '#95ddfe',
                    300: '#63ccfd',
                    400: '#30bcfc',
                    500: '#03a9f4',
                    600: '#0287c5',
                    700: '#026492',
                    800: '#014260',
                    900: '#012332',
                    950: '#001119',
                },
                'light-green': {
                    DEFAULT: '#8bc34a',
                    50: '#f3f9ec',
                    100: '#e9f4dd',
                    200: '#d0e7b6',
                    300: '#badb94',
                    400: '#a1cf6d',
                    500: '#8bc34a',
                    600: '#6fa135',
                    700: '#547b29',
                    800: '#37501b',
                    900: '#1d2a0e',
                    950: '#0d1306',
                },
                muted: {
                    DEFAULT: '#545964',
                    50: '#eeeff1',
                    100: '#dbdde1',
                    200: '#b7bbc2',
                    300: '#969ba7',
                    400: '#727988',
                    500: '#545964',
                    600: '#444850',
                    700: '#33363d',
                    800: '#212327',
                    900: '#101113',
                    950: '#090a0b',
                },
                natural: {
                    DEFAULT: '#737373',
                    50: '#f2f2f2',
                    100: '#e3e3e3',
                    200: '#c7c7c7',
                    300: '#ababab',
                    400: '#8f8f8f',
                    500: '#737373',
                    600: '#5c5c5c',
                    700: '#454545',
                    800: '#2e2e2e',
                    900: '#171717',
                    950: '#0d0d0d',
                },
                primary: {
                    DEFAULT: '#1b1b1b',
                    50: '#e8e8e8',
                    100: '#d1d1d1',
                    200: '#a3a3a3',
                    300: '#757575',
                    400: '#474747',
                    500: '#1b1b1b',
                    600: '#141414',
                    700: '#0f0f0f',
                    800: '#0a0a0a',
                    900: '#050505',
                    950: '#030303',
                },
                'primary-accent': {
                    DEFAULT: '#444444',
                    50: '#ededed',
                    100: '#d9d9d9',
                    200: '#b5b5b5',
                    300: '#8f8f8f',
                    400: '#696969',
                    500: '#444444',
                    600: '#363636',
                    700: '#292929',
                    800: '#1c1c1c',
                    900: '#0d0d0d',
                    950: '#080808',
                },
                secondary: {
                    DEFAULT: '#fbbf24',
                    50: '#fff9eb',
                    100: '#fef2d2',
                    200: '#fde6aa',
                    300: '#fdd87d',
                    400: '#fccb50',
                    500: '#fbbf24',
                    600: '#e1a304',
                    700: '#aa7b03',
                    800: '#735302',
                    900: '#372801',
                    950: '#1e1601',
                },
                success: {
                    DEFAULT: '#0e7235',
                    50: '#dffbea',
                    100: '#bbf7d2',
                    200: '#77eea5',
                    300: '#33e677',
                    400: '#16b653',
                    500: '#0e7235',
                    600: '#0b5b2a',
                    700: '#08441f',
                    800: '#062d15',
                    900: '#03170a',
                    950: '#020e06',
                },
                surface: {
                    DEFAULT: '#4f4f4f',
                    50: '#ededed',
                    100: '#dbdbdb',
                    200: '#b8b8b8',
                    300: '#969696',
                    400: '#737373',
                    500: '#4f4f4f',
                    600: '#404040',
                    700: '#303030',
                    800: '#1f1f1f',
                    900: '#0f0f0f',
                    950: '#080808',
                    dark: '#424242',
                },
                'text-secondary': {
                    DEFAULT: '#4f4f4f',
                    50: '#ededed',
                    100: '#dbdbdb',
                    200: '#b8b8b8',
                    300: '#969696',
                    400: '#737373',
                    500: '#4f4f4f',
                    600: '#404040',
                    700: '#303030',
                    800: '#1f1f1f',
                    900: '#0f0f0f',
                    950: '#080808',
                    dark: '#424242',
                },
                tertiary: {
                    DEFAULT: '#9fa6b2',
                    50: '#f7f7f8',
                    100: '#ebedef',
                    200: '#d7dadf',
                    300: '#c6cbd2',
                    400: '#b3b8c2',
                    500: '#9fa6b2',
                    600: '#7a8494',
                    700: '#5b6371',
                    800: '#3b404a',
                    900: '#1e2025',
                    950: '#101114',
                },
                warning: {
                    DEFAULT: '#e4a11b',
                    50: '#fcf6e8',
                    100: '#faecd1',
                    200: '#f4d9a4',
                    300: '#efc776',
                    400: '#e9b449',
                    500: '#e4a11b',
                    600: '#b68116',
                    700: '#896110',
                    800: '#5b400b',
                    900: '#2e2005',
                    950: '#171003',
                },
                error: {
                    DEFAULT: '#800000',
                    50: '#ffdbdb',
                    100: '#ffb3b3',
                    200: '#ff6666',
                    300: '#ff1a1a',
                    400: '#cc0000',
                    500: '#800000',
                    600: '#660000',
                    700: '#4d0000',
                    800: '#330000',
                    900: '#190000',
                    950: '#0f0000',
                },
            },
            dropShadow: {
                xs: '0 1px 1px rgb(0 0 0 / 0.02)',
            },
            fontFamily: {
                sans: [
                    'Inter',
                    'ui-sans-serif',
                    'system-ui',
                    '-apple-system',
                    'system-ui',
                    'Segoe UI',
                    'Roboto',
                    'Helvetica Neue',
                    'Arial',
                    'Noto Sans',
                    'sans-serif',
                    'Apple Color Emoji',
                    'Segoe UI Emoji',
                    'Segoe UI Symbol',
                    'Noto Color Emoji',
                ],
                serif: ['"Inter"', 'serif'],
                body: [
                    'Inter',
                    'ui-sans-serif',
                    'system-ui',
                    '-apple-system',
                    'system-ui',
                    'Segoe UI',
                    'Roboto',
                    'Helvetica Neue',
                    'Arial',
                    'Noto Sans',
                    'sans-serif',
                    'Apple Color Emoji',
                    'Segoe UI Emoji',
                    'Segoe UI Symbol',
                    'Noto Color Emoji',
                ],
                mono: [
                    'ui-monospace',
                    'SFMono-Regular',
                    'Menlo',
                    'Monaco',
                    'Consolas',
                    'Liberation Mono',
                    'Courier New',
                    'monospace',
                ],
            },
            fontSize: {
                xxs: '0.5rem',
            },
            // Defined keyframes
            keyframes: {
                spin: {
                    to: {
                        transform: 'rotate(360deg)',
                    },
                },
                ping: {
                    '75%, 100%': {
                        transform: 'scale(2)',
                        opacity: '0',
                    },
                },
                pulse: {
                    '50%': {
                        opacity: '0.5',
                    },
                },
                bounce: {
                    '0%, 100%': {
                        transform: 'translateY(-25%)',
                        animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
                    },
                    '50%': {
                        transform: 'none',
                        animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
                    },
                },
                'fade-in': {
                    '0%': { transform: 'translateY(15pt)', opacity: 0 },
                    '100%': { transform: 'translateY(0pt)' },
                },
                'fade-out': {
                    '0%': { transform: 'translateY(0pt)' },
                    '100%': { transform: 'translateY(15pt)', opacity: 0 },
                },
                disappear: {
                    '0%': { opacity: 1, visibility: 'visible' },
                    '100%': { visibility: 'hidden', opacity: 0 },
                },
            },
            minWidth: {
                kanban: '28rem',
            },
            screens: {
                '2xs': '320px',
                xs: '480px',
                '3xl': '1600px',
                '4xl': '1920px',
            },
            spacing: {
                128: '32rem',
                144: '36rem',
            },
            textDecoration: ['active'],
            textShadow: {
                // --tw-shadow-color is not defined in tailwindcss by now
                sm: '0 0px 2px var(--tw-shadow-color)',
                DEFAULT: '0 0px 3px var(--tw-shadow-color)',
                lg: '0 0px 8px var(--tw-shadow-color)',
            },
            transitionProperty: {
                width: 'width',
            },
        },
        fill: ({ theme }) => ({
            none: 'none',
            ...theme('colors'),
        }),
        flex: {
            1: '1 1 0%',
            auto: '1 1 auto',
            initial: '0 1 auto',
            none: 'none',
        },
        flexBasis: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            '1/5': '20%',
            '2/5': '40%',
            '3/5': '60%',
            '4/5': '80%',
            '1/6': '16.666667%',
            '2/6': '33.333333%',
            '3/6': '50%',
            '4/6': '66.666667%',
            '5/6': '83.333333%',
            '1/12': '8.333333%',
            '2/12': '16.666667%',
            '3/12': '25%',
            '4/12': '33.333333%',
            '5/12': '41.666667%',
            '6/12': '50%',
            '7/12': '58.333333%',
            '8/12': '66.666667%',
            '9/12': '75%',
            '10/12': '83.333333%',
            '11/12': '91.666667%',
            full: '100%',
        }),
        flexGrow: {
            0: '0',
            DEFAULT: '1',
        },
        flexShrink: {
            0: '0',
            DEFAULT: '1',
        },
        fontFamily: {
            sans: [
                '"Inter"',
                'serif',
                'ui-sans-serif',
                'system-ui',
                'sans-serif',
                '"Apple Color Emoji"',
                '"Segoe UI Emoji"',
                '"Segoe UI Symbol"',
                '"Noto Color Emoji"',
            ],
            serif: ['"Inter"', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
            body: ['"Inter"', 'serif'],
            mono: [
                'ui-monospace',
                'SFMono-Regular',
                'Menlo',
                'Monaco',
                'Consolas',
                '"Liberation Mono"',
                '"Courier New"',
                'monospace',
            ],
        },
        fontSize: {
            xs: ['0.75rem', { lineHeight: '1rem' }],
            sm: ['0.875rem', { lineHeight: '1.25rem' }],
            base: ['1rem', { lineHeight: '1.5rem' }],
            lg: ['1.125rem', { lineHeight: '1.75rem' }],
            xl: ['1.25rem', { lineHeight: '1.75rem' }],
            '2xl': ['1.5rem', { lineHeight: '2rem' }],
            '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
            '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
            '5xl': ['3rem', { lineHeight: '1' }],
            '6xl': ['3.75rem', { lineHeight: '1' }],
            '7xl': ['4.5rem', { lineHeight: '1' }],
            '8xl': ['6rem', { lineHeight: '1' }],
            '9xl': ['8rem', { lineHeight: '1' }],
        },
        fontWeight: {
            thin: '100',
            extralight: '200',
            light: '300',
            normal: '400',
            medium: '500',
            semibold: '600',
            bold: '700',
            extrabold: '800',
            black: '900',
        },
        gap: ({ theme }) => theme('spacing'),
        gradientColorStops: ({ theme }) => theme('colors'),
        gradientColorStopPositions: {
            '0%': '0%',
            '5%': '5%',
            '10%': '10%',
            '15%': '15%',
            '20%': '20%',
            '25%': '25%',
            '30%': '30%',
            '35%': '35%',
            '40%': '40%',
            '45%': '45%',
            '50%': '50%',
            '55%': '55%',
            '60%': '60%',
            '65%': '65%',
            '70%': '70%',
            '75%': '75%',
            '80%': '80%',
            '85%': '85%',
            '90%': '90%',
            '95%': '95%',
            '100%': '100%',
        },
        grayscale: {
            0: '0',
            DEFAULT: '100%',
        },
        gridAutoColumns: {
            auto: 'auto',
            min: 'min-content',
            max: 'max-content',
            fr: 'minmax(0, 1fr)',
        },
        gridAutoRows: {
            auto: 'auto',
            min: 'min-content',
            max: 'max-content',
            fr: 'minmax(0, 1fr)',
        },
        gridColumn: {
            auto: 'auto',
            'span-1': 'span 1 / span 1',
            'span-2': 'span 2 / span 2',
            'span-3': 'span 3 / span 3',
            'span-4': 'span 4 / span 4',
            'span-5': 'span 5 / span 5',
            'span-6': 'span 6 / span 6',
            'span-7': 'span 7 / span 7',
            'span-8': 'span 8 / span 8',
            'span-9': 'span 9 / span 9',
            'span-10': 'span 10 / span 10',
            'span-11': 'span 11 / span 11',
            'span-12': 'span 12 / span 12',
            'span-full': '1 / -1',
        },
        gridColumnEnd: {
            auto: 'auto',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
            13: '13',
        },
        gridColumnStart: {
            auto: 'auto',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
            13: '13',
        },
        gridRow: {
            auto: 'auto',
            'span-1': 'span 1 / span 1',
            'span-2': 'span 2 / span 2',
            'span-3': 'span 3 / span 3',
            'span-4': 'span 4 / span 4',
            'span-5': 'span 5 / span 5',
            'span-6': 'span 6 / span 6',
            'span-7': 'span 7 / span 7',
            'span-8': 'span 8 / span 8',
            'span-9': 'span 9 / span 9',
            'span-10': 'span 10 / span 10',
            'span-11': 'span 11 / span 11',
            'span-12': 'span 12 / span 12',
            'span-full': '1 / -1',
        },
        gridRowEnd: {
            auto: 'auto',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
            13: '13',
        },
        gridRowStart: {
            auto: 'auto',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
            13: '13',
        },
        gridTemplateColumns: {
            none: 'none',
            subgrid: 'subgrid',
            1: 'repeat(1, minmax(0, 1fr))',
            2: 'repeat(2, minmax(0, 1fr))',
            3: 'repeat(3, minmax(0, 1fr))',
            4: 'repeat(4, minmax(0, 1fr))',
            5: 'repeat(5, minmax(0, 1fr))',
            6: 'repeat(6, minmax(0, 1fr))',
            7: 'repeat(7, minmax(0, 1fr))',
            8: 'repeat(8, minmax(0, 1fr))',
            9: 'repeat(9, minmax(0, 1fr))',
            10: 'repeat(10, minmax(0, 1fr))',
            11: 'repeat(11, minmax(0, 1fr))',
            12: 'repeat(12, minmax(0, 1fr))',
        },
        gridTemplateRows: {
            none: 'none',
            subgrid: 'subgrid',
            1: 'repeat(1, minmax(0, 1fr))',
            2: 'repeat(2, minmax(0, 1fr))',
            3: 'repeat(3, minmax(0, 1fr))',
            4: 'repeat(4, minmax(0, 1fr))',
            5: 'repeat(5, minmax(0, 1fr))',
            6: 'repeat(6, minmax(0, 1fr))',
            7: 'repeat(7, minmax(0, 1fr))',
            8: 'repeat(8, minmax(0, 1fr))',
            9: 'repeat(9, minmax(0, 1fr))',
            10: 'repeat(10, minmax(0, 1fr))',
            11: 'repeat(11, minmax(0, 1fr))',
            12: 'repeat(12, minmax(0, 1fr))',
        },
        height: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            '1/5': '20%',
            '2/5': '40%',
            '3/5': '60%',
            '4/5': '80%',
            '1/6': '16.666667%',
            '2/6': '33.333333%',
            '3/6': '50%',
            '4/6': '66.666667%',
            '5/6': '83.333333%',
            full: '100%',
            screen: '100vh',
            svh: '100svh',
            lvh: '100lvh',
            dvh: '100dvh',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        hueRotate: {
            0: '0deg',
            15: '15deg',
            30: '30deg',
            60: '60deg',
            90: '90deg',
            180: '180deg',
        },
        inset: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            full: '100%',
        }),
        invert: {
            0: '0',
            DEFAULT: '100%',
        },
        keyframes: {
            spin: {
                to: {
                    transform: 'rotate(360deg)',
                },
            },
            ping: {
                '75%, 100%': {
                    transform: 'scale(2)',
                    opacity: '0',
                },
            },
            pulse: {
                '50%': {
                    opacity: '.5',
                },
            },
            bounce: {
                '0%, 100%': {
                    transform: 'translateY(-25%)',
                    animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
                },
                '50%': {
                    transform: 'none',
                    animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
                },
            },
        },
        letterSpacing: {
            tighter: '-0.05em',
            tight: '-0.025em',
            normal: '0em',
            wide: '0.025em',
            wider: '0.05em',
            widest: '0.1em',
        },
        lineHeight: {
            3: '.75rem',
            4: '1rem',
            5: '1.25rem',
            6: '1.5rem',
            7: '1.75rem',
            8: '2rem',
            9: '2.25rem',
            10: '2.5rem',
            loose: '2',
            none: '1',
            normal: '1.5',
            relaxed: '1.625',
            snug: '1.375',
            tight: '1.25',
        },
        listStyleType: {
            none: 'none',
            disc: 'disc',
            decimal: 'decimal',
        },
        listStyleImage: {
            none: 'none',
        },
        margin: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
        }),
        lineClamp: {
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
        },
        maxHeight: ({ theme }) => ({
            ...theme('spacing'),
            none: 'none',
            full: '100%',
            screen: '100vh',
            svh: '100svh',
            lvh: '100lvh',
            dvh: '100dvh',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        maxWidth: ({ theme }) => ({
            ...theme('spacing'),
            none: 'none',
            xs: '20rem',
            sm: '24rem',
            md: '28rem',
            lg: '32rem',
            xl: '36rem',
            '2xl': '42rem',
            '3xl': '48rem',
            '4xl': '56rem',
            '5xl': '64rem',
            '6xl': '72rem',
            '7xl': '80rem',
            full: '100%',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
            prose: '65ch',
        }),
        minHeight: ({ theme }) => ({
            ...theme('spacing'),
            full: '100%',
            screen: '100vh',
            svh: '100svh',
            lvh: '100lvh',
            dvh: '100dvh',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        minWidth: ({ theme }) => ({
            ...theme('spacing'),
            full: '100%',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        objectPosition: {
            bottom: 'bottom',
            center: 'center',
            left: 'left',
            'left-bottom': 'left bottom',
            'left-top': 'left top',
            right: 'right',
            'right-bottom': 'right bottom',
            'right-top': 'right top',
            top: 'top',
        },
        opacity: {
            0: '0',
            5: '0.05',
            10: '0.1',
            15: '0.15',
            20: '0.2',
            25: '0.25',
            30: '0.3',
            35: '0.35',
            40: '0.4',
            45: '0.45',
            50: '0.5',
            55: '0.55',
            60: '0.6',
            65: '0.65',
            70: '0.7',
            75: '0.75',
            80: '0.8',
            85: '0.85',
            90: '0.9',
            95: '0.95',
            100: '1',
        },
        order: {
            first: '-9999',
            last: '9999',
            none: '0',
            1: '1',
            2: '2',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10: '10',
            11: '11',
            12: '12',
        },
        outlineColor: ({ theme }) => theme('colors'),
        outlineOffset: {
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        outlineWidth: {
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        padding: ({ theme }) => theme('spacing'),
        placeholderColor: ({ theme }) => theme('colors'),
        placeholderOpacity: ({ theme }) => theme('opacity'),
        ringColor: ({ theme }) => ({
            DEFAULT: theme('colors.primary.500', '#1b1b1b'),
            ...theme('colors'),
        }),
        ringOffsetColor: ({ theme }) => theme('colors'),
        ringOffsetWidth: {
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        ringOpacity: ({ theme }) => ({
            DEFAULT: '0.5',
            ...theme('opacity'),
        }),
        ringWidth: {
            DEFAULT: '3px',
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        rotate: {
            0: '0deg',
            1: '1deg',
            2: '2deg',
            3: '3deg',
            6: '6deg',
            12: '12deg',
            45: '45deg',
            90: '90deg',
            180: '180deg',
        },
        saturate: {
            0: '0',
            50: '.5',
            100: '1',
            150: '1.5',
            200: '2',
        },
        scale: {
            0: '0',
            50: '.5',
            75: '.75',
            90: '.9',
            95: '.95',
            100: '1',
            105: '1.05',
            110: '1.1',
            125: '1.25',
            150: '1.5',
        },
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
            '2xl': '1536px',
        },
        scrollMargin: ({ theme }) => ({
            ...theme('spacing'),
        }),
        scrollPadding: ({ theme }) => theme('spacing'),
        sepia: {
            0: '0',
            DEFAULT: '100%',
        },
        skew: {
            0: '0deg',
            1: '1deg',
            2: '2deg',
            3: '3deg',
            6: '6deg',
            12: '12deg',
        },
        space: ({ theme }) => ({
            ...theme('spacing'),
        }),
        spacing: {
            0: '0px',
            0.5: '0.125rem',
            1: '0.25rem',
            1.5: '0.375rem',
            2: '0.5rem',
            2.5: '0.625rem',
            3: '0.75rem',
            3.5: '0.875rem',
            4: '1rem',
            5: '1.25rem',
            6: '1.5rem',
            7: '1.75rem',
            8: '2rem',
            9: '2.25rem',
            10: '2.5rem',
            11: '2.75rem',
            12: '3rem',
            14: '3.5rem',
            16: '4rem',
            20: '5rem',
            24: '6rem',
            28: '7rem',
            32: '8rem',
            36: '9rem',
            40: '10rem',
            44: '11rem',
            48: '12rem',
            52: '13rem',
            56: '14rem',
            60: '15rem',
            64: '16rem',
            72: '18rem',
            80: '20rem',
            96: '24rem',
            px: '1px',
        },
        stroke: ({ theme }) => ({
            none: 'none',
            ...theme('colors'),
        }),
        strokeWidth: {
            0: '0',
            1: '1',
            2: '2',
        },
        supports: {},
        data: {},
        textColor: ({ theme }) => theme('colors'),
        textDecoration: ['active'],
        textDecorationColor: ({ theme }) => theme('colors'),
        textDecorationThickness: {
            auto: 'auto',
            'from-font': 'from-font',
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        textIndent: ({ theme }) => ({
            ...theme('spacing'),
        }),
        textOpacity: ({ theme }) => theme('opacity'),
        textUnderlineOffset: {
            auto: 'auto',
            0: '0px',
            1: '1px',
            2: '2px',
            4: '4px',
            8: '8px',
        },
        transformOrigin: {
            center: 'center',
            top: 'top',
            'top-right': 'top right',
            right: 'right',
            'bottom-right': 'bottom right',
            bottom: 'bottom',
            'bottom-left': 'bottom left',
            left: 'left',
            'top-left': 'top left',
        },
        transitionDelay: {
            0: '0s',
            75: '75ms',
            100: '100ms',
            150: '150ms',
            200: '200ms',
            300: '300ms',
            500: '500ms',
            700: '700ms',
            1000: '1000ms',
        },
        transitionDuration: {
            DEFAULT: '150ms',
            0: '0s',
            75: '75ms',
            100: '100ms',
            150: '150ms',
            200: '200ms',
            300: '300ms',
            500: '500ms',
            700: '700ms',
            1000: '1000ms',
        },
        transitionProperty: {
            none: 'none',
            all: 'all',
            DEFAULT:
                'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
            colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
            opacity: 'opacity',
            shadow: 'box-shadow',
            transform: 'transform',
            width: 'width',
        },
        transitionTimingFunction: {
            DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
            linear: 'linear',
            in: 'cubic-bezier(0.4, 0, 1, 1)',
            out: 'cubic-bezier(0, 0, 0.2, 1)',
            'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
        },
        translate: ({ theme }) => ({
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            full: '100%',
        }),
        size: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            '1/5': '20%',
            '2/5': '40%',
            '3/5': '60%',
            '4/5': '80%',
            '1/6': '16.666667%',
            '2/6': '33.333333%',
            '3/6': '50%',
            '4/6': '66.666667%',
            '5/6': '83.333333%',
            '1/12': '8.333333%',
            '2/12': '16.666667%',
            '3/12': '25%',
            '4/12': '33.333333%',
            '5/12': '41.666667%',
            '6/12': '50%',
            '7/12': '58.333333%',
            '8/12': '66.666667%',
            '9/12': '75%',
            '10/12': '83.333333%',
            '11/12': '91.666667%',
            full: '100%',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        width: ({ theme }) => ({
            auto: 'auto',
            ...theme('spacing'),
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            '1/5': '20%',
            '2/5': '40%',
            '3/5': '60%',
            '4/5': '80%',
            '1/6': '16.666667%',
            '2/6': '33.333333%',
            '3/6': '50%',
            '4/6': '66.666667%',
            '5/6': '83.333333%',
            '1/12': '8.333333%',
            '2/12': '16.666667%',
            '3/12': '25%',
            '4/12': '33.333333%',
            '5/12': '41.666667%',
            '6/12': '50%',
            '7/12': '58.333333%',
            '8/12': '66.666667%',
            '9/12': '75%',
            '10/12': '83.333333%',
            '11/12': '91.666667%',
            full: '100%',
            screen: '100vw',
            svw: '100svw',
            lvw: '100lvw',
            dvw: '100dvw',
            min: 'min-content',
            max: 'max-content',
            fit: 'fit-content',
        }),
        willChange: {
            auto: 'auto',
            scroll: 'scroll-position',
            contents: 'contents',
            transform: 'transform',
        },
        zIndex: {
            auto: 'auto',
            0: '0',
            10: '10',
            20: '20',
            30: '30',
            40: '40',
            50: '50',
        },
    },
    plugins: [
        // starlightPlugin(),
        // require('@tailwindcss/typography'),
        // require('@tailwindcss/aspect-ratio'),
        // require('flowbite/plugin'),
        // require('preline/plugin'),
        // require('./tw-plugin'),
        // typography(),
        // twPlugin(),
    ],
    experimental: {
        optimizeUniversalDefaults: true,
    },
};