Migrate to tailwind v4 #564
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for deltaio-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Replace @astrojs/tailwind with @tailwindcss/vite plugin - Convert JavaScript config to CSS-first approach - Replace all theme() function calls with CSS variables - Update 25+ components with new CSS architecture - Create comprehensive tailwind.css with @theme and @Utility directives - Fix linting error: remove unused __dirname variable Signed-off-by: Yufa <[email protected]>
- Update all custom spacing classes (gap-sm, px-sm, py-xs, etc.) to standard Tailwind classes - Replace custom utilities with standard spacing scale (gap-3, px-3, py-2, etc.) - Update 15+ components across delta-theme and delta-site packages - Maintain backward compatibility with custom theme variables - Fix menu, header, form, footer, and content components - Ensure all styling works with Tailwind CSS v4 Signed-off-by: Yufa <[email protected]>
- Update global CSS rule to exclude elements with no-underline class - Add explicit @Utility no-underline definition for Tailwind CSS v4 - Fix menu links and other elements that should not have underlines - Ensure proper CSS specificity for text-decoration-line: none Signed-off-by: Yufa <[email protected]>
…port "tailwindcss" and moved all theme configuration into the @theme block using CSS custom properties - Added extensive @Utility declarations and responsive classes using CSS media queries - Replace screen() function syntax (deprecated) with standard CSS media queries - Replaced custom arbitrary value with closest standard Tailwind values Signed-off-by: Yufa <[email protected]>
Signed-off-by: Yufa <[email protected]>
…omputedStyle().columnGap sometimes didn't reflect it (especially when conflicting with the Grid component's default column-gap), so we fixed it by adding explicit gap: 2rem in CSS, improving gap parsing to handle both columnGap and gap with unit conversion, and using DOM measurement as the primary method to measure the actual rendered distance between items. Signed-off-by: Yufa <[email protected]>
01001101CK
force-pushed
the
migrate-to-tailwind-v4
branch
from
98e7c05 to
7afcd18
Compare
jakebellacera
requested changes
Nov 2, 2025
Collaborator
jakebellacera
left a comment
jakebellacera
left a comment
There was a problem hiding this comment.
Overall, amazing work! Thank you for doing this. However, the changes should feel like a refactor under the hood, and yet I'm seeing some styling differences due to the behavior of tailwind v4 vs v3. Once you get these fixes addressed, we should be in a good spot to merge!
Signed-off-by: Yufa <[email protected]>
…d colors with CSS variables, simplify link styling - Fix Tailwind v4 text utilities, replace hardcoded colors with variables Signed-off-by: Yufa <[email protected]>
- Moved subtitle-container styles from Section component to global tailwind.css for consistent spacing - Removed conflicting hero-subtitle-text style from HeroSection component - Reduced heading specificity in Typography by wrapping selectors with :where() for utility class overrides - Added text-white utility to tailwind.css for footer menu styling - Moved text-h4 utility to @layer utilities block for proper Tailwind v4 layering Signed-off-by: Yufa <[email protected]>
- Use corresponding variable --breakpoint-md instead of max-w-screen-md Signed-off-by: Yufa <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What changed?
Migrate site to tailwind v4
Screenshot