-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
69 lines (67 loc) · 1.55 KB
/
tailwind.config.js
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const plugin = require("tailwindcss/plugin");
const fallbackFonts = [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
];
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class", '[data-theme="dark"]'],
content: ["./src/**/*.{js,jsx,md,mdx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
special: ["var(--font-lobular)", ...fallbackFonts],
sans: ["var(--font-fungis)", ...fallbackFonts],
serif: ["serif"],
mono: ["monospace"],
},
colors: {
fg: "var(--fg)",
bg: "var(--bg)",
bgOverlay: "var(--bgOverlay)",
alt: "var(--alt)",
grayDark: "var(--grayDark)",
grayMed: "var(--grayMed)",
grayLight: "var(--grayLight)",
grayUltraLight: "var(--grayUltraLight)",
},
height: { screen: "100lvh" },
width: { screen: "100lvw" },
},
},
plugins: [
require("@tailwindcss/container-queries"),
require("@tailwindcss/forms", { strategy: "class" }),
require("tailwindcss-animate"),
plugin(({ addUtilities }) => {
addUtilities({
".text-balance": {
"text-wrap": "balance",
},
".text-pretty": {
"text-wrap": "pretty",
},
".text-stroke-grayDark": {
"-webkit-text-stroke-width": "5px",
"-webkit-text-stroke-color": "var(--grayDark)",
},
".text-stroke-fg": {
"-webkit-text-stroke-width": "5px",
"-webkit-text-stroke-color": "var(--fg)",
},
});
}),
],
};