Add Tailwind and Shadcn#240
Merged
Merged
Conversation
- Added Tailwind CSS configuration in `tailwind.config.js` and entry point in `src/index.css`. - Updated ESLint configuration to include the new `lib` directory. - Introduced a new `components.json` file for component configuration. - Added utility functions for class name merging in `src/lib/utils.ts`. - Created a reusable Button component in `src/components/ui/button.tsx`. - Updated package dependencies to include Tailwind CSS and related libraries. This commit enhances the styling capabilities of the application with Tailwind CSS and improves the component structure.
…configuration for .mjs files - Upgraded `react` and `react-dom` from version 16.12.0 to 16.14.0. - Updated `typescript` from version 3.8.3 to 4.9.5. - Modified Webpack configuration to handle `.mjs` files as `javascript/auto` for better compatibility with CommonJS modules. These changes enhance the project's compatibility with newer library versions and improve module handling.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR integrates Tailwind CSS and shadcn/ui scaffolding into the ejected CRA-based frontend build, including the supporting PostCSS/Webpack configuration and a starter shadcn Button component, along with dependency upgrades needed for Radix/shadcn compatibility.
Changes:
- Add Tailwind configuration + CSS entrypoint, and wire Tailwind into the existing PostCSS pipeline in
config/webpack.config.js. - Introduce shadcn/ui basics (
components.json,cnutility, initialButtoncomponent) and adjust ESLint import sorting config to recognizelibimports. - Upgrade React/ReactDOM to
^16.14.0and TypeScript to^4.9.5, and add Tailwind/shadcn-related dependencies.
Reviewed changes
Copilot reviewed 9 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
yarn.lock |
Locks new/updated dependencies for Tailwind + shadcn/Radix + TS/React bumps. |
tailwind.config.js |
Adds Tailwind config (custom colors/screens mirroring GlobalTheme). |
src/lib/utils.ts |
Adds cn() helper for clsx + tailwind-merge (shadcn convention). |
src/index.tsx |
Imports Tailwind CSS entrypoint into the app. |
src/index.css |
Tailwind directives (@tailwind base/components/utilities) entry file. |
src/components/ui/button.tsx |
Adds initial shadcn-style Button component using Radix Slot + CVA. |
package.json |
Adds Tailwind/shadcn deps and bumps React + TypeScript versions. |
config/webpack.config.js |
Runs Tailwind in PostCSS and adds .mjs handling for Webpack 4 interop. |
components.json |
Adds shadcn/ui generator configuration and import aliases. |
.eslintrc.js |
Updates internal import-sort grouping to include lib. |
.eslintignore |
Ignores Tailwind config and CSS files from ESLint. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
edwinzhng
reviewed
May 29, 2026
edwinzhng
approved these changes
May 29, 2026
edwinzhng
left a comment
edwinzhng
left a comment
Member
There was a problem hiding this comment.
nice, do you want me to help w this? i feel like a decent order of operations would be:
- upgrade react + all packages for security purposes
- migrate from yarn -> bun
- rebuild components w/ tailwind
- swap in new components
- add better graphql types
Member
Author
|
yeah you should take over dawg - i have not really used these libraries that much |
Resolve conflicts in package.json and yarn.lock from the React 18 + dependency bump on main (#244). Take main's versions for React 18.3.1, react-dom 18.3.1, react-apollo ^3.1.5, @typescript-eslint/* ^5.0.0, and typescript 4.9.5. Keep autoprefixer ^10.4.19 from this branch (required for tailwind). Regenerate yarn.lock from main + yarn install so the tailwind/shadcn deps are present. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
jerryzhou196
added a commit
that referenced
this pull request
Jun 1, 2026
Pull in Tailwind + shadcn (#240), which landed on main after the previous merge. yarn.lock stays deleted; bun.lock regenerated by migrating main's yarn.lock so the new deps (tailwindcss, @radix-ui/react-slot, clsx, class-variance-authority, tailwind-merge, autoprefixer) resolve to the versions main uses. Verified: `bun install --frozen-lockfile`, `bun run lint-nofix`, and the production build (now exercising tailwind/postcss) all pass under Bun. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
After ejecting from CRA, we can easily add Tailwind and Shadcn to the config.
GlobalTheme.tsxin theming for tailwindcomponents.json,lib/utils.tswithcn(), initialButtoncomponent). The Button is included as a starter component for future use and is intentionally not rendered yet — actual component swap-in is planned for a follow-up PR (see review thread for order of operations).Other Updates (post-merge with main #244):
react/jsx-runtime(added in 16.14). Subsequently merged main's React 18 upgrade (#244)..d.tsfiles use inline type export modifiers (export { type SlotProps }), added in TS 4.5. TS 3.8 cannot parse this syntax (TS1005 ',' expected);skipLibCheckdoes not help because it's a syntax error, not a type error.New dependencies for Tailwind + shadcn:
tailwindcss,tailwindcss-animate,@radix-ui/react-slot,class-variance-authority,clsx,tailwind-merge.