From cf407e9f2315eede9f0c37f60ab8fd9b5bec2450 Mon Sep 17 00:00:00 2001 From: Wes Cole Date: Tue, 25 Nov 2025 20:15:10 -0500 Subject: [PATCH 1/2] 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 --- examples/nextjs/app/layout.tsx | 2 +- packages/react/package.json | 3 +- packages/react/src/globals-tailwind.css | 212 ++++++++++++++++++++++++ 3 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/globals-tailwind.css diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx index 95e2a478..6aa56b17 100644 --- a/examples/nextjs/app/layout.tsx +++ b/examples/nextjs/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from 'next'; import { Geist, Geist_Mono } from 'next/font/google'; import './globals.css'; -import '@godaddy/react/styles.css'; +import '@godaddy/react/styles-tailwind.css'; import { Providers } from './providers'; const geistSans = Geist({ diff --git a/packages/react/package.json b/packages/react/package.json index 3a08c08c..8c75a981 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -10,6 +10,7 @@ "exports": { "./package.json": "./package.json", "./styles.css": "./dist/index.css", + "./styles-tailwind.css": "./dist/index-tailwind.css", "./server": { "types": "./dist/server.d.ts", "import": "./dist/server.js", @@ -34,7 +35,7 @@ "scripts": { "dev": "tsdown --watch", "dev:https": "tsdown --watch", - "build": "tsdown && pnpm dlx @tailwindcss/cli -i ./src/globals.css -o ./dist/index.css --minify", + "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", "preview": "vite preview", "typecheck": "tsc --noEmit", "test": "vitest run", diff --git a/packages/react/src/globals-tailwind.css b/packages/react/src/globals-tailwind.css new file mode 100644 index 00000000..181d334a --- /dev/null +++ b/packages/react/src/globals-tailwind.css @@ -0,0 +1,212 @@ +@import "tailwindcss/theme" layer(theme); +@import "tailwindcss/utilities" source(none); +@source "./components/"; + +@keyframes enter { + from { + opacity: 0; + transform: var(--tw-enter-transform); + } +} + +@keyframes exit { + to { + opacity: 0; + transform: var(--tw-exit-transform); + } +} + +@utility animate-in { + animation-name: enter; + animation-duration: 0.15s; + --tw-enter-transform: none; +} + +@utility animate-out { + animation-name: exit; + animation-duration: 0.15s; + --tw-exit-transform: none; +} + +@utility fade-in-0 { + --tw-enter-opacity: 0; +} + +@utility fade-out-0 { + --tw-exit-opacity: 0; +} + +@utility slide-in-from-right { + --tw-enter-transform: translateX(100%); +} + +@utility slide-out-to-right { + --tw-exit-transform: translateX(100%); +} + +@utility slide-in-from-left { + --tw-enter-transform: translateX(-100%); +} + +@utility slide-out-to-left { + --tw-exit-transform: translateX(-100%); +} + +@utility slide-in-from-top { + --tw-enter-transform: translateY(-100%); +} + +@utility slide-out-to-top { + --tw-exit-transform: translateY(-100%); +} + +@utility slide-in-from-bottom { + --tw-enter-transform: translateY(100%); +} + +@utility slide-out-to-bottom { + --tw-exit-transform: translateY(100%); +} + +@utility duration-300 { + animation-duration: 300ms; +} + +@utility duration-500 { + animation-duration: 500ms; +} + +@font-face { + font-family: "GD Sherpa"; + src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.eot"); /* IE9 Compat Modes */ + src: local("GD Sherpa"), local("GD-Sherpa"), + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.eot?#iefix") + format("embedded-opentype"), + /* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.woff") + format("woff"), + /* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.ttf") + format("truetype"), /* Safari, Android, iOS */ + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.svg#GD Sherpa Regular") + format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "GD Sherpa"; + font-weight: 500; + font-display: swap; + font-style: normal; + src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.eot"); /* IE9 Compat Modes */ + src: local("GD Sherpa"), local("GD-Sherpa"), + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.eot?#iefix") + format("embedded-opentype"), + /* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.woff") + format("woff"), + /* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.ttf") + format("truetype"), /* Safari, Android, iOS */ + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-medium.svg#gd_sherpamedium") + format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "GD Sherpa"; + font-weight: 700; + font-display: swap; + font-style: normal; + src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.eot"); /* IE9 Compat Modes */ + src: local("GD Sherpa"), local("GD-Sherpa"), + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.eot?#iefix") + format("embedded-opentype"), + /* IE6-IE8 */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.woff") + format("woff"), + /* Modern Browsers */ url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.ttf") + format("truetype"), /* Safari, Android, iOS */ + url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-bold.svg#gd_sherpamedium") + format("svg"); /* Legacy iOS */ +} + +@custom-variant dark (&:is(.gd-dark *)); + +@theme inline { + --radius-sm: calc(var(--gd-radius) - 4px); + --radius-md: calc(var(--gd-radius) - 2px); + --radius-lg: var(--gd-radius); + --radius-xl: calc(var(--gd-radius) + 4px); + --color-secondary-background: var(--gd-secondary-background); + --color-background: var(--gd-background); + --color-foreground: var(--gd-foreground); + --color-card: var(--gd-card); + --color-card-foreground: var(--gd-card-foreground); + --color-popover: var(--gd-popover); + --color-popover-foreground: var(--gd-popover-foreground); + --color-primary: var(--gd-primary); + --color-primary-foreground: var(--gd-primary-foreground); + --color-secondary: var(--gd-secondary); + --color-secondary-foreground: var(--gd-secondary-foreground); + --color-muted: var(--gd-muted); + --color-muted-foreground: var(--gd-muted-foreground); + --color-accent: var(--gd-accent); + --color-accent-foreground: var(--gd-accent-foreground); + --color-destructive: var(--gd-destructive); + --color-destructive-foreground: var(--gd-destructive-foreground); + --color-border: var(--gd-border); + --color-input: var(--gd-input); + --color-ring: var(--gd-ring); + --color-text: var(--gd-text); + --font-sans: var(--gd-font-sans); + --font-serif: var(--gd-font-serif); + --font-mono: var(--gd-font-mono); + --default-font-family: var(--gd-font-sans); +} + +:root { + --gd-font-sans: + "GD Sherpa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; + --gd-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --gd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --gd-radius: 0.625rem; + --gd-background: oklch(1 0 0); + --gd-secondary-background: oklch(0.98 0 0); + --gd-foreground: oklch(0.13 0 0); + --gd-card: oklch(1 0 0); + --gd-card-foreground: oklch(0.13 0 0); + --gd-popover: oklch(1 0 0); + --gd-popover-foreground: oklch(0.13 0 0); + --gd-primary: oklch(0.13 0 0); + --gd-primary-foreground: oklch(0.985 0 0); + --gd-secondary: oklch(0.97 0 0); + --gd-secondary-foreground: oklch(0.13 0 0); + --gd-muted: oklch(0.97 0 0); + --gd-muted-foreground: oklch(0.556 0 0); + --gd-accent: oklch(0.8 0.17 185); + --gd-accent-foreground: oklch(0.13 0 0); + --gd-destructive: oklch(0.577 0.245 27.325); + --gd-destructive-foreground: oklch(0.13 0 0); + --gd-border: oklch(0.9 0.025 245); + --gd-input: oklch(1 0 0); + --gd-ring: oklch(0.57 0.22 255); + --gd-text: oklch(0.13 0 0); +} + +.gd-dark { + --gd-background: oklch(0.145 0 0); + --gd-foreground: oklch(0.985 0 0); + --gd-card: oklch(0.205 0 0); + --gd-card-foreground: oklch(0.985 0 0); + --gd-popover: oklch(0.205 0 0); + --gd-popover-foreground: oklch(0.985 0 0); + --gd-primary: oklch(0.922 0 0); + --gd-primary-foreground: oklch(0.205 0 0); + --gd-secondary: oklch(0.269 0 0); + --gd-secondary-foreground: oklch(0.985 0 0); + --gd-muted: oklch(0.269 0 0); + --gd-muted-foreground: oklch(0.708 0 0); + --gd-accent: oklch(0.8 0.17 185); + --gd-accent-foreground: oklch(0.13 0 0); + --gd-destructive: oklch(0.704 0.191 22.216); + --gd-destructive-foreground: oklch(0.13 0 0); + --gd-border: oklch(0.9 0.025 245 / 20%); + --gd-input: oklch(1 0 0 / 70%); + --gd-ring: oklch(0.57 0.22 255); + --gd-text: oklch(1 0 0); +} From 0e69461c54f495e7b7b4afc96bb6f81c55708627 Mon Sep 17 00:00:00 2001 From: Wes Cole Date: Tue, 25 Nov 2025 20:41:42 -0500 Subject: [PATCH 2/2] Add changeset --- .changeset/light-seals-add.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/light-seals-add.md diff --git a/.changeset/light-seals-add.md b/.changeset/light-seals-add.md new file mode 100644 index 00000000..98f35191 --- /dev/null +++ b/.changeset/light-seals-add.md @@ -0,0 +1,5 @@ +--- +"@godaddy/react": patch +--- + +Add Tailwind v3/v4 compatible CSS export