coracle/flotilla
1
6
Fork 24
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

163-tailwind-v4-upgrade #166

Closed
priyanshu_bharti wants to merge 3 commits from priyanshu_bharti/flotilla:163-tailwind-v4-upgrade into dev
pull from: priyanshu_bharti/flotilla:163-tailwind-v4-upgrade
merge into: coracle:dev
Conversation 3 Commits 3 Files Changed 49
+521 -521
priyanshu_bharti commented 2026-04-07 17:40:30 +00:00
Contributor
Copy Link
Copy Source

PR description

Closes #163

This PR upgrades the project to Tailwind CSS v4 and updates the related styling stack to keep the UI behavior consistent.

What changed

Upgraded Tailwind CSS from v3 to v4.
Updated DaisyUI to v5 for Tailwind v4 compatibility.
Switched PostCSS integration to the new Tailwind v4 plugin setup.
Migrated global style/config patterns required by Tailwind v4.
Updated utility class usage across components for v4 compatibility.

Validation done

Lint passed.
Type check passed with zero errors/warnings.
Production build passed.
Local dev run verified.
Scope note

No intentional feature change.
Changes are focused on migration and compatibility cleanup only.

image.png

No intentional UI changes, visual sanity check only.

## PR description Closes #163 This PR upgrades the project to Tailwind CSS v4 and updates the related styling stack to keep the UI behavior consistent. ## What changed Upgraded Tailwind CSS from v3 to v4. Updated DaisyUI to v5 for Tailwind v4 compatibility. Switched PostCSS integration to the new Tailwind v4 plugin setup. Migrated global style/config patterns required by Tailwind v4. Updated utility class usage across components for v4 compatibility. ## Validation done Lint passed. Type check passed with zero errors/warnings. Production build passed. Local dev run verified. Scope note No intentional feature change. Changes are focused on migration and compatibility cleanup only. ![image.png](/attachments/52b069bd-0b4d-4bbb-973a-4c24baf5c151) No intentional UI changes, visual sanity check only.
image.png
71 KiB
hodlbod commented 2026-04-07 17:45:09 +00:00
Owner
Copy Link
Copy Source

Go ahead and rebase and fix conflicts.

Go ahead and rebase and fix conflicts.
priyanshu_bharti added 3 commits 2026-04-07 18:14:57 +00:00
chore(tailwind): upgrade dependencies and postcss plugin 85aa89d1b2
refactor(styles): migrate Tailwind v4 base config and globals 1fb96c4f6a
refactor(ui): align component utility classes with Tailwind v4 212a962fba
priyanshu_bharti force-pushed 163-tailwind-v4-upgrade from 6722d5717f to 212a962fba 2026-04-07 18:14:57 +00:00 Compare
hodlbod reviewed 2026-04-07 19:47:20 +00:00
src/app.css
@@ -102,0 +106,4 @@
padding-top: var(--sait);
padding-right: var(--sair);
padding-bottom: var(--saib);
padding-left: var(--sail);
hodlbod commented 2026-04-07 19:45:59 +00:00
Owner
Copy Link
Copy Source

Why switch away from @apply here?

Why switch away from `@apply` here?
priyanshu_bharti commented 2026-04-07 20:31:40 +00:00
Author
Contributor
Copy Link
Copy Source

Hii @hodlbod
Tried reverting this block back to @apply, but Tailwind v4 fails with Cannot apply unknown utility class py-sai during build, so I kept explicit safe-area declarations here to keep the build stable.

The reason is Tailwind v4 fundamentally changed how @apply works. It can no longer apply custom CSS classes (like .py-sai) that are just written in standard CSS syntax inside a file. In v4, @apply is strictly meant for built-in Tailwind utilities (like bg-red-500) or utilities explicitly registered via the new v4 @utility directive.

Hii @hodlbod Tried reverting this block back to @apply, but Tailwind v4 fails with Cannot apply unknown utility class py-sai during build, so I kept explicit safe-area declarations here to keep the build stable. The reason is Tailwind v4 fundamentally changed how @apply works. It can no longer apply custom CSS classes (like .py-sai) that are just written in standard CSS syntax inside a file. In v4, @apply is strictly meant for built-in Tailwind utilities (like bg-red-500) or utilities explicitly registered via the new v4 @utility directive.
priyanshu_bharti marked this conversation as resolved
priyanshu_bharti requested review from hodlbod 2026-04-07 20:46:25 +00:00
hodlbod commented 2026-04-07 22:33:21 +00:00
Owner
Copy Link
Copy Source

Thanks for doing this, I had enough questions I went ahead and ran the migration myself (daisy apparently changed the default dark theme; I also wanted to migrate the important stuff as well). See 8e2dd8b2

Thanks for doing this, I had enough questions I went ahead and ran the migration myself (daisy apparently changed the default dark theme; I also wanted to migrate the important stuff as well). See 8e2dd8b2
hodlbod closed this pull request 2026-04-07 22:33:21 +00:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
hodlbod
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#166
Delete Branch "priyanshu_bharti/flotilla:163-tailwind-v4-upgrade"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?