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

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