[GrandComicsDatabase/gcd-django] Upgrade Tailwind CSS to v4 (PR #775)
Simone Nardi
Summary
- upgrade the standalone Tailwind CSS toolchain from v3.4.1 to v4.3.3 inside the existing
webimage - migrate configuration to Tailwind v4 CSS-first directives with explicit Django template sources
- keep Python-generated class names in
templates/gcd/tailwind_generated_classes.htmlinstead of scanning Python files - update order-sensitive variants and renamed/important utilities for Tailwind v4
- regenerate
static/css/output.cssinside Docker
No Node.js installation or separate Tailwind container is introduced. compose.yaml, requirements.txt, and the forum app are unchanged.
Verification
docker compose build webdocker compose run --rm --no-deps web tailwindcss -i static/css/input.css -o static/css/output.csspython -m pytest apps/gcd/tests/test_dev_environment_core.py- 10 passedpython manage.py check- no issues- all 11 changed Django templates parsed successfully
- regenerated CSS matched a clean container build byte-for-byte
Technical debt
static/css/input.css still contains the historical shared components implemented with Tailwind @apply. Moving every component to inline utility classes is intentionally left for a separate refactor because it affects more than 70 templates plus HTML assembled in Python.
You can view, comment on, or merge this pull request online at:
https://github.com/GrandComicsDatabase/gcd-django/pull/775
Commit Summary
- 1d97069 Upgrade Tailwind CSS to v4
File Changes
(19 files)
- M Dockerfile.dev (15)
- M README.md (20)
- M apps/gcd/tests/test_dev_environment_core.py (9)
- M bin/dev (26)
- M docs/development/CORE_SETUP.md (6)
- M static/css/input.css (85)
- M static/css/output.css (5550)
- D tailwind.config.js (32)
- M templates/gcd/details/tw_issue.html (8)
- M templates/gcd/details/tw_single_story.html (4)
- M templates/gcd/details/tw_story_arc.html (4)
- A templates/gcd/tailwind_generated_classes.html (27)
- M templates/mycomics/bits/tw_issue_control.html (4)
- M templates/mycomics/bits/tw_mycomics_bar.html (2)
- M templates/mycomics/bits/tw_series_control.html (4)
- M templates/mycomics/tw_reading_order.html (12)
- M templates/oi/bits/oi_bar.html (2)
- M templates/oi/bits/standard_queues.html (2)
- M templates/oi/bits/tab-bar.html (2)
Patch Links:
- https://github.com/GrandComicsDatabase/gcd-django/pull/775.patch
- https://github.com/GrandComicsDatabase/gcd-django/pull/775.diff
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 93444d9 Merge remote-tracking branch 'upstream/beta' into update/tailwind-v4
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 3846ebe Replace Tailwind components and manual class inventory with discoverable utilities
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- d7f0032 Fix second-pass hover and submission validation regressions
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 832463f Merge remote-tracking branch 'upstream/beta' into update/tailwind-v4
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 43dfbdb Fix Tailwind template dependencies and monthly on-sale navigation
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- aa83a22 Finish Tailwind migration audit and enforce reproducible CSS builds
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
ProfNardi left a comment (GrandComicsDatabase/gcd-django#775)Final file verification to establish a single dependency with configuration settings, as in the previous version of Tailwind:
<div cover class="min-w-[100px] sm:min-w-[150px] w-[200px] md:w-[200px] md:w-[204px] w-[150px] w-[154px] p-[2px] sm:w-[200px]"></div>
<div portrait class="border-2 w-[150px]"></div>
<div status_tables class="basis-24 basis-48 basis-90 basis-96"></div>
<div class="gap-x-8 max-w-48 data-label invisible [&>a]:visited:text-link-gcd rounded-full sm:text-right text-left opacity-0 ease-in-out delay-100 duration-300 absolute transition-opacity group-hover:opacity-100"></div>
<th class="lg:w-64 text-right w-36 lg:w-44">
<td class="text-red-700">
<input class="w-3/4 w-full md:w-3/4 lg:w-3/4 lg:w-4/5 text-blue-900">
<td class="max-h-60 border-gray-500 italic min-w-4/5 tab-pane tailwind-tab">
<table class="tab-pane list-[lower-alpha]">
<li class='align-top text-green-500 text-red-500 bg-stone-300 markdownx-preview markdownx'>
<svg class="mb-0.5 h-5 w-5 w-[100px]"></svg>
// notice
<div class="border-orange-400 bg-orange-400">
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.