rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-08 22:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(monorepo): use tailwindcss v4 in monorepo example (#6724)

Browse Source 
* feat(monorepo): use tailwindcss v4 in monorepo example

* feat(shadcn): add monorepo tailwind detection

* feat: update default monorepo template

* fix: minor fixes

* chore(shadcn): changeset

* docs(www): update monorepo docs

* docs: updates

---------

Co-authored-by: shadcn <m@shadcn.com>
This commit is contained in:
Kaikai
2025-03-05 16:07:50 +08:00
committed by GitHub
parent 3baef994d7
commit a3fe5074c1
19 changed files with 1293 additions and 1609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/content/docs/components-json.mdx
View File

@@ -51,7 +51,7 @@ See the <Link href="/docs/installation">installation section</Link> for how to s
### tailwind.config
Path to where your `tailwind.config.js` file is located.
Path to where your `tailwind.config.js` file is located. **For Tailwind CSS v4, leave this blank.**
```json title="components.json"
{

84
apps/www/content/docs/monorepo.mdx
View File

@@ -3,13 +3,6 @@ title: Monorepo
description: Using shadcn/ui components and CLI in a monorepo.
---
<Callout>
**Note:** We're releasing monorepo support in the CLI as __experimental__.
Help us improve it by testing it out and sending feedback. If you have any
questions, please [reach out to
us](https://github.com/shadcn-ui/ui/discussions).
</Callout>
Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add
components using the CLI, but you had to manage where the components
were installed and manually fix import paths.
@@ -47,6 +40,8 @@ and [Turborepo](https://turbo.build/repo/docs) as the build system.
Everything is set up for you, so you can start adding components to your project.
Note: The monorepo uses React 19 and Tailwind CSS v4.
### Add components to your project
To add components to your project, run the `add` command **in the path of your app**.
@@ -118,7 +113,66 @@ turbo.json
2. The `components.json` file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
```json title="apps/web/components.json"
<Tabs defaultValue="v4">
<TabsList>
<TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
<TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
</TabsList>
<TabsContent value="v4">
```json showLineNumbers title="apps/web/components.json"
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "../../packages/ui/src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"hooks": "@/hooks",
"lib": "@/lib",
"utils": "@workspace/ui/lib/utils",
"ui": "@workspace/ui/components"
}
}
```
```json showLineNumbers title="packages/ui/components.json"
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@workspace/ui/components",
"utils": "@workspace/ui/lib/utils",
"hooks": "@workspace/ui/hooks",
"lib": "@workspace/ui/lib",
"ui": "@workspace/ui/components"
}
}
```
</TabsContent>
<TabsContent value="v3">
```json showLineNumbers title="apps/web/components.json"
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
@@ -141,7 +195,7 @@ turbo.json
}
```
```json title="packages/ui/components.json"
```json showLineNumbers title="packages/ui/components.json"
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
@@ -164,12 +218,12 @@ turbo.json
}
```
</TabsContent>
</Tabs>
3. Ensure you have the same `style`, `iconLibrary` and `baseColor` in both `components.json` files.
4. **For Tailwind CSS v4, leave the `tailwind` config empty in the `components.json` file.**
By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.
## Help us improve monorepo support
We're releasing monorepo support in the CLI as **experimental**. Help us improve it by testing it out and sending feedback.
If you have any questions, please reach out to us on [GitHub Discussions](https://github.com/shadcn-ui/ui/discussions).