chore(deps): update `tailwindcss` to v4.* #6286

cstns · 2025-11-11T11:24:48Z

Description

Upgrade Tailwind to latest version.

bumping to 3.4.0 introduced some breaking changes
so did bumping to 4.*

After addressing the breaking changes, I did a quick comparison between production and local, and nothing major appeared to have changed.

Related Issue(s)

Part of #6325

Checklist

Labels

Includes a DB migration? -> add the area:migration label

codecov · 2025-11-11T11:37:42Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.22%. Comparing base (6755d2c) to head (8fcb4ca).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6286   +/-   ##
=======================================
  Coverage   76.22%   76.22%           
=======================================
  Files         393      393           
  Lines       19777    19777           
  Branches     4741     4741           
=======================================
  Hits        15075    15075           
  Misses       4702     4702

Flag	Coverage Δ
backend	`76.22% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.

dimitrieh · 2025-11-11T11:40:25Z

@cstns why not to 4.1?

cstns · 2025-11-11T12:29:20Z

v4 has a hard dependency of node >= v20 while our docs state that we support v18.

hardillb · 2025-11-11T12:45:53Z

We have moved the built containers to nodejs 20 and the tests iirc.

NodeJS 18 is now EoL so we really should drop it as dependency, but we need to check (and I need to convert my dev env over).

cstns · 2025-11-11T12:50:28Z

We're risking breaking things upgrading tailwind to 4.0 without making sure all on-premise installations have also done so. I'm fine with upgrading to 4.0 but we should make it clear that the next release will make node 20 mandatory (and also upgrade the docs)

cstns · 2025-11-11T14:46:10Z

spoke w @hardillb we can safely upgrade to 4.0, I'll add a changelog request announcing our minimum node version change and one for the docs to update the entry

cstns · 2025-11-11T15:08:29Z

Changelog request and docs update pr's are in place.

dimitrieh · 2025-11-12T17:34:56Z

Very nice! Well that opens the door than to V4: https://staticmania.com/blog/tailwind-v4-vs-v3-comparison

dimitrieh · 2025-11-12T17:37:51Z

@cstns I see you already upgraded to v4.0.0. Why not to the latest? https://github.com/tailwindlabs/tailwindcss/releases

PS: We can also look into https://tailwindcss.com/plus/ui-blocks#product-application-ui

cstns · 2025-11-14T10:49:28Z

I'd love a go at the settings pages with tailwind plus, worth getting in my opinion

cstns · 2025-11-14T14:01:21Z

I set a hard minimum allowed limit of 4.0.0 but 4.1.17 is installed and will match any 4.*.* version

…r enhanced compatibility

… configuration for cleaner styles and updated features

- Replace flex-shrink-* with shrink-*, flex-grow-* with grow-* - Replace outline-none with outline-hidden - Replace overflow-ellipsis with text-ellipsis - Shift rounded scale to preserve v2 visual sizes: - rounded-xl → rounded-lg - rounded-lg → rounded-md - rounded-md → rounded - rounded → rounded-sm - rounded-sm → rounded-xs

- shadow-lg → shadow-md - shadow-md → shadow - shadow-sm → shadow-xs - shadow (bare) → shadow-sm - drop-shadow-md → drop-shadow

- Migrate remaining flex-grow → grow in Vue templates (71 occurrences) - Migrate remaining flex-shrink → shrink in Vue templates (2 occurrences) - Shift drop-shadow → drop-shadow-sm for v2 visual parity - CSS properties in style sections preserved (flex-grow:, flex-shrink:)

Changes applied by the official Tailwind v4 upgrade tool: - Move !important modifier from prefix to suffix (!prop → prop!) - Update max-w-screen-* to max-w-(--breakpoint-*) - Replace break-words with wrap-break-word

…4 compatibility Tailwind v4 uses native CSS @layer which gives unlayered CSS higher specificity than layered utilities. This caused base h1-h4 styles to override utility classes like text-lg, font-medium, and mb-2. Wrapping the heading styles in @layer base restores proper cascade behavior.

…in `AuditLog` and `AuditLogBrowser` components

@theme

…ilwind v4 - Convert $ff-* Sass variables to var(--ff-*) CSS custom properties - Move design tokens to @theme inline block in index.css - Fix media queries to use literal pixel values (CSS vars not supported) - Add --ff-grey-500-20 opacity variant for rgba() replacement

@theme

…iable output - Change @theme inline to @theme for primitive design tokens - Move semantic tokens (--ff-color-*) to @layer theme with :root selector - Ensures semantic tokens are always output as CSS variables for SCSS usage

- Remove unused safelist from tailwind.config.js (classes are defined in @layer base) - Remove redundant autoprefixer from postcss.config.js (built into @tailwindcss/postcss)

dimitrieh · 2025-11-21T20:03:19Z

Fixed my commit signing :)

- Delete ff-colors.scss and ff-utility.scss (empty stubs pointing to index.css) - Delete ff-theme-light.scss and ff-theme-dark.scss (abandoned dark mode code) - Remove imports from common.scss, layouts.scss, ui-components/index.scss - Remove sass-loader additionalData that referenced deleted files Removes ~350 lines of dead CSS.

- Move ff-core.scss content into common.scss (consolidate heading styles) - Move ff-components.scss to stylesheets/components/ - Remove ui-components/index.scss import from main.js - Remove dead imports from IconLink.vue and ApplicationSummaryLabel.vue - Delete ui-components/stylesheets/ directory All SCSS is now under frontend/src/stylesheets/.

node-sass is deprecated. Dart Sass (sass) is the actively maintained drop-in replacement recommended by the Sass team.

@include

- Remove deleted index.scss imports from setup.js and ui-components/index.js - Replace @include truncate with inline CSS in BrokerClient.vue Fixes webpack build errors after SCSS consolidation.

cstns self-assigned this Nov 11, 2025

cstns marked this pull request as draft November 11, 2025 11:24

cstns requested a review from dimitrieh November 11, 2025 11:24

cstns temporarily deployed to staging November 11, 2025 11:28 — with GitHub Actions Inactive

cstns temporarily deployed to staging November 12, 2025 12:34 — with GitHub Actions Inactive

cstns temporarily deployed to staging November 14, 2025 10:47 — with GitHub Actions Inactive

cstns changed the title ~~chore(deps): update tailwindcss to v3.4.0~~ chore(deps): update tailwindcss to v4.* Nov 14, 2025

cstns marked this pull request as ready for review November 14, 2025 14:04

cstns temporarily deployed to staging November 14, 2025 14:08 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging November 21, 2025 14:03 — with GitHub Actions Inactive

dimitrieh force-pushed the upgrade-tailwind branch from 126e7ef to 86971ef Compare November 21, 2025 14:43

dimitrieh temporarily deployed to staging November 21, 2025 14:48 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging November 21, 2025 15:50 — with GitHub Actions Inactive

cstns temporarily deployed to staging November 21, 2025 16:35 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging November 21, 2025 18:42 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging November 21, 2025 19:49 — with GitHub Actions Inactive

dimitrieh force-pushed the upgrade-tailwind branch from 41b2bf8 to fe81c6a Compare November 21, 2025 19:51

dimitrieh temporarily deployed to staging November 21, 2025 19:56 — with GitHub Actions Inactive

dimitrieh force-pushed the upgrade-tailwind branch from fe81c6a to 7831fd7 Compare November 21, 2025 19:58

cstns and others added 11 commits November 21, 2025 21:02

chore(deps): update tailwindcss to v3.4.0 and other dependencies fo…

0446bbe

…r enhanced compatibility

chore(deps): upgrade to tailwindcss v4.0.0 and migrate to CSS-first…

48bad90

… configuration for cleaner styles and updated features

fix(frontend): shift shadow scale to preserve v2 visual sizes

55e9436

- shadow-lg → shadow-md - shadow-md → shadow - shadow-sm → shadow-xs - shadow (bare) → shadow-sm - drop-shadow-md → drop-shadow

fix(frontend): apply @tailwindcss/upgrade tool migrations

5eb7f20

Changes applied by the official Tailwind v4 upgrade tool: - Move !important modifier from prefix to suffix (!prop → prop!) - Update max-w-screen-* to max-w-(--breakpoint-*) - Replace break-words with wrap-break-word

refactor(ui): apply flex and overflow-auto for consistent layout …

0a8209b

…in `AuditLog` and `AuditLogBrowser` components

chore(config): remove dead code from Tailwind v4 configuration

8fcb4ca

- Remove unused safelist from tailwind.config.js (classes are defined in @layer base) - Remove redundant autoprefixer from postcss.config.js (built into @tailwindcss/postcss)

dimitrieh force-pushed the upgrade-tailwind branch from 7831fd7 to 8fcb4ca Compare November 21, 2025 20:02

dimitrieh temporarily deployed to staging November 21, 2025 20:10 — with GitHub Actions Inactive

dimitrieh added 4 commits November 21, 2025 22:55

chore(deps): replace deprecated node-sass with sass

bd381f2

node-sass is deprecated. Dart Sass (sass) is the actively maintained drop-in replacement recommended by the Sass team.

fix(frontend): remove dead SCSS imports and fix truncate mixin usage

19b7547

- Remove deleted index.scss imports from setup.js and ui-components/index.js - Replace @include truncate with inline CSS in BrokerClient.vue Fixes webpack build errors after SCSS consolidation.

dimitrieh temporarily deployed to staging November 21, 2025 22:54 — with GitHub Actions Inactive

chore(deps): update tailwindcss to v4.* #6286

Are you sure you want to change the base?

chore(deps): update tailwindcss to v4.* #6286

Uh oh!

Conversation

cstns commented Nov 11, 2025 • edited by dimitrieh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

Checklist

Labels

Uh oh!

codecov bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dimitrieh commented Nov 11, 2025

Uh oh!

cstns commented Nov 11, 2025

Uh oh!

hardillb commented Nov 11, 2025

Uh oh!

cstns commented Nov 11, 2025

Uh oh!

cstns commented Nov 11, 2025

Uh oh!

cstns commented Nov 11, 2025

Uh oh!

dimitrieh commented Nov 12, 2025

Uh oh!

dimitrieh commented Nov 12, 2025

Uh oh!

cstns commented Nov 14, 2025

Uh oh!

cstns commented Nov 14, 2025

Uh oh!

dimitrieh commented Nov 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chore(deps): update `tailwindcss` to v4.* #6286

chore(deps): update `tailwindcss` to v4.* #6286

cstns commented Nov 11, 2025 •

edited by dimitrieh

Loading

codecov bot commented Nov 11, 2025 •

edited

Loading