Skip to content

Instantly share code, notes, and snippets.

@janispritzkau

janispritzkau/README.md

Last active October 12, 2025 12:44
Show Gist options
  • Save janispritzkau/37647e047e873b5195815fb81987cd62 to your computer and use it in GitHub Desktop.
Save janispritzkau/37647e047e873b5195815fb81987cd62 to your computer and use it in GitHub Desktop.
Download ZIP
A Tailwind CSS theme inspired by Material 3 design tokens.
Raw
README.md 
<div class="m-6 w-xl rounded-xl bg-surface/90 p-6 text-on-surface shadow-xl ring ring-outline-muted">
  <h1 class="text-xl font-bold">Example</h1>

  <p class="mt-2 mb-4 text-on-surface-muted">
    My go-to Tailwind theme, which I developed by copying and pasting it into every new project
    and gradually refining it.
  </p>

  <span class="inline-block rounded-md bg-red-container px-1 font-medium text-red-on-surface">
    <span class="float-start me-1 icon align-top icon-sm/6 text-red-accent icon-fill icon-medium icon-symbol-folder"></span>
    Red
  </span>
</div>

Preview

image image image
Raw
theme.css
/* prettier-ignore */
@theme {
--color-gray-50: theme(--color-zinc-50);
--color-gray-100: theme(--color-zinc-100);
--color-gray-200: theme(--color-zinc-200);
--color-gray-300: theme(--color-zinc-300);
--color-gray-400: theme(--color-zinc-400);
--color-gray-500: theme(--color-zinc-500);
--color-gray-600: theme(--color-zinc-600);
--color-gray-700: theme(--color-zinc-700);
--color-gray-800: theme(--color-zinc-800);
--color-gray-900: theme(--color-zinc-900);
--color-gray-950: theme(--color-zinc-950);
/* surface (background) */
--color-surface-bright: light-dark(theme(--color-white), theme(--color-gray-600));
--color-surface: light-dark(theme(--color-gray-50), theme(--color-gray-800));
--color-surface-dim: light-dark(theme(--color-gray-200), theme(--color-gray-900));
/* on surface (text) */
--color-on-surface-strong: light-dark(theme(--color-gray-900), theme(--color-gray-100));
--color-on-surface: light-dark(theme(--color-gray-800), theme(--color-gray-200));
--color-on-surface-muted: light-dark(theme(--color-gray-800 / 0.75), theme(--color-gray-200 / 0.75));
--color-on-surface-subtle: light-dark(theme(--color-gray-800 / 0.65), theme(--color-gray-200 / 0.65));
/* outline */
--color-outline: light-dark(theme(--color-gray-400), theme(--color-gray-500));
--color-outline-muted: light-dark(theme(--color-gray-400 / 0.5), theme(--color-gray-500 / 0.5));
--color-outline-subtle: light-dark(theme(--color-gray-400 / 0.3), theme(--color-gray-500 / 0.3));
/* container */
--color-container-high: light-dark(theme(--color-gray-400 / 0.3), theme(--color-gray-500 / 0.3));
--color-container: light-dark(theme(--color-gray-400 / 0.2), theme(--color-gray-500 / 0.2));
--color-container-low: light-dark(theme(--color-gray-400 / 0.1), theme(--color-gray-500 / 0.1));
/* color surface (background) */
--color-red: light-dark(theme(--color-red-500), theme(--color-red-400));
--color-orange: light-dark(theme(--color-orange-500), theme(--color-orange-400));
--color-amber: light-dark(theme(--color-amber-400), theme(--color-amber-400));
--color-yellow: light-dark(theme(--color-yellow-400), theme(--color-yellow-400));
--color-lime: light-dark(theme(--color-lime-400), theme(--color-lime-400));
--color-green: light-dark(theme(--color-green-600), theme(--color-green-400));
--color-emerald: light-dark(theme(--color-emerald-600), theme(--color-emerald-400));
--color-teal: light-dark(theme(--color-teal-600), theme(--color-teal-400));
--color-cyan: light-dark(theme(--color-cyan-400), theme(--color-cyan-400));
--color-sky: light-dark(theme(--color-sky-500), theme(--color-sky-400));
--color-blue: light-dark(theme(--color-blue-500), theme(--color-blue-400));
--color-indigo: light-dark(theme(--color-indigo-500), theme(--color-indigo-400));
--color-violet: light-dark(theme(--color-violet-500), theme(--color-violet-400));
--color-purple: light-dark(theme(--color-purple-500), theme(--color-purple-400));
--color-fuchsia: light-dark(theme(--color-fuchsia-500), theme(--color-fuchsia-400));
--color-pink: light-dark(theme(--color-pink-500), theme(--color-pink-400));
--color-rose: light-dark(theme(--color-rose-500), theme(--color-rose-400));
--color-primary: theme(--color-sky);
--color-success: light-dark(theme(--color-green-400), theme(--color-green-400));
--color-caution: light-dark(theme(--color-yellow-300), theme(--color-yellow-300));
--color-danger: light-dark(theme(--color-red-500), theme(--color-red-500));
/* on color surface (text) */
--color-on-red: light-dark(theme(--color-white), theme(--color-red-950));
--color-on-orange: light-dark(theme(--color-white), theme(--color-orange-950));
--color-on-amber: light-dark(theme(--color-amber-950), theme(--color-amber-950));
--color-on-yellow: light-dark(theme(--color-yellow-950), theme(--color-yellow-950));
--color-on-lime: light-dark(theme(--color-lime-950), theme(--color-lime-950));
--color-on-green: light-dark(theme(--color-white), theme(--color-green-950));
--color-on-emerald: light-dark(theme(--color-white), theme(--color-emerald-950));
--color-on-teal: light-dark(theme(--color-white), theme(--color-teal-950));
--color-on-cyan: light-dark(theme(--color-cyan-950), theme(--color-cyan-950));
--color-on-sky: light-dark(theme(--color-white), theme(--color-sky-950));
--color-on-blue: light-dark(theme(--color-white), theme(--color-blue-950));
--color-on-indigo: light-dark(theme(--color-white), theme(--color-indigo-950));
--color-on-violet: light-dark(theme(--color-white), theme(--color-violet-950));
--color-on-purple: light-dark(theme(--color-white), theme(--color-purple-950));
--color-on-fuchsia: light-dark(theme(--color-white), theme(--color-fuchsia-950));
--color-on-pink: light-dark(theme(--color-white), theme(--color-pink-950));
--color-on-rose: light-dark(theme(--color-white), theme(--color-rose-950));
--color-on-primary: theme(--color-on-sky);
--color-on-success: light-dark(theme(--color-green-950), theme(--color-green-950));
--color-on-caution: theme(--color-on-yellow);
--color-on-danger: theme(--color-white);
/* color on surface (text) */
--color-red-on-surface: light-dark(theme(--color-red-700), theme(--color-red-300));
--color-orange-on-surface: light-dark(theme(--color-orange-700), theme(--color-orange-300));
--color-amber-on-surface: light-dark(theme(--color-amber-700), theme(--color-amber-300));
--color-yellow-on-surface: light-dark(theme(--color-yellow-700), theme(--color-yellow-300));
--color-lime-on-surface: light-dark(theme(--color-lime-700), theme(--color-lime-300));
--color-green-on-surface: light-dark(theme(--color-green-700), theme(--color-green-300));
--color-emerald-on-surface: light-dark(theme(--color-emerald-700), theme(--color-emerald-300));
--color-teal-on-surface: light-dark(theme(--color-teal-700), theme(--color-teal-300));
--color-cyan-on-surface: light-dark(theme(--color-cyan-700), theme(--color-cyan-300));
--color-sky-on-surface: light-dark(theme(--color-sky-700), theme(--color-sky-300));
--color-blue-on-surface: light-dark(theme(--color-blue-700), theme(--color-blue-300));
--color-indigo-on-surface: light-dark(theme(--color-indigo-700), theme(--color-indigo-300));
--color-violet-on-surface: light-dark(theme(--color-violet-700), theme(--color-violet-300));
--color-purple-on-surface: light-dark(theme(--color-purple-700), theme(--color-purple-300));
--color-fuchsia-on-surface: light-dark(theme(--color-fuchsia-700), theme(--color-fuchsia-300));
--color-pink-on-surface: light-dark(theme(--color-pink-700), theme(--color-pink-300));
--color-rose-on-surface: light-dark(theme(--color-rose-700), theme(--color-rose-300));
--color-primary-on-surface: theme(--color-sky-on-surface);
--color-success-on-surface: theme(--color-green-on-surface);
--color-caution-on-surface: theme(--color-amber-on-surface);
--color-danger-on-surface: theme(--color-red-on-surface);
/* color accent */
--color-red-accent: light-dark(theme(--color-red-600), theme(--color-red-400));
--color-orange-accent: light-dark(theme(--color-orange-600), theme(--color-orange-400));
--color-amber-accent: light-dark(theme(--color-amber-600), theme(--color-amber-400));
--color-yellow-accent: light-dark(theme(--color-yellow-600), theme(--color-yellow-400));
--color-lime-accent: light-dark(theme(--color-lime-600), theme(--color-lime-400));
--color-green-accent: light-dark(theme(--color-green-600), theme(--color-green-400));
--color-emerald-accent: light-dark(theme(--color-emerald-600), theme(--color-emerald-400));
--color-teal-accent: light-dark(theme(--color-teal-600), theme(--color-teal-400));
--color-cyan-accent: light-dark(theme(--color-cyan-600), theme(--color-cyan-400));
--color-sky-accent: light-dark(theme(--color-sky-600), theme(--color-sky-400));
--color-blue-accent: light-dark(theme(--color-blue-600), theme(--color-blue-400));
--color-indigo-accent: light-dark(theme(--color-indigo-600), theme(--color-indigo-400));
--color-violet-accent: light-dark(theme(--color-violet-600), theme(--color-violet-400));
--color-purple-accent: light-dark(theme(--color-purple-600), theme(--color-purple-400));
--color-fuchsia-accent: light-dark(theme(--color-fuchsia-600), theme(--color-fuchsia-400));
--color-pink-accent: light-dark(theme(--color-pink-600), theme(--color-pink-400));
--color-rose-accent: light-dark(theme(--color-rose-600), theme(--color-rose-400));
--color-primary-accent: theme(--color-sky-accent);
--color-success-accent: theme(--color-green-accent);
--color-caution-accent: theme(--color-amber-accent);
--color-danger-accent: theme(--color-red-accent);
/* color outline */
--color-primary-outline: light-dark(theme(--color-sky-500), theme(--color-sky-400));
--color-success-outline: light-dark(theme(--color-green-500), theme(--color-green-400));
--color-caution-outline: light-dark(theme(--color-yellow-500), theme(--color-yellow-400));
--color-danger-outline: light-dark(theme(--color-red-500), theme(--color-red-400));
/* color container */
--color-red-container-high: light-dark(theme(--color-red-500 / 0.3), theme(--color-red-400 / 0.3));
--color-red-container: light-dark(theme(--color-red-500 / 0.2), theme(--color-red-400 / 0.2));
--color-red-container-low: light-dark(theme(--color-red-500 / 0.1), theme(--color-red-400 / 0.1));
--color-orange-container-high: light-dark(theme(--color-orange-500 / 0.3), theme(--color-orange-400 / 0.3));
--color-orange-container: light-dark(theme(--color-orange-500 / 0.2), theme(--color-orange-400 / 0.2));
--color-orange-container-low: light-dark(theme(--color-orange-500 / 0.1), theme(--color-orange-400 / 0.1));
--color-amber-container-high: light-dark(theme(--color-amber-500 / 0.3), theme(--color-amber-400 / 0.3));
--color-amber-container: light-dark(theme(--color-amber-500 / 0.2), theme(--color-amber-400 / 0.2));
--color-amber-container-low: light-dark(theme(--color-amber-500 / 0.1), theme(--color-amber-400 / 0.1));
--color-yellow-container-high: light-dark(theme(--color-yellow-500 / 0.3), theme(--color-yellow-400 / 0.3));
--color-yellow-container: light-dark(theme(--color-yellow-500 / 0.2), theme(--color-yellow-400 / 0.2));
--color-yellow-container-low: light-dark(theme(--color-yellow-500 / 0.1), theme(--color-yellow-400 / 0.1));
--color-lime-container-high: light-dark(theme(--color-lime-500 / 0.3), theme(--color-lime-400 / 0.3));
--color-lime-container: light-dark(theme(--color-lime-500 / 0.2), theme(--color-lime-400 / 0.2));
--color-lime-container-low: light-dark(theme(--color-lime-500 / 0.1), theme(--color-lime-400 / 0.1));
--color-green-container-high: light-dark(theme(--color-green-500 / 0.3), theme(--color-green-400 / 0.3));
--color-green-container: light-dark(theme(--color-green-500 / 0.2), theme(--color-green-400 / 0.2));
--color-green-container-low: light-dark(theme(--color-green-500 / 0.1), theme(--color-green-400 / 0.1));
--color-emerald-container-high: light-dark(theme(--color-emerald-500 / 0.3), theme(--color-emerald-400 / 0.3));
--color-emerald-container: light-dark(theme(--color-emerald-500 / 0.2), theme(--color-emerald-400 / 0.2));
--color-emerald-container-low: light-dark(theme(--color-emerald-500 / 0.1), theme(--color-emerald-400 / 0.1));
--color-teal-container-high: light-dark(theme(--color-teal-500 / 0.3), theme(--color-teal-400 / 0.3));
--color-teal-container: light-dark(theme(--color-teal-500 / 0.2), theme(--color-teal-400 / 0.2));
--color-teal-container-low: light-dark(theme(--color-teal-500 / 0.1), theme(--color-teal-400 / 0.1));
--color-cyan-container-high: light-dark(theme(--color-cyan-500 / 0.3), theme(--color-cyan-400 / 0.3));
--color-cyan-container: light-dark(theme(--color-cyan-500 / 0.2), theme(--color-cyan-400 / 0.2));
--color-cyan-container-low: light-dark(theme(--color-cyan-500 / 0.1), theme(--color-cyan-400 / 0.1));
--color-sky-container-high: light-dark(theme(--color-sky-500 / 0.3), theme(--color-sky-400 / 0.3));
--color-sky-container: light-dark(theme(--color-sky-500 / 0.2), theme(--color-sky-400 / 0.2));
--color-sky-container-low: light-dark(theme(--color-sky-500 / 0.1), theme(--color-sky-400 / 0.1));
--color-blue-container-high: light-dark(theme(--color-blue-500 / 0.3), theme(--color-blue-400 / 0.3));
--color-blue-container: light-dark(theme(--color-blue-500 / 0.2), theme(--color-blue-400 / 0.2));
--color-blue-container-low: light-dark(theme(--color-blue-500 / 0.1), theme(--color-blue-400 / 0.1));
--color-indigo-container-high: light-dark(theme(--color-indigo-500 / 0.3), theme(--color-indigo-400 / 0.3));
--color-indigo-container: light-dark(theme(--color-indigo-500 / 0.2), theme(--color-indigo-400 / 0.2));
--color-indigo-container-low: light-dark(theme(--color-indigo-500 / 0.1), theme(--color-indigo-400 / 0.1));
--color-violet-container-high: light-dark(theme(--color-violet-500 / 0.3), theme(--color-violet-400 / 0.3));
--color-violet-container: light-dark(theme(--color-violet-500 / 0.2), theme(--color-violet-400 / 0.2));
--color-violet-container-low: light-dark(theme(--color-violet-500 / 0.1), theme(--color-violet-400 / 0.1));
--color-purple-container-high: light-dark(theme(--color-purple-500 / 0.3), theme(--color-purple-400 / 0.3));
--color-purple-container: light-dark(theme(--color-purple-500 / 0.2), theme(--color-purple-400 / 0.2));
--color-purple-container-low: light-dark(theme(--color-purple-500 / 0.1), theme(--color-purple-400 / 0.1));
--color-fuchsia-container-high: light-dark(theme(--color-fuchsia-500 / 0.3), theme(--color-fuchsia-400 / 0.3));
--color-fuchsia-container: light-dark(theme(--color-fuchsia-500 / 0.2), theme(--color-fuchsia-400 / 0.2));
--color-fuchsia-container-low: light-dark(theme(--color-fuchsia-500 / 0.1), theme(--color-fuchsia-400 / 0.1));
--color-pink-container-high: light-dark(theme(--color-pink-500 / 0.3), theme(--color-pink-400 / 0.3));
--color-pink-container: light-dark(theme(--color-pink-500 / 0.2), theme(--color-pink-400 / 0.2));
--color-pink-container-low: light-dark(theme(--color-pink-500 / 0.1), theme(--color-pink-400 / 0.1));
--color-rose-container-high: light-dark(theme(--color-rose-500 / 0.3), theme(--color-rose-400 / 0.3));
--color-rose-container: light-dark(theme(--color-rose-500 / 0.2), theme(--color-rose-400 / 0.2));
--color-rose-container-low: light-dark(theme(--color-rose-500 / 0.1), theme(--color-rose-400 / 0.1));
--color-primary-container-high: theme(--color-sky-container-high);
--color-primary-container: theme(--color-sky-container);
--color-primary-container-low: theme(--color-sky-container-low);
--color-success-container-high: theme(--color-green-container-high);
--color-success-container: theme(--color-green-container);
--color-success-container-low: theme(--color-green-container-low);
--color-caution-container-high: theme(--color-yellow-container-high);
--color-caution-container: theme(--color-yellow-container);
--color-caution-container-low: theme(--color-yellow-container-low);
--color-danger-container-high: theme(--color-red-container-high);
--color-danger-container: theme(--color-red-container);
--color-danger-container-low: theme(--color-red-container-low);
/* on color container (text) */
--color-on-red-container: light-dark(theme(--color-red-950), theme(--color-red-100));
--color-on-orange-container: light-dark(theme(--color-orange-950), theme(--color-orange-100));
--color-on-amber-container: light-dark(theme(--color-amber-950), theme(--color-amber-100));
--color-on-yellow-container: light-dark(theme(--color-yellow-950), theme(--color-yellow-100));
--color-on-lime-container: light-dark(theme(--color-lime-950), theme(--color-lime-100));
--color-on-green-container: light-dark(theme(--color-green-950), theme(--color-green-100));
--color-on-emerald-container: light-dark(theme(--color-emerald-950), theme(--color-emerald-100));
--color-on-teal-container: light-dark(theme(--color-teal-950), theme(--color-teal-100));
--color-on-cyan-container: light-dark(theme(--color-cyan-950), theme(--color-cyan-100));
--color-on-sky-container: light-dark(theme(--color-sky-950), theme(--color-sky-100));
--color-on-blue-container: light-dark(theme(--color-blue-950), theme(--color-blue-100));
--color-on-indigo-container: light-dark(theme(--color-indigo-950), theme(--color-indigo-100));
--color-on-violet-container: light-dark(theme(--color-violet-950), theme(--color-violet-100));
--color-on-purple-container: light-dark(theme(--color-purple-950), theme(--color-purple-100));
--color-on-fuchsia-container: light-dark(theme(--color-fuchsia-950), theme(--color-fuchsia-100));
--color-on-pink-container: light-dark(theme(--color-pink-950), theme(--color-pink-100));
--color-on-rose-container: light-dark(theme(--color-rose-950), theme(--color-rose-100));
--color-on-primary-container: theme(--color-on-sky-container);
--color-on-success-container: theme(--color-on-green-container);
--color-on-caution-container: theme(--color-on-yellow-container);
--color-on-danger-container: theme(--color-on-red-container);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment