My personal website
renderg.host
1import type { Config } from 'tailwindcss';
2import plugin from 'tailwindcss/plugin';
3import fluidType from './plugins/fluidType';
4
5export default {
6 darkMode: 'class',
7 content: [
8 './index.html',
9 './src/**/*.{js,ts,jsx,tsx}',
10 ],
11 theme: {
12 extend: {
13 fontFamily: {
14 sans: ['DM Sans', 'sans-serif'],
15 serif: ['DM Serif Display', 'serif'],
16 mono: ['DM Mono', 'monospace'],
17 },
18 colors: {
19 // Mono
20 'bones-black': {
21 DEFAULT: 'oklch(0 0 0)',
22 100: 'oklch(0 0 0 / 1)',
23 90: 'oklch(0 0 0 / 0.9)',
24 80: 'oklch(0 0 0 / 0.8)',
25 70: 'oklch(0 0 0 / 0.7)',
26 60: 'oklch(0 0 0 / 0.6)',
27 50: 'oklch(0 0 0 / 0.5)',
28 40: 'oklch(0 0 0 / 0.4)',
29 30: 'oklch(0 0 0 / 0.3)',
30 20: 'oklch(0 0 0 / 0.2)',
31 10: 'oklch(0 0 0 / 0.1)',
32 5: 'oklch(0 0 0 / 0.05)',
33 2: 'oklch(0 0 0 / 0.02)',
34 },
35 'bones-white': {
36 DEFAULT: 'oklch(1 0 0)',
37 100: 'oklch(1 0 0 / 1)',
38 90: 'oklch(1 0 0 / 0.9)',
39 80: 'oklch(1 0 0 / 0.8)',
40 70: 'oklch(1 0 0 / 0.7)',
41 60: 'oklch(1 0 0 / 0.6)',
42 50: 'oklch(1 0 0 / 0.5)',
43 40: 'oklch(1 0 0 / 0.4)',
44 30: 'oklch(1 0 0 / 0.3)',
45 20: 'oklch(1 0 0 / 0.2)',
46 10: 'oklch(1 0 0 / 0.1)',
47 5: 'oklch(1 0 0 / 0.05)',
48 2: 'oklch(1 0 0 / 0.02)',
49 },
50 // Blues (light mode: blue, dark mode: mediumblue)
51 'bones-blue': {
52 DEFAULT: 'oklch(0.452 0.313214 264.052)',
53 100: 'oklch(0.452 0.313214 264.052 / 1)',
54 90: 'oklch(0.452 0.313214 264.052 / 0.9)',
55 80: 'oklch(0.452 0.313214 264.052 / 0.8)',
56 70: 'oklch(0.452 0.313214 264.052 / 0.7)',
57 60: 'oklch(0.452 0.313214 264.052 / 0.6)',
58 50: 'oklch(0.452 0.313214 264.052 / 0.5)',
59 40: 'oklch(0.452 0.313214 264.052 / 0.4)',
60 30: 'oklch(0.452 0.313214 264.052 / 0.3)',
61 20: 'oklch(0.452 0.313214 264.052 / 0.2)',
62 10: 'oklch(0.452 0.313214 264.052 / 0.1)',
63 5: 'oklch(0.452 0.313214 264.052 / 0.05)',
64 2: 'oklch(0.452 0.313214 264.052 / 0.02)',
65 },
66 'bones-mediumblue': {
67 DEFAULT: 'oklch(0.3835 0.2657 264.05)',
68 100: 'oklch(0.3835 0.2657 264.05 / 1)',
69 90: 'oklch(0.3835 0.2657 264.05 / 0.9)',
70 80: 'oklch(0.3835 0.2657 264.05 / 0.8)',
71 70: 'oklch(0.3835 0.2657 264.05 / 0.7)',
72 60: 'oklch(0.3835 0.2657 264.05 / 0.6)',
73 50: 'oklch(0.3835 0.2657 264.05 / 0.5)',
74 40: 'oklch(0.3835 0.2657 264.05 / 0.4)',
75 30: 'oklch(0.3835 0.2657 264.05 / 0.3)',
76 20: 'oklch(0.3835 0.2657 264.05 / 0.2)',
77 10: 'oklch(0.3835 0.2657 264.05 / 0.1)',
78 5: 'oklch(0.3835 0.2657 264.05 / 0.05)',
79 2: 'oklch(0.3835 0.2657 264.05 / 0.02)',
80 },
81 // Yellows (light mode: yellow, dark mode: gold)
82 'bones-yellow': {
83 DEFAULT: 'oklch(0.968 0.211 109.77)',
84 100: 'oklch(0.968 0.211 109.77 / 1)',
85 90: 'oklch(0.968 0.211 109.77 / 0.9)',
86 80: 'oklch(0.968 0.211 109.77 / 0.8)',
87 70: 'oklch(0.968 0.211 109.77 / 0.7)',
88 60: 'oklch(0.968 0.211 109.77 / 0.6)',
89 50: 'oklch(0.968 0.211 109.77 / 0.5)',
90 40: 'oklch(0.968 0.211 109.77 / 0.4)',
91 30: 'oklch(0.968 0.211 109.77 / 0.3)',
92 20: 'oklch(0.968 0.211 109.77 / 0.2)',
93 10: 'oklch(0.968 0.211 109.77 / 0.1)',
94 5: 'oklch(0.968 0.211 109.77 / 0.05)',
95 2: 'oklch(0.968 0.211 109.77 / 0.02)',
96 },
97 'bones-gold': {
98 DEFAULT: 'oklch(0.8683 0.1788 96.51)',
99 100: 'oklch(0.8683 0.1788 96.51 / 1)',
100 90: 'oklch(0.8683 0.1788 96.51 / 0.9)',
101 80: 'oklch(0.8683 0.1788 96.51 / 0.8)',
102 70: 'oklch(0.8683 0.1788 96.51 / 0.7)',
103 60: 'oklch(0.8683 0.1788 96.51 / 0.6)',
104 50: 'oklch(0.8683 0.1788 96.51 / 0.5)',
105 40: 'oklch(0.8683 0.1788 96.51 / 0.4)',
106 30: 'oklch(0.8683 0.1788 96.51 / 0.3)',
107 20: 'oklch(0.8683 0.1788 96.51 / 0.2)',
108 10: 'oklch(0.8683 0.1788 96.51 / 0.1)',
109 5: 'oklch(0.8683 0.1788 96.51 / 0.05)',
110 2: 'oklch(0.8683 0.1788 96.51 / 0.02)',
111 },
112 // Utilities
113 'bones-transparent': 'transparent',
114 },
115 },
116 },
117 plugins: [
118 require('@tailwindcss/typography'),
119 fluidType(),
120 ],
121} satisfies Config;