Skip to content

Commit b17602f

Browse files
wcole1-godaddyampcode-com
wcole1-godaddy
and
ampcode-com
authored
feat(react): add Tailwind v3/v4 compatible CSS export (#1233)
* feat(react): add Tailwind v3/v4 compatible CSS export - Add styles-tailwind.css export for projects that already have Tailwind - This version excludes @layer base to avoid conflicts with Tailwind v3's PostCSS plugin which errors on '@layer base without @tailwind base' - Original styles.css remains for standalone use (includes full preflight) - Update build script to generate both CSS bundles - Update Next.js example to use styles-tailwind.css Amp-Thread-ID: https://ampcode.com/threads/T-7af49944-d367-4aa2-bac3-60864e5009fa Co-authored-by: Amp <amp@ampcode.com> * Add changeset --------- Co-authored-by: Amp <amp@ampcode.com>
1 parent 2d73cac commit b17602f

File tree

4 files changed

+220
-2
lines changed

4 files changed

+220
-2
lines changed

‎.changeset/light-seals-add.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@godaddy/react": patch
3+
---
4+
5+
Add Tailwind v3/v4 compatible CSS export

‎examples/nextjs/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Metadata } from 'next';
22
import { Geist, Geist_Mono } from 'next/font/google';
33
import './globals.css';
4-
import '@godaddy/react/styles.css';
4+
import '@godaddy/react/styles-tailwind.css';
55
import { Providers } from './providers';
66

77
const geistSans = Geist({

‎packages/react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"exports": {
1111
"./package.json": "./package.json",
1212
"./styles.css": "./dist/index.css",
13+
"./styles-tailwind.css": "./dist/index-tailwind.css",
1314
"./server": {
1415
"types": "./dist/server.d.ts",
1516
"import": "./dist/server.js",
@@ -34,7 +35,7 @@
3435
"scripts": {
3536
"dev": "tsdown --watch",
3637
"dev:https": "tsdown --watch",
37-
"build": "tsdown && pnpm dlx @tailwindcss/cli -i ./src/globals.css -o ./dist/index.css --minify",
38+
"build": "tsdown && pnpm dlx @tailwindcss/cli -i ./src/globals.css -o ./dist/index.css --minify && pnpm dlx @tailwindcss/cli -i ./src/globals-tailwind.css -o ./dist/index-tailwind.css --minify",
3839
"preview": "vite preview",
3940
"typecheck": "tsc --noEmit",
4041
"test": "vitest run",

‎packages/react/src/globals-tailwind.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
@import "tailwindcss/theme" layer(theme);
2+
@import "tailwindcss/utilities" source(none);
3+
@source "./components/";
4+
5+
@keyframes enter {
6+
from {
7+
opacity: 0;
8+
transform: var(--tw-enter-transform);
9+
}
10+
}
11+
12+
@keyframes exit {
13+
to {
14+
opacity: 0;
15+
transform: var(--tw-exit-transform);
16+
}
17+
}
18+
19+
@utility animate-in {
20+
animation-name: enter;
21+
animation-duration: 0.15s;
22+
--tw-enter-transform: none;
23+
}
24+
25+
@utility animate-out {
26+
animation-name: exit;
27+
animation-duration: 0.15s;
28+
--tw-exit-transform: none;
29+
}
30+
31+
@utility fade-in-0 {
32+
--tw-enter-opacity: 0;
33+
}
34+
35+
@utility fade-out-0 {
36+
--tw-exit-opacity: 0;
37+
}
38+
39+
@utility slide-in-from-right {
40+
--tw-enter-transform: translateX(100%);
41+
}
42+
43+
@utility slide-out-to-right {
44+
--tw-exit-transform: translateX(100%);
45+
}
46+
47+
@utility slide-in-from-left {
48+
--tw-enter-transform: translateX(-100%);
49+
}
50+
51+
@utility slide-out-to-left {
52+
--tw-exit-transform: translateX(-100%);
53+
}
54+
55+
@utility slide-in-from-top {
56+
--tw-enter-transform: translateY(-100%);
57+
}
58+
59+
@utility slide-out-to-top {
60+
--tw-exit-transform: translateY(-100%);
61+
}
62+
63+
@utility slide-in-from-bottom {
64+
--tw-enter-transform: translateY(100%);
65+
}
66+
67+
@utility slide-out-to-bottom {
68+
--tw-exit-transform: translateY(100%);
69+
}
70+
71+
@utility duration-300 {
72+
animation-duration: 300ms;
73+
}
74+
75+
@utility duration-500 {
76+
animation-duration: 500ms;
77+
}
78+
79+
@font-face {
80+
font-family: "GD Sherpa";
81+
src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.eot"); /* IE9 Compat Modes */
82+
src: local("GD Sherpa"), local("GD-Sherpa"),
83+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.eot?#iefix")
84+
format("embedded-opentype"),
85+
/* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.woff")
86+
format("woff"),
87+
/* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.ttf")
88+
format("truetype"), /* Safari, Android, iOS */
89+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.svg#GD Sherpa Regular")
90+
format("svg"); /* Legacy iOS */
91+
}
92+
@font-face {
93+
font-family: "GD Sherpa";
94+
font-weight: 500;
95+
font-display: swap;
96+
font-style: normal;
97+
src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.eot"); /* IE9 Compat Modes */
98+
src: local("GD Sherpa"), local("GD-Sherpa"),
99+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.eot?#iefix")
100+
format("embedded-opentype"),
101+
/* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.woff")
102+
format("woff"),
103+
/* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.ttf")
104+
format("truetype"), /* Safari, Android, iOS */
105+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.svg#gd_sherpamedium")
106+
format("svg"); /* Legacy iOS */
107+
}
108+
@font-face {
109+
font-family: "GD Sherpa";
110+
font-weight: 700;
111+
font-display: swap;
112+
font-style: normal;
113+
src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.eot"); /* IE9 Compat Modes */
114+
src: local("GD Sherpa"), local("GD-Sherpa"),
115+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.eot?#iefix")
116+
format("embedded-opentype"),
117+
/* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.woff")
118+
format("woff"),
119+
/* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.ttf")
120+
format("truetype"), /* Safari, Android, iOS */
121+
url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.svg#gd_sherpamedium")
122+
format("svg"); /* Legacy iOS */
123+
}
124+
125+
@custom-variant dark (&:is(.gd-dark *));
126+
127+
@theme inline {
128+
--radius-sm: calc(var(--gd-radius) - 4px);
129+
--radius-md: calc(var(--gd-radius) - 2px);
130+
--radius-lg: var(--gd-radius);
131+
--radius-xl: calc(var(--gd-radius) + 4px);
132+
--color-secondary-background: var(--gd-secondary-background);
133+
--color-background: var(--gd-background);
134+
--color-foreground: var(--gd-foreground);
135+
--color-card: var(--gd-card);
136+
--color-card-foreground: var(--gd-card-foreground);
137+
--color-popover: var(--gd-popover);
138+
--color-popover-foreground: var(--gd-popover-foreground);
139+
--color-primary: var(--gd-primary);
140+
--color-primary-foreground: var(--gd-primary-foreground);
141+
--color-secondary: var(--gd-secondary);
142+
--color-secondary-foreground: var(--gd-secondary-foreground);
143+
--color-muted: var(--gd-muted);
144+
--color-muted-foreground: var(--gd-muted-foreground);
145+
--color-accent: var(--gd-accent);
146+
--color-accent-foreground: var(--gd-accent-foreground);
147+
--color-destructive: var(--gd-destructive);
148+
--color-destructive-foreground: var(--gd-destructive-foreground);
149+
--color-border: var(--gd-border);
150+
--color-input: var(--gd-input);
151+
--color-ring: var(--gd-ring);
152+
--color-text: var(--gd-text);
153+
--font-sans: var(--gd-font-sans);
154+
--font-serif: var(--gd-font-serif);
155+
--font-mono: var(--gd-font-mono);
156+
--default-font-family: var(--gd-font-sans);
157+
}
158+
159+
:root {
160+
--gd-font-sans:
161+
"GD Sherpa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
162+
"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
163+
"Segoe UI Emoji", "Segoe UI Symbol";
164+
--gd-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
165+
--gd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
166+
"Liberation Mono", "Courier New", monospace;
167+
--gd-radius: 0.625rem;
168+
--gd-background: oklch(1 0 0);
169+
--gd-secondary-background: oklch(0.98 0 0);
170+
--gd-foreground: oklch(0.13 0 0);
171+
--gd-card: oklch(1 0 0);
172+
--gd-card-foreground: oklch(0.13 0 0);
173+
--gd-popover: oklch(1 0 0);
174+
--gd-popover-foreground: oklch(0.13 0 0);
175+
--gd-primary: oklch(0.13 0 0);
176+
--gd-primary-foreground: oklch(0.985 0 0);
177+
--gd-secondary: oklch(0.97 0 0);
178+
--gd-secondary-foreground: oklch(0.13 0 0);
179+
--gd-muted: oklch(0.97 0 0);
180+
--gd-muted-foreground: oklch(0.556 0 0);
181+
--gd-accent: oklch(0.8 0.17 185);
182+
--gd-accent-foreground: oklch(0.13 0 0);
183+
--gd-destructive: oklch(0.577 0.245 27.325);
184+
--gd-destructive-foreground: oklch(0.13 0 0);
185+
--gd-border: oklch(0.9 0.025 245);
186+
--gd-input: oklch(1 0 0);
187+
--gd-ring: oklch(0.57 0.22 255);
188+
--gd-text: oklch(0.13 0 0);
189+
}
190+
191+
.gd-dark {
192+
--gd-background: oklch(0.145 0 0);
193+
--gd-foreground: oklch(0.985 0 0);
194+
--gd-card: oklch(0.205 0 0);
195+
--gd-card-foreground: oklch(0.985 0 0);
196+
--gd-popover: oklch(0.205 0 0);
197+
--gd-popover-foreground: oklch(0.985 0 0);
198+
--gd-primary: oklch(0.922 0 0);
199+
--gd-primary-foreground: oklch(0.205 0 0);
200+
--gd-secondary: oklch(0.269 0 0);
201+
--gd-secondary-foreground: oklch(0.985 0 0);
202+
--gd-muted: oklch(0.269 0 0);
203+
--gd-muted-foreground: oklch(0.708 0 0);
204+
--gd-accent: oklch(0.8 0.17 185);
205+
--gd-accent-foreground: oklch(0.13 0 0);
206+
--gd-destructive: oklch(0.704 0.191 22.216);
207+
--gd-destructive-foreground: oklch(0.13 0 0);
208+
--gd-border: oklch(0.9 0.025 245 / 20%);
209+
--gd-input: oklch(1 0 0 / 70%);
210+
--gd-ring: oklch(0.57 0.22 255);
211+
--gd-text: oklch(1 0 0);
212+
}

0 commit comments

Comments
 (0)