Skip to content

Instantly share code, notes, and snippets.

@corbanbrook

corbanbrook/index.css

Created January 23, 2023 02:59
Show Gist options
  • Save corbanbrook/ca1337b6b1537df6384c14a1d5614e14 to your computer and use it in GitHub Desktop.
Save corbanbrook/ca1337b6b1537df6384c14a1d5614e14 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Color Schemes
Raw
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--color-heading: theme(colors.slate.800);
--color-body: theme(colors.slate.500);
--color-ui-background: theme(colors.slate.200);
--color-backgroud: theme(colors.slate.50);
}
:root[color-scheme='dark'] {
--color-heading: theme(colors.slate.100);
--color-body: theme(colors.slate.400);
--color-ui-background: theme(colors.slate.700);
--color-background: theme(colors.slate.900);
}
Raw
index.html
<html color-scheme="dark">
<body class="bg-background">
<div class="rounded p-4 bg-ui-background">
<h1 class="text-sm text-heading font-bold mb-1">Cards</h1>
<p class="text-xs text-body font-medium">A simple card component</p>
</div>
</body>
</html>
Raw
tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
heading: 'var(--color-heading)',
body: 'var(--color-body)',
background: 'var(--color-background)',
'ui-background': 'var(--color-ui-background)',
},
},
},
plugins: [],
}
@corbanbrook
Copy link
Author

This is an example of using tailwind with context specific color scheme vars which map to tailwind primitive color scale values.

Default light values in :root with overrides in :root[color-scheme="dark"].

It is easy to switch between color-schemes them by using an attr/class on the tag or use wrap in @media (prefers-color-scheme: light|dark) {...}

This has a few benefits over using the dark: class prefix:

  1. Support any number of color schemes if you want more than just light + dark modes.

  2. You only need to refer to a single color value when styling elements ("text-heading" vs "text-slate-800 dark:text-slate-100"). This is faster, reduces cognitive load (you don't need to remember relationship between light and dark colors every usage), and reduces chance to introducing mistakes/color inconsistencies across your application.

  3. It avoids hard coding primitive color values and their light/dark mode relationships in your components. When building a design system it is best practice to use high-level terms when specifying the design tokens. It is better to use terms like 'heading', 'subheading', 'body', 'button' than 'text-red-500' because if you need to make a change you can do it all in a central place instead of strewn across all your components.

Any thoughts on why or why not to do this? I am fairly new to tailwind (writing my first project with it currently) so i'm interested to hear if there are better ways I haven't encountered.

@corbanbrook
Copy link
Author

I must have skipped over this section in the official tailwind docs where they describe the same approach. (Note they define their colors in opacity modifier syntax)

https://tailwindcss.com/docs/customizing-colors#using-css-variables

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment