Skip to content

Instantly share code, notes, and snippets.

@jeremy-code
Created January 25, 2026 06:28
Show Gist options
  • Select an option

  • Save jeremy-code/bb5c9ad985e2cfe3a778019fb860cf25 to your computer and use it in GitHub Desktop.

Select an option

Save jeremy-code/bb5c9ad985e2cfe3a778019fb860cf25 to your computer and use it in GitHub Desktop.
Tailwind CSS colors reference
@import "tailwindcss";
@theme inline {
--color-contrast-1: light-dark(var(--color-gray-50), var(--color-gray-950)); /* background */
--color-contrast-2: light-dark(var(--color-gray-100), var(--color-gray-900)); /* subtle */
--color-contrast-3: light-dark(var(--color-gray-200), var(--color-gray-800)); /* muted */
--color-contrast-4: light-dark(var(--color-gray-300), var(--color-gray-700));
--color-contrast-5: light-dark(var(--color-gray-400), var(--color-gray-600)); /* subtle foreground */
--color-contrast-6: light-dark(var(--color-gray-500), var(--color-gray-500));
--color-contrast-7: light-dark(var(--color-gray-600), var(--color-gray-400)); /* muted foreground */
--color-contrast-8: light-dark(var(--color-gray-700), var(--color-gray-300));
--color-contrast-9: light-dark(var(--color-gray-800), var(--color-gray-200));
--color-contrast-10: light-dark(var(--color-gray-900), var(--color-gray-100));
--color-contrast-11: light-dark(var(--color-gray-950), var(--color-gray-50)); /* foreground */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment