Upgrade web/app to tailwind v4

[jonathanawesome]

Background

In preparation for adding new color palettes, this PR upgrades the web/app Tailwind version from 3 to 4.

Description

This PR upgrades the Tailwind version used in web/app from v3 to v4.

Notes

• Because we're still using Tailwind v3 in web/docs and hoisting packages, considerations were made in root package.json and .npmrc to ensure compatibility. Once we move web/docs out of this repo, we can remove these considerations.
• I've upgraded the eslint plugin to eslint-plugin-better-tailwindcss which supports both v3 and v4. There is some crossover with the Tailwind VSCode extension that I've tried to mitigate, but it's likely that we'll need to do some additional tweaking to the eslint config.
• I've updated many classnames to the newer v4 format, though I made sure to avoid touching classnames that dealt with sizing.

[gemini-code-assist]

Summary of Changes

Hello @jonathanawesome, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a significant infrastructure upgrade, moving the web/app project from Tailwind CSS v3 to v4. This foundational change is crucial for future UI enhancements, particularly the introduction of new color palettes. The update involves a comprehensive migration of styling configurations, including ESLint rules, build processes, and the adoption of Tailwind v4's CSS-first approach. It also necessitated widespread adjustments to existing component class names and CSS variable declarations to ensure full compatibility and leverage the new features of the framework.

Highlights

• Tailwind CSS v4 Upgrade: The web/app project has been upgraded from Tailwind CSS v3 to v4, laying the groundwork for new color palettes and leveraging the new CSS-first architecture.
• ESLint Configuration Migration: The ESLint setup for Tailwind has been migrated from eslint-plugin-tailwindcss to eslint-plugin-better-tailwindcss to ensure compatibility and proper linting with Tailwind v4. This involved updating rules and adding extensive ignore patterns for custom classes and new syntax.
• Dependency and Build Tooling Updates: Core dependencies in package.json and packages/web/app/package.json have been updated to reflect Tailwind v4. The postcss.config.mjs file has been removed, and @tailwindcss/vite has been integrated into vite.config.ts, aligning with Tailwind v4's new standalone CLI approach.
• CSS Variable Syntax and Theming Refactor: The index.css file has been significantly refactored to use Tailwind v4's @theme directive for defining custom colors, typography, border radii, and animations. Existing CSS variable usages in components have been updated from [--var] to (--var) syntax.
• Class Name and Selector Adjustments: Numerous Tailwind class names across various React components have been adjusted to conform to v4 syntax, including changes from !important to !, rounded to rounded-sm, and updates to Radix UI data attribute selectors.
• Custom Tailwind Plugins: A new tailwind-plugins.js file has been introduced to define custom Tailwind utilities like bg-grid, bg-grid-small, and bg-dot, which are now imported directly into index.css.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Ignored Files

• Ignored by pattern: .github/workflows/** (1)
  • .github/workflows/release-stable.yaml

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

🚀 Snapshot Release (alpha)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
@graphql-hive/cli	0.57.2-alpha-20260115211303-1221eb373feba43e9dcc87d562a492695b6535cb	npm ↗︎ unpkg ↗︎
hive	9.0.0-alpha-20260115211303-1221eb373feba43e9dcc87d562a492695b6535cb	npm ↗︎ unpkg ↗︎

[github-actions]

📚 Storybook Deployment

The latest changes are available as preview in: https://pr-7490.hive-storybook.pages.dev

[gemini-code-assist]

Code Review

This pull request successfully upgrades Tailwind CSS from v3 to v4 for the web/app package, which is a significant and well-executed effort. The changes correctly adopt the new CSS-based configuration, updated utility syntax, and necessary dependency adjustments. I've identified a few minor issues where some styles from the old tailwindcss-radix plugin were not fully migrated, and a potential typo in data attribute selectors. Addressing these will ensure all styles are applied correctly post-upgrade. Overall, this is a solid improvement.

[github-actions]

🐋 This PR was built and pushed to the following Docker images:

Targets: build

Platforms: linux/amd64

Image Tag: 1221eb373feba43e9dcc87d562a492695b6535cb

[github-actions]

💻 Website Preview

The latest changes are available as preview in: https://pr-7490.hive-landing-page.pages.dev

[hasparus]

great work

If I didn't ever migrate to Tailwind 4 and didn't chat with you, I'd assume this was easy :D You managed to wipe up all the blood stains perfectly.