Skip to content

chore: update to Tailwind CSS 4.0#125

Draft
Junyi-99 wants to merge 6 commits intostagingfrom
chore/upgrade-tailwind-to-4.1.8
Draft

chore: update to Tailwind CSS 4.0#125
Junyi-99 wants to merge 6 commits intostagingfrom
chore/upgrade-tailwind-to-4.1.8

Conversation

@Junyi-99
Copy link
Member

This pull request focuses on modernizing the UI codebase and updating dependencies for improved stability and consistency. The most significant changes include upgrading various dependencies in package.json, standardizing the usage of utility class syntax (notably the placement of ! for Tailwind overrides), and refactoring shimmer/loading indicator styles to use a shared CSS class. These updates collectively enhance maintainability, visual consistency, and compatibility with newer tooling.

Dependency upgrades and tooling modernization:

  • Updated dependencies in package.json to newer versions, including major upgrades for react, react-dom, axios, immer, streamdown, uuid, and several dev tools. Added @tailwindcss/postcss, @tailwindcss/vite, tailwindcss, and tw-shimmer for improved styling and loading effects.
  • Changed postcss.config.js to use @tailwindcss/postcss instead of the generic tailwindcss and autoprefixer plugins, aligning with the new dependency setup.

UI styling and class syntax standardization:

  • Refactored Tailwind utility class syntax throughout component files, moving the ! modifier to the end of each class for consistency and to match modern conventions. This affects components like cell-wrapper, message-card, message-entry-container, attachment-popover, add-comments-button, and comment-item. [1] [2] [3] [4] [5] [6] [7] [8]

Shimmer/loading indicator improvements:

  • Removed inline shimmer animation styles and replaced them with a shared shimmer CSS class for loading indicators and tool cards, simplifying code and ensuring consistent loading effects. This change impacts loading-indicator.tsx, toolcall-prepare.tsx, and tools/general.tsx. [1] [2] [3] [4] [5] [6]

Minor UI and accessibility tweaks:

  • Updated component class names for improved readability and accessibility, including changes to button states, error messages, and code block rendering. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Removal of unused code:

  • Deleted unused inline style constants for shimmer/loading effects, further cleaning up the codebase. [1] [2]

These changes collectively improve the project's maintainability, visual consistency, and readiness for future updates.

- Updated `@heroui/react` to version 2.8.9.
- Added `@tailwindcss/postcss` and `@tailwindcss/vite` to dependencies.
- Modified PostCSS configuration to use `@tailwindcss/postcss`.
- Updated Vite configuration to include Tailwind CSS plugin.
- Adjusted various CSS classes for consistency and improved styling.
- Introduced a new `hero.ts` file for Heroui integration.
- Enhanced component styles and accessibility across multiple files.
- Upgraded various dependencies including `@bufbuild/protobuf`, `@grafana/faro-web-sdk`, and `@tanstack/react-query`.
- Updated development dependencies such as `@codemirror/state`, `@eslint/js`, and `typescript`.
- Enhanced overall package stability and performance by aligning versions across multiple libraries.
- Added `tw-shimmer` dependency to enhance loading animations in the application.
- Updated CSS imports to include `tw-shimmer` for improved visual effects.
- Refactored loading indicators across components to utilize the new shimmer effect, enhancing user experience during loading states.
- Removed redundant custom shimmer styles to streamline code and improve maintainability.
- Changed fallback model details to reflect the new GPT-5.1 version, including updated slug, name, context, and pricing.
- Updated last used model slug in conversation UI store to GPT-5.1.
- Modified devtools to utilize the new model slug for assistant messages.
- Updated `immer` version in `bun.lock` and `package.json` to remove caret (^) for consistency.
- Changed `@types/chrome` version to a more specific version.
- Downgraded `eslint` and related plugins to align with project requirements.
- Updated TypeScript configuration to target ES2022 for improved compatibility.
- Refactored Vite configuration to remove unnecessary imports and streamline the setup.
- Enhanced selection store types for better state management.
- Introduced path aliases in `tsconfig.app.json` for easier imports: `@` for `./src/*` and `@gen` for `./src/pkg/gen/*`.
- Updated Vite configuration to resolve these aliases, enhancing module resolution.
- Refactored multiple components and hooks to utilize the new import paths, improving code readability and maintainability.
- Removed the `converters.ts` file as it was no longer needed, streamlining the codebase.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments