Upgrade tailwind 4 in heimdall

[gauravwarale]

This pull request upgrades Tailwind CSS and other dependencies to their latest major versions and refactors the codebase to remove SCSS modules in favor of utility-first styling with Tailwind CSS. The changes modernize styling practices, ensure compatibility with Tailwind CSS v4, and simplify component structure by eliminating custom CSS modules.

Dependency Upgrades and Configuration Updates:

• Upgraded @patterninc/react-ui to v5.0.0 and tailwindcss to v4.1.11, and added @tailwindcss/postcss as a dependency to support Tailwind CSS v4. [1] [2] [3]
• Updated postcss.config.mjs to use @tailwindcss/postcss plugin instead of the previous tailwindcss entry.

Tailwind CSS Migration and Styling Refactor:

• Replaced all SCSS module-based styles with Tailwind CSS utility classes in components such as AutoRefreshSelect, ErrorPage, Header, LeftNavBar, ClusterInformationPane, ClustersDetails, ClustersDetailsHeader, CommandDetails, CommandDetailsHeader, and CommandInformationPane. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20]
• Deleted all related SCSS module files that are no longer needed. [1] [2] [3] [4] [5] [6]

Tailwind CSS v4 Compatibility Adjustments:

• Updated globals.css to use Tailwind's new @import syntax for theme and utilities, added custom compatibility styles for border color defaults, and moved the text-balance utility to the new Tailwind v4 format. [1] [2]

Global and Layout Changes:

• Ensured global styles and the new pattern-themed Tailwind CSS are loaded in the main app layout.

These updates ensure the codebase is aligned with the latest Tailwind CSS standards and improve maintainability by relying on utility classes instead of custom CSS modules.

[Copilot]

Pull Request Overview

This PR upgrades Tailwind CSS from v3 to v4 and modernizes the styling approach by replacing all SCSS modules with Tailwind utility classes. The changes eliminate custom CSS modules in favor of utility-first styling while ensuring compatibility with the latest Tailwind CSS and React UI library versions.

• Upgraded @patterninc/react-ui to v5.0.0 and tailwindcss to v4.1.11
• Migrated all component styling from SCSS modules to Tailwind CSS utility classes
• Updated global CSS configuration to use Tailwind v4's new syntax and compatibility features

Reviewed Changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
web/package.json	Upgraded dependencies and removed SCSS dependency
web/postcss.config.mjs	Updated PostCSS config for Tailwind v4 compatibility
web/src/app/globals.css	Migrated to Tailwind v4 syntax with compatibility styles
web/src/app/layout.tsx	Added required CSS imports for global styles
Various component files	Replaced SCSS module classes with Tailwind utility classes
SCSS module files	Removed all obsolete SCSS module files