github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-07-16 06:42:23 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

[PR #2341] [MERGED] feat(frontend): upgrade Tailwind CSS from v3 to v4 #9914

New Issue
Closed
opened 2026-04-23 09:17:08 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-23 09:17:08 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2341
Author: @tink-bot
Created: 3/3/2026
Status: ✅ Merged
Merged: 3/3/2026
Merged by: @kolaente

Base: main ← Head: feat-tailwind-v4

📝 Commits (3)

  • 0c28179 feat(frontend): upgrade Tailwind CSS from v3 to v4
  • e3c0a79 fix(frontend): use semantic class instead of targeting Tailwind utility
  • 867e550 fix(frontend): use mbs-2 utility class instead of scoped CSS

📊 Changes

14 files changed (+393 additions, -313 deletions)

View changed files

📝 frontend/.stylelintrc.json (+5 -1)
📝 frontend/package.json (+2 -1)
📝 frontend/pnpm-lock.yaml (+368 -275)
📝 frontend/src/App.vue (+2 -0)
📝 frontend/src/components/misc/Notification.vue (+2 -5)
📝 frontend/src/components/project/partials/Filters.vue (+1 -1)
📝 frontend/src/components/tasks/partials/Heading.vue (+2 -2)
📝 frontend/src/components/tasks/partials/KanbanCard.vue (+3 -3)
📝 frontend/src/histoire.setup.ts (+1 -0)
📝 frontend/src/styles/global.scss (+0 -4)
➕ frontend/src/styles/tailwind.css (+3 -0)
📝 frontend/src/views/tasks/TaskDetailView.vue (+2 -2)
➖ frontend/tailwind.config.js (+0 -17)
📝 frontend/vite.config.ts (+2 -2)

📄 Description

Summary

  • Upgrades Tailwind CSS from v3.4.19 to v4.2.1 using the new CSS-first configuration
  • Switches from PostCSS plugin to @tailwindcss/vite for better performance
  • Uses granular imports to skip preflight (Bulma provides the CSS reset)
  • Updates class prefix from tw- to tw: across all 5 Vue files that use Tailwind utilities

Changes

  • New: frontend/src/styles/tailwind.css — dedicated CSS entry with prefix(tw), importing only theme + utilities (no preflight)
  • Deleted: frontend/tailwind.config.js — replaced by CSS directives
  • Updated: frontend/vite.config.ts — tailwindcss moved from PostCSS plugins to Vite plugins via @tailwindcss/vite
  • Updated: frontend/src/App.vue and frontend/src/histoire.setup.ts — import the new CSS file
  • Updated: frontend/src/styles/global.scss — removed @tailwind directives
  • Updated: frontend/.stylelintrc.json — swapped @tailwind for v4 at-rules (@theme, @utility, @custom-variant, @source, @reference)
  • Updated: 5 Vue files — tw-foo → tw:foo prefix (Notification, KanbanCard, Heading, TaskDetailView, Filters)

Closes

Closes #1023

Test plan

  • Verify pnpm build succeeds
  • Verify pnpm lint and pnpm lint:styles pass
  • Visually inspect the 5 affected components (Notification, KanbanCard, Heading, TaskDetailView, Filters) for correct styling
  • Verify no Tailwind preflight styles interfere with Bulma reset

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/2341 **Author:** [@tink-bot](https://github.com/tink-bot) **Created:** 3/3/2026 **Status:** ✅ Merged **Merged:** 3/3/2026 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `feat-tailwind-v4` --- ### 📝 Commits (3) - [`0c28179`](https://github.com/go-vikunja/vikunja/commit/0c281794316b07928fd56878929498c90682040c) feat(frontend): upgrade Tailwind CSS from v3 to v4 - [`e3c0a79`](https://github.com/go-vikunja/vikunja/commit/e3c0a79f6f740ee7669458be6024584a0ea1132f) fix(frontend): use semantic class instead of targeting Tailwind utility - [`867e550`](https://github.com/go-vikunja/vikunja/commit/867e5508b699ee9e962f771f5ce97a633178d3fc) fix(frontend): use mbs-2 utility class instead of scoped CSS ### 📊 Changes **14 files changed** (+393 additions, -313 deletions) <details> <summary>View changed files</summary> 📝 `frontend/.stylelintrc.json` (+5 -1) 📝 `frontend/package.json` (+2 -1) 📝 `frontend/pnpm-lock.yaml` (+368 -275) 📝 `frontend/src/App.vue` (+2 -0) 📝 `frontend/src/components/misc/Notification.vue` (+2 -5) 📝 `frontend/src/components/project/partials/Filters.vue` (+1 -1) 📝 `frontend/src/components/tasks/partials/Heading.vue` (+2 -2) 📝 `frontend/src/components/tasks/partials/KanbanCard.vue` (+3 -3) 📝 `frontend/src/histoire.setup.ts` (+1 -0) 📝 `frontend/src/styles/global.scss` (+0 -4) ➕ `frontend/src/styles/tailwind.css` (+3 -0) 📝 `frontend/src/views/tasks/TaskDetailView.vue` (+2 -2) ➖ `frontend/tailwind.config.js` (+0 -17) 📝 `frontend/vite.config.ts` (+2 -2) </details> ### 📄 Description ## Summary - Upgrades Tailwind CSS from v3.4.19 to v4.2.1 using the new CSS-first configuration - Switches from PostCSS plugin to `@tailwindcss/vite` for better performance - Uses granular imports to skip preflight (Bulma provides the CSS reset) - Updates class prefix from `tw-` to `tw:` across all 5 Vue files that use Tailwind utilities ## Changes - **New**: `frontend/src/styles/tailwind.css` — dedicated CSS entry with `prefix(tw)`, importing only theme + utilities (no preflight) - **Deleted**: `frontend/tailwind.config.js` — replaced by CSS directives - **Updated**: `frontend/vite.config.ts` — `tailwindcss` moved from PostCSS plugins to Vite plugins via `@tailwindcss/vite` - **Updated**: `frontend/src/App.vue` and `frontend/src/histoire.setup.ts` — import the new CSS file - **Updated**: `frontend/src/styles/global.scss` — removed `@tailwind` directives - **Updated**: `frontend/.stylelintrc.json` — swapped `@tailwind` for v4 at-rules (`@theme`, `@utility`, `@custom-variant`, `@source`, `@reference`) - **Updated**: 5 Vue files — `tw-foo` → `tw:foo` prefix (Notification, KanbanCard, Heading, TaskDetailView, Filters) ## Closes Closes #1023 ## Test plan - [ ] Verify `pnpm build` succeeds - [ ] Verify `pnpm lint` and `pnpm lint:styles` pass - [ ] Visually inspect the 5 affected components (Notification, KanbanCard, Heading, TaskDetailView, Filters) for correct styling - [ ] Verify no Tailwind preflight styles interfere with Bulma reset --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-23 09:17:08 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#9914
Delete Branch "%!s()"

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?