Skip to content

Commit 979f253

Browse files
kentcdoddskentcdodds
authored
Tailwind v4 integration (#27)
1 parent b4306da commit 979f253

9 files changed

Lines changed: 747 additions & 550 deletions

File tree

‎app/routes/_app+/_marketing+/tailwind-preset.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎app/styles/tailwind.css‎

Lines changed: 165 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,192 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
43

5-
@layer base {
6-
:root {
7-
/* --font-sans: here if you have one */
8-
/* --font-mono: here if you got it... */
4+
@custom-variant dark (&:is(.dark *));
95

10-
/* prefixed with foreground because it should look good on the background */
11-
--foreground-destructive: 345 82.7% 40.8%;
6+
:root {
7+
/* --font-sans: here if you have one */
8+
/* --font-mono: here if you got it... */
129

13-
--background: 0 0% 100%;
14-
--foreground: 222.2 84% 4.9%;
10+
/* prefixed with foreground because it should look good on the background */
11+
--foreground-destructive: 345 82.7% 40.8%;
1512

16-
--muted: 210 40% 93%;
17-
--muted-foreground: 215.4 16.3% 30%;
13+
--background: 0 0% 100%;
14+
--foreground: 222.2 84% 4.9%;
1815

19-
--muted-secondary: 210 40% 93%;
20-
--muted-secondary-foreground: 215.4 9.3% 41%;
16+
--muted: 210 40% 93%;
17+
--muted-foreground: 215.4 16.3% 30%;
2118

22-
--popover: 0 0% 100%;
23-
--popover-foreground: 222.2 84% 4.9%;
19+
--muted-secondary: 210 40% 93%;
20+
--muted-secondary-foreground: 215.4 9.3% 41%;
2421

25-
--card: 0 0% 100%;
26-
--card-foreground: 222.2 84% 4.9%;
22+
--popover: 0 0% 100%;
23+
--popover-foreground: 222.2 84% 4.9%;
2724

28-
--border: 214.3 31.8% 91.4%;
29-
--input: 214.3 31.8% 91.4%;
30-
--input-invalid: 0 84.2% 60.2%;
25+
--card: 0 0% 100%;
26+
--card-foreground: 222.2 84% 4.9%;
3127

32-
--primary: 222.2 47.4% 11.2%;
33-
--primary-foreground: 210 40% 98%;
28+
--border: 214.3 31.8% 91.4%;
29+
--input: 214.3 31.8% 91.4%;
30+
--input-invalid: 0 84.2% 60.2%;
3431

35-
--secondary: 210 20% 83%;
36-
--secondary-foreground: 222.2 47.4% 11.2%;
32+
--primary: 222.2 47.4% 11.2%;
33+
--primary-foreground: 210 40% 98%;
3734

38-
--accent: 210 40% 90%;
39-
--accent-foreground: 222.2 47.4% 11.2%;
35+
--secondary: 210 20% 83%;
36+
--secondary-foreground: 222.2 47.4% 11.2%;
4037

41-
--destructive: 0 70% 50%;
42-
--destructive-foreground: 210 40% 98%;
38+
--accent: 210 40% 90%;
39+
--accent-foreground: 222.2 47.4% 11.2%;
4340

44-
--ring: 215 20.2% 65.1%;
41+
--destructive: 0 70% 50%;
42+
--destructive-foreground: 210 40% 98%;
4543

46-
--radius: 0.5rem;
47-
}
44+
--ring: 215 20.2% 65.1%;
45+
46+
--radius: 0.5rem;
47+
}
48+
49+
.dark {
50+
--background: 222.2 84% 4.9%;
51+
--foreground: 210 40% 98%;
52+
53+
/* prefixed with foreground because it should look good on the background */
54+
--foreground-destructive: -4 84% 60%;
55+
56+
--muted: 217.2 32.6% 12%;
57+
--muted-foreground: 215 20.2% 65.1%;
58+
59+
--popover: 222.2 84% 4.9%;
60+
--popover-foreground: 210 40% 98%;
4861

49-
.dark {
50-
--background: 222.2 84% 4.9%;
51-
--foreground: 210 40% 98%;
62+
--card: 222.2 84% 4.9%;
63+
--card-foreground: 210 40% 98%;
5264

53-
/* prefixed with foreground because it should look good on the background */
54-
--foreground-destructive: -4 84% 60%;
65+
--border: 217.2 32.6% 17.5%;
66+
--input: 217.2 32.6% 17.5%;
67+
--input-invalid: 0 62.8% 30.6%;
5568

56-
--muted: 217.2 32.6% 12%;
57-
--muted-foreground: 215 20.2% 65.1%;
69+
--primary: 210 40% 98%;
70+
--primary-foreground: 222.2 47.4% 11.2%;
5871

59-
--popover: 222.2 84% 4.9%;
60-
--popover-foreground: 210 40% 98%;
72+
--secondary: 217.2 20% 24%;
73+
--secondary-foreground: 210 40% 98%;
6174

62-
--card: 222.2 84% 4.9%;
63-
--card-foreground: 210 40% 98%;
75+
--accent: 217.2 32.6% 10%;
76+
--accent-foreground: 210 40% 98%;
6477

65-
--border: 217.2 32.6% 17.5%;
66-
--input: 217.2 32.6% 17.5%;
67-
--input-invalid: 0 62.8% 30.6%;
78+
--destructive: 0 60% 40%;
79+
--destructive-foreground: 0 85.7% 97.3%;
6880

69-
--primary: 210 40% 98%;
70-
--primary-foreground: 222.2 47.4% 11.2%;
81+
--ring: 217.2 32.6% 60%;
82+
}
83+
84+
@theme inline {
85+
--radius-sm: calc(var(--radius) - 4px);
86+
--radius-md: calc(var(--radius) - 2px);
87+
--radius-lg: var(--radius);
88+
--radius-xl: calc(var(--radius) + 4px);
89+
--color-background: hsl(var(--background));
90+
--color-foreground: hsl(var(--foreground));
91+
--color-foreground-destructive: hsl(var(--foreground-destructive));
92+
--color-muted: hsl(var(--muted));
93+
--color-muted-foreground: hsl(var(--muted-foreground));
94+
--color-muted-secondary: hsl(var(--muted-secondary));
95+
--color-muted-secondary-foreground: hsl(var(--muted-secondary-foreground));
96+
--color-popover: hsl(var(--popover));
97+
--color-popover-foreground: hsl(var(--popover-foreground));
98+
--color-card: hsl(var(--card));
99+
--color-card-foreground: hsl(var(--card-foreground));
100+
--color-border: hsl(var(--border));
101+
--color-input: hsl(var(--input));
102+
--color-input-invalid: hsl(var(--input-invalid));
103+
--color-primary: hsl(var(--primary));
104+
--color-primary-foreground: hsl(var(--primary-foreground));
105+
--color-secondary: hsl(var(--secondary));
106+
--color-secondary-foreground: hsl(var(--secondary-foreground));
107+
--color-accent: hsl(var(--accent));
108+
--color-accent-foreground: hsl(var(--accent-foreground));
109+
--color-destructive: hsl(var(--destructive));
110+
--color-destructive-foreground: hsl(var(--destructive-foreground));
111+
--color-ring: hsl(var(--ring));
112+
--color-ring-invalid: hsl(var(--foreground-destructive));
113+
}
71114

72-
--secondary: 217.2 20% 24%;
73-
--secondary-foreground: 210 40% 98%;
115+
@theme {
116+
--text-mega: 5rem;
117+
--text-mega--line-height: 5.25rem;
118+
--text-mega--font-weight: 700;
119+
--text-h1: 3.5rem;
120+
--text-h1--line-height: 3.875rem;
121+
--text-h1--font-weight: 700;
122+
--text-h2: 2.5rem;
123+
--text-h2--line-height: 3rem;
124+
--text-h2--font-weight: 700;
125+
--text-h3: 2rem;
126+
--text-h3--line-height: 2.25rem;
127+
--text-h3--font-weight: 700;
128+
--text-h4: 1.75rem;
129+
--text-h4--line-height: 2.25rem;
130+
--text-h4--font-weight: 700;
131+
--text-h5: 1.5rem;
132+
--text-h5--line-height: 2rem;
133+
--text-h5--font-weight: 700;
134+
--text-h6: 1rem;
135+
--text-h6--line-height: 1.25rem;
136+
--text-h6--font-weight: 700;
137+
--text-body-2xl: 2rem;
138+
--text-body-2xl--line-height: 2.25rem;
139+
--text-body-xl: 1.75rem;
140+
--text-body-xl--line-height: 2.25rem;
141+
--text-body-lg: 1.5rem;
142+
--text-body-lg--line-height: 2rem;
143+
--text-body-md: 1.25rem;
144+
--text-body-md--line-height: 1.75rem;
145+
--text-body-sm: 1rem;
146+
--text-body-sm--line-height: 1.25rem;
147+
--text-body-xs: 0.875rem;
148+
--text-body-xs--line-height: 1.125rem;
149+
--text-body-2xs: 0.75rem;
150+
--text-body-2xs--line-height: 1rem;
151+
--text-caption: 1.125rem;
152+
--text-caption--line-height: 1.5rem;
153+
--text-caption--font-weight: 600;
154+
--text-button: 0.75rem;
155+
--text-button--line-height: 1rem;
156+
--text-button--font-weight: 700;
157+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
158+
159+
@keyframes caret-blink {
160+
0%,
161+
70%,
162+
100% {
163+
opacity: 1;
164+
}
165+
166+
20%,
167+
50% {
168+
opacity: 0;
169+
}
170+
}
171+
}
74172

75-
--accent: 217.2 32.6% 10%;
76-
--accent-foreground: 210 40% 98%;
173+
@utility container {
174+
margin-inline: auto;
175+
padding-inline: 2rem;
77176

78-
--destructive: 0 60% 40%;
79-
--destructive-foreground: 0 85.7% 97.3%;
177+
@media (width >= 1536px) {
178+
& {
179+
max-width: 1400px;
180+
}
181+
}
182+
}
80183

81-
--ring: 217.2 32.6% 60%;
184+
@layer base {
185+
*,
186+
::after,
187+
::before,
188+
::backdrop,
189+
::file-selector-button {
190+
border-color: hsl(var(--border));
82191
}
83192
}

‎app/utils/extended-theme.ts‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { type Config } from 'tailwindcss'
2-
31
export const extendedTheme = {
42
colors: {
53
border: 'hsl(var(--border))',
@@ -49,9 +47,6 @@ export const extendedTheme = {
4947
foreground: 'hsl(var(--card-foreground))',
5048
},
5149
},
52-
borderColor: {
53-
DEFAULT: 'hsl(var(--border))',
54-
},
5550
borderRadius: {
5651
lg: 'var(--radius)',
5752
md: 'calc(var(--radius) - 2px)',
@@ -94,13 +89,4 @@ export const extendedTheme = {
9489
/** 12px size / 16px high / bold */
9590
button: ['0.75rem', { lineHeight: '1rem', fontWeight: '700' }],
9691
},
97-
keyframes: {
98-
'caret-blink': {
99-
'0%,70%,100%': { opacity: '1' },
100-
'20%,50%': { opacity: '0' },
101-
},
102-
},
103-
animation: {
104-
'caret-blink': 'caret-blink 1.25s ease-out infinite',
105-
},
106-
} satisfies Config['theme']
92+
} as const

‎components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"style": "default",
44
"rsc": false,
55
"tailwind": {
6-
"config": "tailwind.config.ts",
6+
"config": "",
77
"css": "app/styles/tailwind.css",
88
"baseColor": "slate",
99
"cssVariables": true

0 commit comments

Comments
 (0)