Upgrade Tailwind and Daisy to support v4 by Simrayz · Pull Request #1723 · Uninett/Argus

Simrayz · 2026-01-14T12:18:34Z

Scope and purpose

Resolves #1262

This PR upgrades the frontend styling from Tailwind CSS v3 to v4 and DaisyUI v4 to v5.

New CSS-first config format (replaces JS config)
Updated color variable syntax throughout
Compatibility fixes for DaisyUI v5 (badges, tabs, tables, forms, dropdowns, tooltips)
Fixed filter dropdowns not triggering htmx requests
Fixed tooltip alignment causing horizontal scroll on incident table

NOTE: Most changes are straightforward (class renames, variable syntax). The compatibility CSS in 12-daisy-compat.css restores v4 styling where v5 changed defaults we want to keep

How to test

After checking out the branch, make sure to run make upgrade-tailwind and make tailwind (should already be commited, but just in case)
Start the server, and make sure to refresh the browser (and maybe hard refresh) to get the new stylesheet
Click around and see if anything looks strange. During development I had https://argus.uninett.no/ open in a split view, so I could compare directly what the differences were.

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to Argus can be found in the
Development docs.

Added a changelog fragment for towncrier
Added/amended tests for new/changed code
Added/changed documentation, including updates to the user manual if feature flow or UI is considerably changed
Linted/formatted the code with ruff and djLint, easiest by using pre-commit
The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See our how-to
If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
If this results in changes in the UI: Added screenshots of the before and after
If this results in changes to the database model: Updated the ER diagram

CLAassistant · 2026-01-14T12:18:43Z

All committers have signed the CLA.

github-actions · 2026-01-14T12:26:07Z

Test results

6 files 900 suites 1m 47s ⏱️
701 tests 700 ✅ 1 💤 0 ❌
4 206 runs 4 200 ✅ 6 💤 0 ❌

Results for commit 36603e2.

♻️ This comment has been updated with latest results.

codecov · 2026-01-14T12:27:12Z

Codecov Report

❌ Patch coverage is 23.33333% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.91%. Comparing base (32fefd4) to head (36603e2).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
.../argus/htmx/management/commands/tailwind_config.py	0.00%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1723      +/-   ##
==========================================
+ Coverage   82.57%   82.91%   +0.34%     
==========================================
  Files         137      134       -3     
  Lines        6552     6521      -31     
==========================================
- Hits         5410     5407       -3     
+ Misses       1142     1114      -28

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Simrayz · 2026-01-14T13:05:11Z

SonarQube is not happy with the new Tailwind directives (@source, @plugin). Should probably add them to the ignore list? (I don't have access)

hmpf

It's a draft, this is the easily noticeable problems:

Global header:

the horizontal lines in the user menu are too long and split into two parts

User preferences:

Argus theme is missing from drop down and I get the warning "2026-01-14 14:28:45,660 argus.htmx.themes.utils WARNING Themes in settings are out of sync with themes installed"

Nothing seems to be broken in the styleguide. Nothing else looks weird except the dark theme has even worse contrast than before.

hmpf · 2026-01-14T13:34:38Z

Also, it appears that djlint at github-actions differs from the version run by precommit 😮‍💨

Simrayz · 2026-01-14T13:47:46Z

It's a draft, this is the easily noticeable problems:

Global header:

the horizontal lines in the user menu are too long

They're the same length to me, but split in two, which I'll fix

Dashboard:

tabs on incident list are invisible (so maybe use PoC: Refactor Argus Filter UI #1693)

dropdowns in filter select buttons are underneath the incident list (but see Shrink stored filter widget on incident list #1621)

The tabs and dropdowns should be fixed, as I spent quite some time fixing them:

Are you using the correct tailwind-cli, generated css and did a hard refresh etc?

User preferences:

Argus theme is missing from drop down and I get the warning "2026-01-14 14:28:45,660 argus.htmx.themes.utils WARNING Themes in settings are out of sync with themes installed"

Nothing seems to be broken in the styleguide. Nothing else looks weird except the dark theme has even worse contrast than before.

I'll look into fixing the broken Argus theme, and do some adjustments to make the dark theme to look as expected again.

Simrayz · 2026-01-15T08:45:02Z

I have addressed the problems identified in the first quick-pass:

The argus theme is now included as an option in the theme preferences. The problem was a broken regex.
The dividers in the user menu are fixed to have the proper length, padding and remove a space (Daisy started using a grid layout in the user menu, which made the divider split in two due to ::before and ::after being its components).

hmpf · 2026-01-15T09:07:33Z

I see this now... anyone else?

hmpf · 2026-01-15T09:10:54Z

The border is so discreet it annoys the eyes.

In comparison:

Simrayz · 2026-01-15T09:23:02Z

The border is so discreet it annoys the eyes.

Daisy just made their base-colors quite unusable... but I increased it to base-300 instead. Does that work for you?

Simrayz · 2026-01-15T09:35:54Z

I see this now... anyone else?

It only happens when the version number is so long that it does'nt fit, causing the menu to overflow. Shouldn't be an issue in a non-developer environment, but looking into it now 👀

hmpf · 2026-01-15T09:42:51Z

src/argus/htmx/tailwindtheme/snippets/35-cards.css

@@ -1,5 +1,5 @@
 .card-base {
-    @apply border border-base-200 bg-base-100;
+    @apply border border-base-300 bg-base-100;


hmpf · 2026-01-15T10:09:10Z

src/argus/htmx/templates/htmx_base.html

      <div class="relative isolate flex justify-center gap-x-4 overflow-hidden bg-red-700 px-4 py-1.5">
        <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
             aria-hidden="true">
-          <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-red-100 to-red-950 opacity-30"


What's the purpose of this entire div (one of two even)? The banner message seems to be working just fine without it.

I'm not sure, I just changed the class from bg-gradier-* to bg-linear-* to match the new Tailwind spec

johannaengland

Highlighting which incident we're hovering over disappear in this PR:
Before:

After:

The lines between the footer elements are barely visible:
Before:

After:

Not sure how relevant it is, but the line thickness between the different segments in the user dropdown changes:
Before:

After:

The button color in the user preference page changes (when they are greyed out):
Before:

After:

The line grouping time recurrences on the timeslots page is much less visible:
Before: