Visitar URL original
fix(example): add missing Tailwind import to shared ui styles by sahyl · Pull Request #10579 · vercel/turborepo · GitHub
Skip to content

fix(example): add missing Tailwind import to shared ui styles - #10579

Merged
anthonyshew merged 1 commit into
vercel:mainfrom
sahyl:fix/shared-ui-tailwind-import
Jun 19, 2025
Merged

anthonyshew merged 1 commit into
vercel:mainfrom
sahyl:fix/shared-ui-tailwind-import

Conversation

@sahyl

@sahyl sahyl commented Jun 18, 2025 •

Copy link
Copy Markdown
Contributor

This PR fixes vercel/turborepo#10566 by adding the missing Tailwind import to shared-styles.css in the packages/ui directory of the with-tailwind example.

What was the problem?

Shared components like Card or Button had Tailwind classes, but styles were not applied because Tailwind layers were never included.

Screenshot 2025-06-18 165631

What changed?

Added:

@import "tailwindcss";

to packages/ui/shared-styles.css.

Result

Screenshot 2025-06-18 165704

Tested locally using:

pnpm install
pnpm dev --filter=with-tailwind

UI components are now styled correctly.

Closes #10566

@sahyl
sahyl requested a review from a team as a code owner June 18, 2025 11:18
@ghost ghost added area: examples Improvements or additions to examples needs: triage labels Jun 18, 2025
@vercel

vercel Bot commented Jun 18, 2025 •

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
examples-basic-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 11:19am
examples-designsystem-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 11:19am
examples-native-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 11:19am
examples-tailwind-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 11:19am
examples-vite-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 11:19am

@vercel

vercel Bot commented Jun 18, 2025

Copy link
Copy Markdown
Contributor

@sahyl is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

@sahyl

sahyl commented Jun 18, 2025

Copy link
Copy Markdown
Contributor Author

Hi! This is my first contribution — happy to improve anything if needed. Thanks for taking a look 🙏

@BennettDixon

BennettDixon commented Jun 18, 2025 •

Copy link
Copy Markdown

+1 encountering this issue after setting up from the example; this fix works for me.

@anthonyshew anthonyshew left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks!

@anthonyshew
anthonyshew merged commit e2bf0b0 into vercel:main Jun 19, 2025
@sahyl

sahyl commented Jun 19, 2025

Copy link
Copy Markdown
Contributor Author

My first PR — fun learning experience. Appreciate the review and merge! excited to contribute more soon 🙌

@sahyl
sahyl deleted the fix/shared-ui-tailwind-import branch June 19, 2025 18:35
anthonyshew pushed a commit that referenced this pull request Oct 13, 2025
### Description
Update the Tailwind v4 Guide to detect the classes used in the shared UI
package.

By default Tailwind detects classes in the current working directory.

To detect classes used in the `@repo/ui` packages we need to **either**
include add `@import 'tailwindcss';` in that package's `style.css`
**or** add the ui package as a source.

While the former was done in the [with-tailwind
example](#10579), it can lead to
duplicate classes and
[conflicts](#10657).

You can find Tailwind's documentation about this here:
https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources.

In order for Tailwind to pick up the classes used in the `@repo/ui`
package the web styles need
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: examples Improvements or additions to examples

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TailwindCSS Styles Don't Apply to NextJS App on Example Repo with-tailwind

3 participants