engineering blog at https://blog.tangled.org
setup tailwind
+183
-1
+2
config.yaml
+2
config.yaml
+1
-1
flake.nix
+1
-1
flake.nix
+156
input.css
+156
input.css
···
1
+
@tailwind base;
2
+
@tailwind components;
3
+
@tailwind utilities;
4
+
@layer base {
5
+
@font-face {
6
+
font-family: "iA Writer Quattro S";
7
+
src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
8
+
format("truetype");
9
+
font-weight: normal;
10
+
font-style: normal;
11
+
font-display: swap;
12
+
font-feature-settings:
13
+
"calt" 1,
14
+
"kern" 1;
15
+
}
16
+
@font-face {
17
+
font-family: "iA Writer Quattro S";
18
+
src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
19
+
font-weight: bold;
20
+
font-style: normal;
21
+
font-display: swap;
22
+
font-feature-settings:
23
+
"calt" 1,
24
+
"kern" 1;
25
+
}
26
+
@font-face {
27
+
font-family: "iA Writer Quattro S";
28
+
src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
29
+
font-weight: normal;
30
+
font-style: italic;
31
+
font-display: swap;
32
+
font-feature-settings:
33
+
"calt" 1,
34
+
"kern" 1;
35
+
}
36
+
@font-face {
37
+
font-family: "iA Writer Quattro S";
38
+
src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
39
+
format("truetype");
40
+
font-weight: bold;
41
+
font-style: italic;
42
+
font-display: swap;
43
+
font-feature-settings:
44
+
"calt" 1,
45
+
"kern" 1;
46
+
}
47
+
48
+
@font-face {
49
+
font-family: "iA Writer Mono S";
50
+
src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
51
+
font-weight: normal;
52
+
font-style: normal;
53
+
font-display: swap;
54
+
font-feature-settings:
55
+
"calt" 1,
56
+
"kern" 1;
57
+
}
58
+
@font-face {
59
+
font-family: "iA Writer Mono S";
60
+
src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
61
+
font-weight: bold;
62
+
font-style: normal;
63
+
font-display: swap;
64
+
font-feature-settings:
65
+
"calt" 1,
66
+
"kern" 1;
67
+
}
68
+
@font-face {
69
+
font-family: "iA Writer Mono S";
70
+
src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
71
+
font-weight: normal;
72
+
font-style: italic;
73
+
font-display: swap;
74
+
font-feature-settings:
75
+
"calt" 1,
76
+
"kern" 1;
77
+
}
78
+
@font-face {
79
+
font-family: "iA Writer Mono S";
80
+
src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
81
+
format("truetype");
82
+
font-weight: bold;
83
+
font-style: italic;
84
+
font-display: swap;
85
+
font-feature-settings:
86
+
"calt" 1,
87
+
"kern" 1;
88
+
}
89
+
90
+
@font-face {
91
+
font-family: "Inter";
92
+
font-style: normal;
93
+
font-weight: 400;
94
+
font-display: swap;
95
+
font-feature-settings:
96
+
"calt" 1,
97
+
"kern" 1;
98
+
}
99
+
h1 {
100
+
@apply text-2xl;
101
+
@apply font-sans;
102
+
@apply text-black;
103
+
@apply py-4;
104
+
}
105
+
106
+
::selection {
107
+
@apply bg-yellow-400;
108
+
@apply text-black;
109
+
@apply bg-opacity-30;
110
+
}
111
+
112
+
html {
113
+
letter-spacing: -0.01em;
114
+
word-spacing: -0.07em;
115
+
}
116
+
117
+
@layer base {
118
+
a {
119
+
@apply no-underline text-black hover:underline hover:text-gray-800;
120
+
}
121
+
122
+
label {
123
+
@apply block text-sm text-black;
124
+
}
125
+
input {
126
+
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
127
+
}
128
+
textarea {
129
+
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
130
+
}
131
+
}
132
+
133
+
@layer components {
134
+
.btn {
135
+
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
136
+
justify-center bg-transparent px-2 pb-[0.2rem] text-base
137
+
text-gray-900 before:absolute before:inset-0 before:-z-10
138
+
before:block before:rounded-sm before:border before:border-gray-200
139
+
before:bg-white before:drop-shadow-sm
140
+
before:content-[''] hover:before:border-gray-300
141
+
hover:before:bg-gray-50
142
+
hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
143
+
focus:outline-none focus-visible:before:outline
144
+
focus-visible:before:outline-4 focus-visible:before:outline-gray-500
145
+
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
146
+
}
147
+
}
148
+
@layer utilities {
149
+
.error {
150
+
@apply py-1 text-red-400;
151
+
}
152
+
.success {
153
+
@apply py-1 text-black;
154
+
}
155
+
}
156
+
}
+23
tailwind.config.js
+23
tailwind.config.js
···
1
+
/** @type {import('tailwindcss').Config} */
2
+
module.exports = {
3
+
content: ["./appview/pages/templates/**/*.html"],
4
+
theme: {
5
+
container: {
6
+
padding: "2rem",
7
+
center: true,
8
+
screens: {
9
+
sm: "540px",
10
+
md: "650px",
11
+
lg: "900px",
12
+
xl: "1100px",
13
+
"2xl": "1300x",
14
+
},
15
+
},
16
+
extend: {
17
+
fontFamily: {
18
+
sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
19
+
mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
20
+
},
21
+
},
22
+
},
23
+
};