Skip to content

Add tw prefix to tailwind #1497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

zeroliu
Copy link
Collaborator

@zeroliu zeroliu commented May 26, 2025

Summary

  • add tw prefix in Tailwind configuration and component config
  • update Tailwind classnames to use the new tw- prefix
  • Added new eslint linters to catch existing and new tailwind CSS classname issues

Testing

I verified the existing UI continue to work as intended. And I used the tailwindcss plugin to ensure all tailwind classnames without tw- are caught

@zeroliu zeroliu requested review from logancyang and Copilot May 26, 2025 07:39
@@ -450,12 +450,6 @@ If your plugin does not need CSS, delete this file.
margin: 10px;
}

.message-content-items {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this classname has been migrated to tailwind

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates Tailwind integration by adding a tw- prefix to all Tailwind utility classes and enforcing this via new ESLint rules.

  • Bulk-renamed all existing className usages to include the tw- prefix
  • Added eslint-plugin-tailwindcss to catch unprefixed or misordered classes
  • Updated project configs (components.json, .eslintrc, package.json) to reflect and enforce the new prefix

Reviewed Changes

Copilot reviewed 59 out of 59 changed files in this pull request and generated no comments.

File Description
src/components/.../**/*.tsx Renamed all Tailwind utility classNames to tw-*
components.json Set "prefix": "tw" for component CSS tools
.eslintrc Added TailwindCSS plugin, rules, and updated overrides
package.json Added eslint-plugin-tailwindcss dev dependency

@zeroliu zeroliu force-pushed the codex/add-tw-prefix-to-tailwindcss-classes branch 2 times, most recently from e6d31fb to 7486a9d Compare May 26, 2025 08:13
@@ -15,7 +15,7 @@ jobs:

strategy:
matrix:
node-version: [20.x]
node-version: [22.x]
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated this when debugging a CI lint test failure. The issue has been resolved and it's unrelated to this. However, I think it's better to upgrade to 22 since it's the LTS version.

@logancyang
Copy link
Owner

Thanks for the PR! Will merge this once the preview branch merges.

@zeroliu zeroliu force-pushed the codex/add-tw-prefix-to-tailwindcss-classes branch from 76ac04a to 515f7c4 Compare May 31, 2025 06:00
@zeroliu zeroliu force-pushed the codex/add-tw-prefix-to-tailwindcss-classes branch from 515f7c4 to e7b32ab Compare May 31, 2025 06:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants