Skip to content

chore: upgrade Tailwind CSS to v4.3.3 and migrate to Tailwind v4 syntax conventions - #831

Open
karticme wants to merge 2 commits into
cosscom:mainfrom
karticme:tailwind-upgrade
Open

chore: upgrade Tailwind CSS to v4.3.3 and migrate to Tailwind v4 syntax conventions#831
karticme wants to merge 2 commits into
cosscom:mainfrom
karticme:tailwind-upgrade

Conversation

@karticme

@karticme karticme commented Aug 2, 2026

Copy link
Copy Markdown

Summary

Runs the official @tailwindcss/upgrade codemod across the monorepo to adopt Tailwind CSS v4 and its updated utility naming conventions. No visual changes are intended — this is a mechanical migration.

What changed

Package version

  • Bumped tailwindcss to ^4.3.3 in the root and packages/ui manifests.

CSS syntax (globals.css)

  • !important modifier moved to suffix position — !mt-0mt-0! (Tailwind v4 convention).
  • @utility container { … } block repositioned above @layer components (v4 ordering requirement).

Logical property class renames (335 files)

The codemod replaced deprecated directional aliases with their CSS logical property equivalents across all component files, registry components, and compiled JSON registry outputs:

Before After Meaning
start-px inset-s-px inline-start offset
end-0 inset-e-0 inline-end offset
end-0.5 inset-e-0.5 inline-end offset

Files affected

  • apps/ui/registry/default/ui/combobox, alert, autocomplete, calendar, command, dialog, drawer, group, sheet, sidebar, toggle-group
  • apps/ui/registry/default/particles/ — various particle components
  • apps/ui/public/r/ — compiled JSON registry entries
  • apps/origin/registry/default/ — all origin UI and component files (~200+ files)
  • apps/examples/calcom/ — example app components
  • packages/ui/src/components/ — published package components
  • packages/ui/src/styles/globals.css — base stylesheet

Notes

  • Biome's useSortedClasses lint rule flagged the reordered class names introduced by the codemod. All sort violations were auto-fixed with biome check --write --unsafe before committing so the pre-commit hook passes cleanly.
  • No logic, props, or component APIs were changed.

Testing

  • Pre-commit Biome check passes with exit code 0.
  • Visual regression should be checked in apps/ui and apps/origin dev servers — all affected classes are logical-property equivalents and should render identically in LTR layouts.

@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown

@karticme is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant