starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #4126] [MERGED] Tailwind 4 migration #4175

New Issue
Closed
opened 2026-04-25 00:18:39 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:18:39 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4126
Author: @mikiher
Created: 3/16/2025
Status: ✅ Merged
Merged: 3/25/2025
Merged by: @advplyr

Base: master ← Head: tailwind-4-migration

📝 Commits (10+)

  • 39d2a25 add excplict @config directive
  • d60ccff Add misisng semicolon
  • 30db5d5 Tailwind V4 migration initial commit
  • 6ea2ef0 Remove autoprefixer plugin
  • 64b2c34 Fix buggy loading opacity
  • bd91e46 Don't use constructed tailwind classes in libraryIcon
  • 73c10aa Migrate tailwind.config.js to tailwind theme variables
  • 06919af Remove tailwind.config.js
  • ca78521 Merge branch 'advplyr:master' into tailwind-4-migration
  • 91c1f50 Use separate postcss.config and remove from nuxt.config, uninstall autoprefixer

📊 Changes

187 files changed (+2085 additions, -1529 deletions)

View changed files

📝 client/assets/tailwind.css (+85 -3)
📝 client/components/app/Appbar.vue (+7 -7)
📝 client/components/app/BookShelfCategorized.vue (+2 -2)
📝 client/components/app/BookShelfRow.vue (+1 -1)
📝 client/components/app/BookShelfToolbar.vue (+19 -19)
📝 client/components/app/ConfigSideNav.vue (+3 -3)
📝 client/components/app/LazyBookshelf.vue (+4 -4)
📝 client/components/app/MediaPlayerContainer.vue (+1 -1)
📝 client/components/app/SettingsContent.vue (+2 -2)
📝 client/components/app/SideRail.vue (+13 -13)
📝 client/components/cards/AuthorCard.vue (+2 -2)
📝 client/components/cards/AuthorSearchCard.vue (+2 -2)
📝 client/components/cards/BookMatchCard.vue (+5 -5)
📝 client/components/cards/GenreSearchCard.vue (+1 -1)
📝 client/components/cards/GroupCard.vue (+2 -2)
📝 client/components/cards/ItemSearchCard.vue (+1 -1)
📝 client/components/cards/ItemTaskRunningCard.vue (+2 -2)
📝 client/components/cards/ItemUploadCard.vue (+8 -8)
📝 client/components/cards/LazyAlbumCard.vue (+3 -3)
📝 client/components/cards/LazyBookCard.vue (+14 -14)

...and 80 more files

📄 Description

Brief summary

This migrates the web client from Tailwind V3 to V4

Which issue is fixed?

No issue.

In-depth Description

V4 has quite a few breaking changes, hence the many changes in the code:
Main changes:

  • Ran upgrade tool (which installs tailwindcss v4 and does a first sweep of changes in the code).
  • Installed @tailwindcss/cli as dev dependency (for cypress)
  • Tailwind postcss plugin is now separate from tailwindcss, so installed @tailwindcss/postcss
  • Changed nuxt config to use the new plugin
  • Had to make manual changes due to:
    • removal of (bg|text|border|ring)-opacity-* utilities
    • changes in tailwind utilities specificity (not fully understood yet).

How have you tested this?

Not fully tested yet - this is just to share code for now.

🔄 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/advplyr/audiobookshelf/pull/4126 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 3/16/2025 **Status:** ✅ Merged **Merged:** 3/25/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `tailwind-4-migration` --- ### 📝 Commits (10+) - [`39d2a25`](https://github.com/advplyr/audiobookshelf/commit/39d2a25d01cf8282958dfb484a1e01163e113b70) add excplict @config directive - [`d60ccff`](https://github.com/advplyr/audiobookshelf/commit/d60ccff5e8c1a4ed0f8a58b0c9db3ffe0e395f3d) Add misisng semicolon - [`30db5d5`](https://github.com/advplyr/audiobookshelf/commit/30db5d50fb8b2b4f4ec2646edee5612b5faf3008) Tailwind V4 migration initial commit - [`6ea2ef0`](https://github.com/advplyr/audiobookshelf/commit/6ea2ef084551c875ad241b7361880c84eca787f6) Remove autoprefixer plugin - [`64b2c34`](https://github.com/advplyr/audiobookshelf/commit/64b2c340315e2db8ff04b8cb8c0b84ee251612cd) Fix buggy loading opacity - [`bd91e46`](https://github.com/advplyr/audiobookshelf/commit/bd91e466fdb30e44249c87be67a650d5baa1e8b3) Don't use constructed tailwind classes in libraryIcon - [`73c10aa`](https://github.com/advplyr/audiobookshelf/commit/73c10aac7d80d6c92f74363c7c1dcbae44b89724) Migrate tailwind.config.js to tailwind theme variables - [`06919af`](https://github.com/advplyr/audiobookshelf/commit/06919af6b8c66823b518237adf4d794042231152) Remove tailwind.config.js - [`ca78521`](https://github.com/advplyr/audiobookshelf/commit/ca7852171bc998a0510b0e0c0806cf1892c8f512) Merge branch 'advplyr:master' into tailwind-4-migration - [`91c1f50`](https://github.com/advplyr/audiobookshelf/commit/91c1f50a510908b7457d0408414f1bce39afd6d7) Use separate postcss.config and remove from nuxt.config, uninstall autoprefixer ### 📊 Changes **187 files changed** (+2085 additions, -1529 deletions) <details> <summary>View changed files</summary> 📝 `client/assets/tailwind.css` (+85 -3) 📝 `client/components/app/Appbar.vue` (+7 -7) 📝 `client/components/app/BookShelfCategorized.vue` (+2 -2) 📝 `client/components/app/BookShelfRow.vue` (+1 -1) 📝 `client/components/app/BookShelfToolbar.vue` (+19 -19) 📝 `client/components/app/ConfigSideNav.vue` (+3 -3) 📝 `client/components/app/LazyBookshelf.vue` (+4 -4) 📝 `client/components/app/MediaPlayerContainer.vue` (+1 -1) 📝 `client/components/app/SettingsContent.vue` (+2 -2) 📝 `client/components/app/SideRail.vue` (+13 -13) 📝 `client/components/cards/AuthorCard.vue` (+2 -2) 📝 `client/components/cards/AuthorSearchCard.vue` (+2 -2) 📝 `client/components/cards/BookMatchCard.vue` (+5 -5) 📝 `client/components/cards/GenreSearchCard.vue` (+1 -1) 📝 `client/components/cards/GroupCard.vue` (+2 -2) 📝 `client/components/cards/ItemSearchCard.vue` (+1 -1) 📝 `client/components/cards/ItemTaskRunningCard.vue` (+2 -2) 📝 `client/components/cards/ItemUploadCard.vue` (+8 -8) 📝 `client/components/cards/LazyAlbumCard.vue` (+3 -3) 📝 `client/components/cards/LazyBookCard.vue` (+14 -14) _...and 80 more files_ </details> ### 📄 Description ## Brief summary This migrates the web client from Tailwind V3 to V4 ## Which issue is fixed? No issue. ## In-depth Description V4 has quite a few breaking changes, hence the many changes in the code: Main changes: - Ran upgrade tool (which installs tailwindcss v4 and does a first sweep of changes in the code). - Installed `@tailwindcss/cli` as dev dependency (for cypress) - Tailwind postcss plugin is now separate from tailwindcss, so installed @tailwindcss/postcss - Changed nuxt config to use the new plugin - Had to make manual changes due to: - removal of (bg|text|border|ring)-opacity-* utilities - changes in tailwind utilities specificity (not fully understood yet). ## How have you tested this? Not fully tested yet - this is just to share code for now. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:18:39 +02:00
adam closed this issue 2026-04-25 00:18:39 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4175
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?