socialify icon indicating copy to clipboard operation
socialify copied to clipboard

Upgraded tailwindcss and daisyui

Open aleguy02 opened this issue 7 months ago β€’ 5 comments

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

    • Updated various UI components with new and adjusted Tailwind CSS utility classes for improved layout, spacing, and color consistency.
    • Enhanced checkbox, input, select, and button styles for a more cohesive appearance.
    • Refined background gradients, card colors, and footer text color for better visual clarity.
    • Improved GitHub corner animation and responsive behavior.
  • Chores

    • Upgraded Tailwind CSS and DaisyUI dependencies to latest versions.
    • Updated PostCSS configuration and removed unnecessary dependencies.
    • Removed the Tailwind CSS configuration file in favor of defaults or new plugin-based configuration.
  • New Features

    • Introduced new utility classes for custom backgrounds and GitHub animation effects.
  • Bug Fixes

    • Added compatibility fix for Tailwind CSS v4 border color changes to maintain previous appearance.

aleguy02 avatar Jul 01 '25 00:07 aleguy02

πŸ¦‹ Changeset detected

Latest commit: 00e1192456548ec97e73497d958310b4519143b6

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

changeset-bot[bot] avatar Jul 01 '25 00:07 changeset-bot[bot]

Deploy Preview for github-socialify ready!

Name Link
Latest commit 00e1192456548ec97e73497d958310b4519143b6
Latest deploy log https://app.netlify.com/projects/github-socialify/deploys/686331121a090000080a3f15
Deploy Preview https://deploy-preview-631--github-socialify.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Jul 01 '25 00:07 netlify[bot]

Walkthrough

This 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

File(s) Change Summary
.changeset/nice-bats-sleep.md Added changeset documenting Tailwind CSS and DaisyUI upgrade.
package.json, postcss.config.js Upgraded Tailwind CSS and DaisyUI; added @tailwindcss/postcss; removed autoprefixer; simplified PostCSS plugins.
tailwind.config.ts Removed entire Tailwind CSS configuration file.
app/globals.css Refactored for Tailwind v4; added compatibility fixes; introduced new utility classes and modular animation logic.
src/components/configuration/checkBoxWrapper.tsx Updated checkbox input classes for primary color, border color, and checked state.
src/components/configuration/config.tsx, src/components/preview/preview.tsx Changed background color classes and added spacing utility.
src/components/configuration/inputWrapper.tsx, src/components/configuration/selectWrapper.tsx Added vertical margin to label spans; updated select element classes.
src/components/configuration/repositoryInput.tsx, src/components/repo/repo.tsx Updated flexbox and focus outline utility classes for input/button elements.
src/components/error/error.tsx, src/components/repo/repo.tsx Changed gradient and flex utility classes.
src/components/footer/footer.tsx Added gray text color utility to footer.
src/components/header/header.tsx Adjusted flexbox and alignment classes for responsive layout.

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

πŸ‡βœ¨
Upgrades swirl in CSS delight,
Tailwind and DaisyUI now shining bright.
Classes refactored, configs swept away,
Fresh backgrounds and gradients come out to play.
With outlines and borders all set just rightβ€”
This bunny hops forward, styling the night!
πŸŒ™πŸŽ¨

✨ Finishing Touches
  • [ ] πŸ“ Generate Docstrings

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.

❀️ Share
πŸͺ§ Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Jul 01 '25 00:07 coderabbitai[bot]

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 avatar Jul 14 '25 02:07 aleguy02

@aleguy02 thanks for the update. It can wait.

wei avatar Jul 15 '25 11:07 wei