feat(design-system)!: Migrate from Tailwind CSS v3 to v4

[Copilot]

Breaking change migrating @ugrc/utah-design-system and @ugrc/tailwind-preset from Tailwind CSS v3 to v4, following the official upgrade guide and aligning with the Adobe React Aria + Tailwind CSS starter kit v4 conventions.

Dependency changes

• tailwindcss → v4; @tailwindcss/postcss replaces the old PostCSS plugin
• autoprefixer removed (no longer needed with v4)
• tailwindcss-animate retained — still required for animate-in/animate-out/zoom-in-*/slide-in-from-* animations used by Modal, Popover, and Tooltip
• tailwind-merge 2.x → 3.x, tailwind-variants 0.x → 3.x, tailwindcss-react-aria-components 1.x → 2.x

Config migration

• tailwind.config.js deleted — configuration now lives in CSS
• postcss.config.js updated to use @tailwindcss/postcss
• .storybook/tailwind.css migrated to @import "tailwindcss" with @custom-variant dark for class-based dark mode

@ugrc/tailwind-preset rewrite

The preset moves from a CommonJS JS object export to a CSS file using Tailwind v4's @theme API:

Before (v3):

// tailwind.config.js
import ugrcPreset from '@ugrc/tailwind-preset';
export default { presets: [ugrcPreset] };

After (v4):

/* app.css */
@import "tailwindcss";
@import "@ugrc/tailwind-preset";

The CSS preset defines all custom colors (primary, secondary, accent, warning), fonts, and animations via @theme, and registers tailwindcss-react-aria-components and tailwindcss-animate via @plugin.

Component updates

• theme(colors.*) references in Radio.tsx, Checkbox.tsx, and Tooltip.tsx replaced with var(--color-*) CSS variable syntax as required by v4.
• CSS variable utility class references updated from bracket syntax to Tailwind v4 parentheses shorthand: border-(--color), bg-(--color), h-(--visual-viewport-height), min-w-(--trigger-width), w-(--trigger-width).

[stdavis]

@copilot Take a look at this project. This is what was used as the basis for the components when they were built in v3. It's now been upgraded to v4. Please review and make sure that you are following it's conventions.

[Copilot]

@copilot Take a look at this project. This is what was used as the basis for the components when they were built in v3. It's now been upgraded to v4. Please review and make sure that you are following...

Reviewed the Adobe React Aria + Tailwind CSS starter and aligned with its v4 conventions in commit 1f86752:

1. Re-added tailwindcss-animate — the starter still uses it (via @plugin 'tailwindcss-animate'). Added it back to package.json and the tailwind-preset CSS so animate-in/animate-out/etc. work in Modal, Popover, and Tooltip.

2. Updated CSS variable syntax to use parentheses — Tailwind v4's convention for CSS variable references in utility classes is border-(--color) / bg-(--color) (parentheses) rather than border-[--color] / bg-[--color] (brackets). Updated Radio.tsx, Checkbox.tsx, Modal.tsx, Select.tsx, and Sherlock.tsx accordingly.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/repos/adobe/react-spectrum/contents/starters/tailwind
  • Triggering command: /usr/bin/curl curl -s REDACTED (http block)
• https://api.github.com/repos/adobe/react-spectrum/git/trees/main
  • Triggering command: /usr/bin/curl curl -s REDACTED (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)