Created
January 23, 2023 02:59
-
-
Save corbanbrook/ca1337b6b1537df6384c14a1d5614e14 to your computer and use it in GitHub Desktop.
Tailwind Color Schemes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @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: [], | |
| } |
Author
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
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
:rootwith 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:Support any number of color schemes if you want more than just light + dark modes.
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.
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.