docs: clarify CSS transformation in Vite installation guide #8624
+125
−0
Conversation
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
|
@SpacePlushy is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
Looks like this PR modifies files in Consider applying the change to |
Fixes shadcn-ui#8542 The Vite installation documentation now explains that the `npx shadcn@latest init` command automatically adds CSS variables and theme configuration to the CSS file. Changes: - Added callout after CSS import step explaining the init command will modify the file - Added "Verify your CSS file" section showing the expected CSS structure after init - Included explanatory notes about what each part of the transformation adds - Added troubleshooting guidance if CSS variables are missing This addresses the issue where users following the docs would see components with missing/bugged styling because they didn't realize the init command should have added the necessary CSS variables. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Fixes #8542 - Adds clarification to Vite installation docs about CSS transformation during the init process.
Problem
Users following the Vite installation guide were seeing components with missing or bugged styling. The documentation instructed users to set up
@import "tailwindcss";in their CSS file, but didn't explain that thenpx shadcn@latest initcommand automatically adds CSS variables, theme configuration, and base styles to this file.This left users with incomplete CSS when they didn't realize the init command should have modified their file, or when the init process failed silently.
Changes Made
1. Added clarification callout after CSS import step
@import "tailwindcss";is the correct Tailwind CSS v4 way2. Added "Verify your CSS file" section after init step
3. Added transformation explanation
4. Added troubleshooting guidance
Files Changed
apps/www/content/docs/installation/vite.mdx- Added clarification and verification sectionsapps/v4/content/docs/installation/vite.mdx- Same updates for consistencyTesting
Impact
This documentation improvement will help users:
🤖 Generated with Claude Code