Skip to content

build: tailwind upgrade v3 → v4#552

Open
libby-correctiv wants to merge 13 commits into
mainfrom
build/tailwind-upgrade
Open

build: tailwind upgrade v3 → v4#552
libby-correctiv wants to merge 13 commits into
mainfrom
build/tailwind-upgrade

Conversation

@libby-correctiv
Copy link
Copy Markdown
Contributor

@libby-correctiv libby-correctiv commented May 6, 2026

Title

Upgrade Tailwind to v4

Describe your changes

  • Upgrade Tailwind to v4
  • Migrate from PostCSS plugin to Vite plugin
  • Migrate custom tw theme from js → css - tailwind.config.js to tailwind.css
  • Minor changes to tw class names
  • Change !important flags in @apply utilities to !
  • add @reference to index.css in CSS Modules and <style> blocks
  • Change StripePaymentForm to use new tw CSS variables and delete old theme.js (previous workaround to get tw custom theme classes into Stripe iframe)

Checklist before requesting a review

  • Done a self-review of my code
  • Run yarn check and addressed any problems
  • PR doesn't have merge conflicts

Checklist before merging

  • Translations for all new i18n strings

@libby-correctiv libby-correctiv force-pushed the build/tailwind-upgrade branch from a24e912 to 91465c5 Compare May 11, 2026 13:06
@libby-correctiv libby-correctiv changed the title Build/tailwind upgrade (build) tailwind upgrade May 13, 2026
@libby-correctiv libby-correctiv changed the title (build) tailwind upgrade build: upgrade tailwind v3 to v4 May 13, 2026
@libby-correctiv libby-correctiv changed the title build: upgrade tailwind v3 to v4 build: tailwind upgrade v3 → v4 May 13, 2026
@libby-correctiv libby-correctiv requested a review from wpf500 May 13, 2026 08:01
Copy link
Copy Markdown
Member

@wpf500 wpf500 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a really great PR, very thorough and clean and you've found good solutions for all the problems.

I found just two visual regressions when I looked:

  1. AppButtonGroup: it seems to work in Histoire but not in the frontend itself. Note in the screenshot that the button borders don't align.

Doesn't work:
Image

Works:
Image

  1. The dialog in the form builder has too much spacing. This one is strange and I couldn't really figure out what was happening.

Too much spacing:
Image

Correct spacing
Image

--

Do you know what the button group one could be about? I wonder if the group-btns styling isn't being applied in the frontend for some reason.

--text-3_5xl: 2rem;

/* Transition properties??? i cant see where this is used */
--transition-width: width;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm this one is strange. Where did this come from?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants