-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.cjs
28 lines (28 loc) · 1.07 KB
/
tailwind.config.cjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/** @type {import('tailwindcss').Config} */
/**
* @see {@link https://tailwindcss.com/docs/customizing-colors#naming-your-colors}
* Observation. We use css variables instead instead of hard coding the
* values so that we can have multiple themes.
*/
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: {
primary: "rgb(var(--color-primary) / <alpha-value>)",
secondary: "rgb(var(--color-secondary) / <alpha-value>)",
body: "rgb(var(--color-body) / <alpha-value>)",
background: "rgb(var(--color-background) / <alpha-value>)",
highlight: "rgb(var(--color-highlight) / <alpha-value>)",
muted: "rgb(var(--color-muted) / <alpha-value>)",
accent: "rgb(var(--color-accent) / <alpha-value>)",
danger: "rgb(var(--color-danger) / <alpha-value>)",
success: "rgb(var(--color-success) / <alpha-value>)",
disabled: "rgb(var(--color-disabled) / <alpha-value>)",
backdrop: "rgb(var(--color-backdrop) / 0.85)",
},
},
},
plugins: [],
darkMode: "class",
};