Upgrade tailwind to v4 and daisy to v5

[podliashanyk]

Scope and purpose

Fixes #1262 Depends on #1524

How to test

Make sure you have the right version of tailwind+daisy installed. While standing in the repo root, run:

PYTHONPATH=./src python3 src/argus/htmx/tailwindtheme/get_tailwind.py

This will replace the binary in src/argus/htmx/tailwindtheme/tailwindcss with a new binary and update various libraries. You shouldn't need to put the binary in your path if you use make.

Run make tailwind to update styles as usual.

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
• [x] Linted/formatted the code with ruff and djLint, easiest by using pre-commit
• [x] 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

[github-actions[bot]]

Test results

    4 files    472 suites   17m 34s ⏱️   568 tests   566 ✅ 1 💤 1 ❌ 2 272 runs  2 264 ✅ 4 💤 4 ❌

For more details on these failures, see this check.

Results for commit 5d02e56b.

:recycle: This comment has been updated with latest results.

[codecov-commenter]

Codecov Report

:x: Patch coverage is 38.00000% with 31 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 78.16%. Comparing base (7d7283f) to head (25ce868).

Files with missing lines	Patch %	Lines
.../argus/htmx/management/commands/tailwind_config.py	0.00%	13 Missing :warning:
src/argus/htmx/themes/utils.py	56.00%	11 Missing :warning:
src/argus/htmx/utils/templates.py	45.45%	6 Missing :warning:
src/argus/htmx/tailwindtheme/config.py	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1527      +/-   ##
==========================================
- Coverage   78.34%   78.16%   -0.19%     
==========================================
  Files         124      125       +1     
  Lines        5468     5495      +27     
==========================================
+ Hits         4284     4295      +11     
- Misses       1184     1200      +16     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

[podliashanyk]

If I try to make the styles via the Makefile (make tailwind) I get:

tailwindcss -c src/argus/htmx/tailwindtheme/tailwind.config.js -i src/argus/htmx/tailwindtheme/styles.css -o src/argus/htmx/static/styles.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    CENSORED/src/argus/htmx/tailwindtheme/snippets
  ]
    at /snapshot/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:49:9)
make: *** [Makefile:33: tailwind] Error 1

Remember to switch to new version of tailwind cli extra, I suggest https://github.com/dobicinaitis/tailwind-cli-extra/releases/tag/v2.0.0

[podliashanyk]

Depends on #1524

[hmpf]

Idea: make css snippets more pluggable.

Fix: Finding defined themes to add to user theme dropdown.

[podliashanyk]

TODOs before this PR is considered completed:

• [x] ensure that "argus" theme is visible in theme selector dropdown (fix likely belongs in src/argus/htmx/management/commands/tailwind_config.py)

• [x] Add new way to add custom themes:

  • update DEFAULT_THEMES in src/argus/htmx/defaults.py so that custom themes are defined after a new format (format must be compliant with https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme):

    "name": {
          "color-scheme": "light",
          "--color-primary": "#006d91",
          "--color-primary-content": "#d1e1e9",
          "--color-secondary": "#f3b61f",
          etc...
    }
    

  • ensure that custom themes are wrapped with @plugin "daisyui/theme" {name: ...} (as per https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme) in src/argus/htmx/management/commands/tailwind_config.py

  • remove hard coded definition of theme "argus" from src/argus/htmx/tailwindtheme/snippets/10-tailwind.css

• [x] Document new way to add custom themes

• [x] Fix font size discrepancy between text in badges and the rest of the table row

• [x] Reduce font size in the "Filter"-selector:

• [x] Fix font size discrepancy within the stats widget:

• [x] Fix divider in the user menu dropdown:

• [x] Fix alignment of inputs on the Profiles page:

• [ ] Fix programatic connection label-to-input in the incident update modals (as per https://daisyui.com/docs/upgrade/#other-removals) [OPTIONAL]

• [x] Fix border around tabs

[hmpf]

It's probably get_themes_from_css() in src/argus/htmx/themes/utils.py that needs updating for the correct list of themes to choose from.

[hmpf]

I have rebased this on the merged #1524 so that we can use the correct version of the standalone tailwind cli, I've set it to 2.1.37, the currently newest.

[hmpf]

* [ ]  Reduce font size in the "Filter"-selector:

The font size for "Filter" was too large, but the size for the others were too small!

[hmpf]

* [x]  Fix alignment of inputs on the Profiles page:

Fixed by modernizing labels.

[hmpf]

* [ ]  Fix font size discrepancy between text in badges and the rest of the table row

The badges have their old size, it seems that "table-xs" now means 11pt, not 12pt as it did before. 11pt is painfully small to me at least.

[hmpf]

* [x]  Fix font size discrepancy within the stats widget:

The size is fixable by removing "select-xs", but the font is still a bit low contrast.

[hmpf]

• [ ] Fix programatic connection label-to-input in the incident update modals (as per https://daisyui.com/docs/upgrade/#other-removals) [OPTIONAL]

There is no <label> or class="form-control" in the modals at all, unclear what you mean.

[hmpf]

This probably would have been better as at least two different PR's, one for themes and one for the rest.

[hmpf]

The colors for the severity levels have gone missing...

[hmpf]

I couldn't see any of the new problems at first, needed to run "make nuke" and delete the generated styles.css to make them show up!

[hmpf]

* Different placeholder text color in "Sources" and "Tags" selectors:
  <img alt="Screenshot 2025-08-19 at 11 39 08" width="436" height="63" src="https://private-user-images.githubusercontent.com/60876078/479444072-20b75a36-42c8-4481-9657-f41f4d4411c9.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTU2ODE0NTIsIm5iZiI6MTc1NTY4MTE1MiwicGF0aCI6Ii82MDg3NjA3OC80Nzk0NDQwNzItMjBiNzVhMzYtNDJjOC00NDgxLTk2NTctZjQxZjRkNDQxMWM5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA4MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwODIwVDA5MTIzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBiMTk4NTZjMjM4NzcyYzcwOWUyYzczYWU0ZjQzMzZjY2YyYTEzYmIzMTAyNmFkOTRmMWMyY2M2ODI4ZmFmNDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0._idNeJa5Jr3_auVkATETyDTgziK9msBPjaMWf2g2Pkk">

Fixed. Set back to blackish (text-base-content).

[hmpf]

* [ ]  Modals have disappeared when clicking on "Update filter"/"Delete filter"

This is because clicking on the button no longer fires off a request to the view that answers with a list of filters (argus.htmx.incident.views.get_existing_filters), so the list is empty.

If the list of filters is included in the context of the full incident-list page, the list shows up, but nothing can be clicked in it (the entire page hangs until manual reload). Again, no request from htmx to the view that selects a specific filter (argus.htmx.incident.filter.FilterListView).

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud[bot]]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE