Skip to content

PR: upgrade tailwind from v3 to v4 - #152

Merged
seshagiriprabhu merged 14 commits into
mainfrom
151-upgrade-tailwind-from-v3-to-v4
Aug 10, 2026
Merged

PR: upgrade tailwind from v3 to v4#152
seshagiriprabhu merged 14 commits into
mainfrom
151-upgrade-tailwind-from-v3-to-v4

Conversation

@seshagiriprabhu

@seshagiriprabhu seshagiriprabhu commented Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

  • Migrate Tailwind CSS from v3 to v4 — replaced JS config with CSS-based @theme, switched to @tailwindcss/postcss and @tailwindcss/cli, deleted tailwind.config.cjs
  • Replace removed v3 border-opacity-* and bg-opacity-* utilities with v4's color/opacity modifier syntax
  • Restore v3 default border color (#e5e7eb) since v4 changed the default to currentColor
  • Fix outline-* utilities rendering visible outlines in v4
  • Fix SSR Suspense error by replacing lazy imports in Tabs
  • Upgrade ESLint from v9 to v10
  • Move component stories from src/components/ to stories/components/
  • Remove all shadow utilities from components for flat design
  • Fix tab label centering in HorizontalNavigator and Tabs
  • Soften danger color and fix warning/success solid text contrast
  • Replace hand-written HTML tables with <ArgTypes /> in component MDX docs
  • Add striped row CSS for docs tables in Storybook

Breaking Changes

  • Consumers using tailwind.config.cjs for theme extension will need to migrate to CSS-based config
  • tailwind-theme.js is still bundled in dist for consumer use

@seshagiriprabhu
Migrate Tailwind CSS from v3 to v4
dfebc41 
Replace JS config with CSS-based @theme in src/style.css, switch to
@tailwindcss/postcss and @tailwindcss/cli, remove autoprefixer and
postcss-nesting, and delete tailwind.config.cjs.
@seshagiriprabhu
Replace removed v3 opacity utilities with v4 color/opacity syntax
114688e 
Add BORDER_COLOR_SOLID_MAP and BORDER_COLOR_OUTLINE_MAP with baked-in
opacity modifiers for Alert, and migrate bg-opacity/border-opacity
usage in Checkbox, Drawer, and Popover to the v4 color/opacity syntax.
@seshagiriprabhu
Move component stories from src/components/ to stories/components/
f35b772 
Relocate Accordion, Button, HorizontalNavigator, PinInput, and Radio
stories to match the existing stories directory structure. Update
imports and remove the now-unused src/components stories glob from
Storybook config.
@seshagiriprabhu
Upgrade ESLint from v9 to v10
f4ee1e4
@seshagiriprabhu
fix(prettier): Applied format fix
ce47a4b
@seshagiriprabhu
Update README for Tailwind CSS v4 setup instructions
51599a3
@seshagiriprabhu seshagiriprabhu self-assigned this Aug 10, 2026
@seshagiriprabhu seshagiriprabhu added enhancement New feature or request dependencies Pull requests that update a dependency file labels Aug 10, 2026
@seshagiriprabhu seshagiriprabhu linked an issue Aug 10, 2026 that may be closed by this pull request
Upgrade tailwind from v3 to v4 #151
Closed
@seshagiriprabhu
Fix SSR Suspense error by replacing lazy imports in Tabs
0b039ce 
Replace React.lazy() with direct imports for HorizontalNavigator and
VerticalNavigator to avoid Suspense boundary errors during SSR in
React 19 / Next.js 16. Also update README with Tailwind v4 setup.
@seshagiriprabhu
Fix tab label centering and icon spacing in navigator items
666e096 
Center-justify tab labels and replace fixed-width icon container
with inline-flex so empty icons don't reserve space and shift
text off-center.
@seshagiriprabhu
Remove all shadow utilities from components for flat design
0544e77 
Shadows are not customizable across different color themes,
so all shadow-* classes are removed to keep components flat.
@seshagiriprabhu
Use max-w-full instead of fixed width for code blocks in stories
7c23c7c
@seshagiriprabhu
Soften danger color to less intense red across all color maps
f976149
@seshagiriprabhu
Replace hand-written HTML tables with ArgTypes in component MDX docs
986528c
@seshagiriprabhu
Add striped row CSS for docs tables in Storybook
b40e7fa
@seshagiriprabhu
Use dark text on warning and adjust success/danger solid text colors
bcc484b
@traboda traboda deleted a comment from aws-amplify-ap-south-1 Bot Aug 10, 2026
@aws-amplify-ap-south-1

aws-amplify-ap-south-1 Bot commented Aug 10, 2026

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-152.d2qkyvw8y8fzvq.amplifyapp.com

@seshagiriprabhu
seshagiriprabhu merged commit a1b4e87 into main Aug 10, 2026
6 checks passed
@seshagiriprabhu
seshagiriprabhu deleted the 151-upgrade-tailwind-from-v3-to-v4 branch August 10, 2026 07:46
@seshagiriprabhu

seshagiriprabhu commented Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

Chaya UI — Upgrade Changelog (beta.87 → beta.90)

Major version bumps

Package From To
tailwindcss ^3.2.4 ^4.3.3
react (peer) ^18.2.0 ^18.2.0 || ^19.0.0
typescript ^4.9.4 ^5.9.3
eslint 8.22.0 ^10.8.1
storybook ^8.2.2 ^10.5.7
rollup ^3.10.0 ^4.62.4
vite ^5.3.3 ^6.4.3
clsx ^1.2.1 ^2.1.1
color ^4.2.3 ^5.0.3
flatten-anything ^3.0.5 ^4.0.2
tailwind-merge ^2.1.0 ^3.6.0

Added

  • @tailwindcss/cli, @tailwindcss/postcss — Tailwind v4 tooling
  • date-fns, react-intersection-observer — runtime deps
  • prettier, husky, lint-staged — code formatting & pre-commit hooks
  • typescript-eslint, eslint-config-prettier, globals — flat ESLint config

Removed

  • nanoid, immer, loadash, react-waypoint, ts-deepmerge
  • autoprefixer, postcss-nesting — replaced by Tailwind v4 internals
  • storybook-dark-mode, eslint-config-airbnb-typescript
  • Several @storybook/* packages consolidated under v10

Key changes

  • Tailwind v3 → v4: style.scss replaced with style.css using @import "tailwindcss" and @theme directives; tailwind.config.cjs removed
  • ESLint flat config: .eslintrc.json replaced with eslint.config.mjs
  • Pre-commit hooks: Husky + lint-staged runs Prettier and ESLint on staged files
  • React 19 support: peer deps now accept both React 18 and 19
  • Runtime deps restructured: Radix, clsx, color, cva, papaparse, tailwind-merge moved from devDependencies to dependencies
  • Storybook v10: addon list consolidated, MDX docs rewritten with ArgTypes

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

Reviewers

No reviews

Assignees

@seshagiriprabhu seshagiriprabhu

Labels

dependencies Pull requests that update a dependency file enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Upgrade tailwind from v3 to v4

1 participant

@seshagiriprabhu