Upgraded tailwindcss and daisyui #631
Conversation
tailwindcss: 3.4 to 4.1; daisyui: 4.12 to 5.0
🦋 Changeset detectedLatest commit: 00e1192 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for github-socialify ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis update upgrades Tailwind CSS and DaisyUI dependencies, refactors CSS to align with Tailwind v4, and removes the custom Tailwind configuration. Several React components receive updated utility classes for styling, spacing, and layout. PostCSS configuration is simplified, and new utility classes and compatibility fixes are introduced in the global CSS. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReactComponent
participant CSS/UtilityClasses
participant TailwindCSS
participant DaisyUI
User->>ReactComponent: Interacts with UI
ReactComponent->>CSS/UtilityClasses: Applies updated utility classes
CSS/UtilityClasses->>TailwindCSS: Uses Tailwind v4 utilities
CSS/UtilityClasses->>DaisyUI: Uses DaisyUI components
TailwindCSS-->>ReactComponent: Provides updated styles
DaisyUI-->>ReactComponent: Provides updated component styles
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (2)
src/components/configuration/repositoryInput.tsx (1)
69-87: Replace non-standardoutline-hiddenwith Tailwind’soutline-noneYour custom focus styles using
outline-hiddenaren’t defined in the repo (notailwind.config.jsor plugin registering them was found), so they will be ignored and remove your accessibility affordance. Please update:• File:
src/components/configuration/repositoryInput.tsx(lines 69–87)
– Changefocus-within:outline-hidden→focus-within:outline-none
– Changefocus:outline-hidden→focus:outline-noneSuggested diff:
- focus-within:outline-hidden + focus-within:outline-none ... - focus:outline-hidden + focus:outline-nonesrc/components/repo/repo.tsx (1)
38-69:bg-linear-to-bris undefined – wasbg-gradient-to-brintended?
bg-linear-to-bris not supplied by Tailwind nor declared inapp/globals.css(onlybg-linear-to-rexists).
Result: the heading will lose its gradient and render as plain transparent text.-<h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-linear-to-br from-secondary to-error"> +<h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-secondary to-error">Also double-check the other renamed utilities (
shrink-0,grow) – these look correct for Tailwind v4.
🧹 Nitpick comments (4)
src/components/footer/footer.tsx (1)
8-8: Avoid stacking two conflicting text-color utilities
text-base-content(from DaisyUI) andtext-gray-400both setcolor.
Because they share the same specificity the winner depends on the generated CSS order, which is out of your control and may flip after every Tailwind build. Pick one (preferably the DaisyUI token so the footer adapts to theme changes) and drop the other.-<footer className="footer footer-center p-2 text-base-content text-gray-400 font-semibold no-screenshot"> +<footer className="footer footer-center p-2 text-base-content font-semibold no-screenshot">.changeset/nice-bats-sleep.md (1)
1-6: Consider expanding the changeset descriptionIncluding a one-liner about the handful of class-name tweaks (e.g.
bg-neutral➜bg-gray-700) helps consumers understand why the patch matters beyond the bare dependency bump.src/components/preview/preview.tsx (1)
85-86: Same theme-token concern as in ConfigHard-coding
bg-gray-700divorces the button card from DaisyUI’s theming.
Consider reverting to a theme token (bg-neutral,bg-base-200, etc.) to keep consistency.app/globals.css (1)
13-19: Border compatibility rule hard-codes a CSS variable that may not exist.
var(--color-gray-200, currentcolor)falls back tocurrentColor, not Tailwind’s#e5e7eb.
If the custom property isn’t defined globally you’ll reproduce the v4 behaviour you were trying to avoid.
Recommend resolving to the actual hex value:border-color: #e5e7eb; /* Tailwind gray-200 */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (19)
.playwright/languageSelection.spec.ts-snapshots/Language-Selection-Functionality-Default-Pre--89479-dropdown-is-visible-when-language-1-is-in-URL-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/languageSelection.spec.ts-snapshots/Language-Selection-Functionality-Default-Pre--89479-dropdown-is-visible-when-language-1-is-in-URL-1-chromium-linux.pngis excluded by!**/*.png.playwright/languageSelection.spec.ts-snapshots/Language-Selection-Functionality-Language-Sel-27a2c-ars-positioned-correctly-under-SVG-Logo-input-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/languageSelection.spec.ts-snapshots/Language-Selection-Functionality-Language-Sel-27a2c-ars-positioned-correctly-under-SVG-Logo-input-1-chromium-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-error-404-page-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-landing-page-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-preview-config-page-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-preview-config-page-1-chromium-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-preview-config-page-2-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-is-consistent-for-preview-config-page-2-chromium-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.pngis excluded by!**/*.png.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/components/configuration/__snapshots__/config.test.tsx.snapis excluded by!**/*.snapsrc/components/configuration/__snapshots__/repositoryInput.test.tsx.snapis excluded by!**/*.snapsrc/components/error/__snapshots__/error.test.tsx.snapis excluded by!**/*.snapsrc/components/footer/__snapshots__/footer.test.tsx.snapis excluded by!**/*.snapsrc/components/header/__snapshots__/header.test.tsx.snapis excluded by!**/*.snapsrc/components/repo/__snapshots__/repo.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (15)
.changeset/nice-bats-sleep.md(1 hunks)app/globals.css(1 hunks)package.json(1 hunks)postcss.config.js(1 hunks)src/components/configuration/checkBoxWrapper.tsx(1 hunks)src/components/configuration/config.tsx(1 hunks)src/components/configuration/inputWrapper.tsx(1 hunks)src/components/configuration/repositoryInput.tsx(2 hunks)src/components/configuration/selectWrapper.tsx(2 hunks)src/components/error/error.tsx(1 hunks)src/components/footer/footer.tsx(1 hunks)src/components/header/header.tsx(1 hunks)src/components/preview/preview.tsx(2 hunks)src/components/repo/repo.tsx(3 hunks)tailwind.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tailwind.config.ts
🔇 Additional comments (11)
src/components/configuration/inputWrapper.tsx (1)
59-61: LGTM – small spacing tweak improves readabilityThe extra
my-1nicely separates the label from its surroundings without side-effects.src/components/configuration/config.tsx (1)
138-138: Nice!gap-4simplifies spacingReplacing manual margins with a grid gap keeps the layout tidy.
src/components/preview/preview.tsx (1)
102-103:shadow-smlowers elevation – verify visual intentThe old
shadowhad a stronger elevation than the newshadow-sm. Double-check that the dropdown is still visually distinct from the background, especially on high-contrast themes.src/components/configuration/selectWrapper.tsx (2)
25-28: LGTM: Consistent spacing adjustment for label text.The addition of
my-1provides appropriate vertical margin to the label text, maintaining visual consistency with other form components in the upgrade.
40-40: No remainingselect-borderedclasses found—removal is safeA global search across all *.tsx, *.ts, *.jsx, and *.js files returned zero occurrences of
select-bordered. In DaisyUI v5, theselectcomponent now includes borders by default, so removingselect-bordereddoes not affect styling. No further changes are needed.postcss.config.js (1)
1-5: LGTM: Correct PostCSS configuration for Tailwind CSS v4.The consolidation to use
@tailwindcss/postcssinstead of separatetailwindcssandautoprefixerplugins aligns with Tailwind CSS v4's new architecture and is the recommended approach.package.json (2)
63-63: Verify new dependency version.The addition of
@tailwindcss/postcssat version^4.1.11is correct for the Tailwind CSS v4 upgrade.
69-69: Confirmed compatibility: Tailwind CSS 4.1.11 & daisyUI 5.0.43 are both latest stable with no known issues.
- Tailwind CSS 4.1.11 is the current stable v4 release.
- daisyUI v5.0.43 is the latest v5 release, explicitly designed for Tailwind v4.
- Official docs and release notes report full compatibility and no breaking changes between these versions.
No further action required. Proceed with these versions.
src/components/error/error.tsx (2)
16-16: Gradient utility class verified as correctThe Tailwind CSS v4 class
bg-linear-to-tis the proper utility for a top-direction linear gradient. No change is required.File: src/components/error/error.tsx
Line: 16
12-12: Utility Class Migration VerifiedBoth updated utility classes align with Tailwind CSS v4:
- In
src/components/error/error.tsx, the<main>element’s use ofgrowcorrectly replacesflex-grow(setsflex-grow: 1;).- The
bg-linear-to-tclass on the<h1>matches the v4 gradient direction utilities (applies a bottom-to-top linear gradient).No further changes needed—these follow the official Tailwind v4 migration guidelines.
src/components/configuration/checkBoxWrapper.tsx (1)
28-28: LGTM: Comprehensive styling update for DaisyUI v5.The addition of
checkbox-primary border-gray-800 checked:border-transparent bg-base-100classes addresses the significant changes in DaisyUI v5 mentioned in the PR objectives. These explicit style declarations help maintain visual consistency after the upgrade.
| <div className="card w-96 max-w-[90vw] bg-gray-700 text-primary-content shadow-xl"> | ||
| <div className="card-body gap-4"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Switching from DaisyUI token to raw Tailwind color breaks theme awareness
bg-neutral automatically adapts to light/dark themes via DaisyUI.
Hard-coding bg-gray-700 freezes the colour and may clash with custom themes users pick in the future. If you only wanted to mimic the old neutral value, prefer bg-base-200 / bg-neutral or configure the DaisyUI theme instead.
-<div className="card w-96 max-w-[90vw] bg-gray-700 text-primary-content shadow-xl">
+<div className="card w-96 max-w-[90vw] bg-neutral text-neutral-content shadow-xl">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="card w-96 max-w-[90vw] bg-gray-700 text-primary-content shadow-xl"> | |
| <div className="card-body gap-4"> | |
| <div className="card w-96 max-w-[90vw] bg-neutral text-neutral-content shadow-xl"> | |
| <div className="card-body gap-4"> |
🤖 Prompt for AI Agents
In src/components/configuration/config.tsx around lines 137 to 138, the
background color class uses a fixed Tailwind color bg-gray-700, which breaks
theme awareness and may clash with user-selected DaisyUI themes. Replace
bg-gray-700 with a DaisyUI token like bg-neutral or bg-base-200 to ensure the
background color adapts automatically to light/dark modes and respects custom
themes.
There was a problem hiding this comment.
I'm ignoring this suggestion for now because I made this choice intentionally to stay visually similar to the old styling but worth noting.
There was a problem hiding this comment.
@aleguy02 Understood! That makes perfect sense given you're prioritizing visual consistency during the major library upgrades. Maintaining the existing look and feel is often more important than following every semantic best practice, especially during migration phases.
✏️ Learnings added
Learnt from: aleguy02
PR: wei/socialify#631
File: src/components/configuration/config.tsx:137-138
Timestamp: 2025-07-26T04:42:01.537Z
Learning: In the socialify project, during TailwindCSS and DaisyUI upgrades, the maintainer aleguy02 intentionally chose to use hard-coded Tailwind color classes like `bg-gray-700` instead of DaisyUI semantic tokens to maintain visual similarity to the old styling, prioritizing consistency over theme awareness during the migration.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades Tailwind CSS from version 3.4 to 4.1 and DaisyUI from 4.12 to 5.0 to align with new styling defaults and updated utility class names.
- Removed the custom Tailwind CSS configuration file in favor of plugin-based/default behavior.
- Adjusted class names across components (e.g. from bg-gradient-to-br to bg-linear-to-br, flex-grow to grow) to account for visual changes with the upgrade.
- Updated package.json and PostCSS configuration to support the new dependency versions and syntax.
Reviewed Changes
Copilot reviewed 21 out of 34 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Removed; migration from custom config to default plugin-based configuration. |
| src/components/repo/repo.tsx | Adjusted gradient and spacing utility classes for updated styling. |
| src/components/preview/preview.tsx | Modified background and dropdown shadow styling. |
| src/components/header/header.tsx | Tweaked layout classes for improved header responsiveness. |
| src/components/footer/footer.tsx | Updated footer text color and spacing styles. |
| Various snapshot files | Updated snapshots to reflect the new class names and styling changes. |
| src/components/configuration/* | Updated input, select, and checkbox classes to use new Tailwind CSS utilities. |
| postcss.config.js | Adjusted plugin configuration to use '@tailwindcss/postcss'. |
| package.json | Upgraded dependency versions and removed unneeded ones. |
| app/globals.css | Revised global styles including new @import and @plugin directives. |
| .changeset/nice-bats-sleep.md | Provided release note for the upgrade. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (4)
src/components/repo/repo.tsx:38
- Verify that changing the class from 'bg-gradient-to-br' to 'bg-linear-to-br' produces the intended gradient effect, in line with the design updates.
<h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-linear-to-br from-secondary to-error">
src/components/configuration/repositoryInput.tsx:77
- Confirm that 'focus:outline-hidden' is the correct Tailwind utility in version 4.1 to remove the focus outline, and that it behaves as expected across browsers.
className="join-item input input-sm input-bordered grow text-sm font-bold focus:outline-hidden border-0 focus:ring-0"
postcss.config.js:3
- Ensure that replacing the previous setup (with tailwindcss and autoprefixer) with '@tailwindcss/postcss' handles all required PostCSS transformations and that no additional plugins are needed.
'@tailwindcss/postcss': {},
There was a problem hiding this comment.
Could you make sure the input background colors match up?
There was a problem hiding this comment.
I'm not quite sure how to test/address this. It looks like the input background color is white on all the tests but on local testing its a dark gray. I checked on Chrome and Brave, both based on Chromium. Will look deeper into this soon.
There was a problem hiding this comment.
I've been able to dedicate some more time now that my classes are over. I'm running into a new issue where the e2e font tests are failing with the error "Failed to fetch font". It's not just in the tests; I tried reaching wei/socialify/image?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark through the dev server and got the error message. When I remove "image" from the slug it also give the same error message in the logs but the page renders fine.
I tried this in a Codespace and locally and got the error both times. Unfortunately, this is bottlenecking my update because I can't update the test snapshots.
There was a problem hiding this comment.
Please make sure the border radius of the config container matches, and the width of the inputs should be the same~
There was a problem hiding this comment.
Fixed this, but I'm waiting to fix the above issue before making the commit to avoid too many commits
|
Hello, I wanted to give a transparent update. I have my plate a little full with the MLH fellowship, school, and applying to internships at the moment so I haven't made the time to work on this. However, let me know if you want this PR merged in urgently (I believe at least 1 other issue depends on this PR) and I'll make time to work on it this week :) |
|
@aleguy02 thanks for the update. It can wait. |
Upgraded tailwindcss from 3.4 to 4.1 and daisyui from 4.12 to 5.0. Certain utility classes experienced visual changes from the upgrade, so I changed classnames to try to match the original styling, except for the checkboxWrapper, which was dramatically changed in the daisyui update.
Closes #501
Summary by CodeRabbit
Style
Chores
New Features
Bug Fixes