Turbo Tailwind4 Shadcn
This is an enhanced project template based on the official Turborepo scaffold, integrated with the latest Tailwind 4 and Shadcn/ui component library.
English | δΈζ
Turborepo + Tailwind 4 + Shadcn/ui Starter
This is an enhanced project template based on the official Turborepo scaffold, integrated with the latest Tailwind 4 and Shadcn/ui component library.
Features
- π High-performance Monorepo workflow powered by Turborepo
- π Integration of the latest Tailwind 4, supporting more powerful styling features
- π¨ Built-in Shadcn/ui component library, providing beautiful and customizable UI components
- β»οΈ Full compatibility with Tailwind 3 components, seamless migration
Getting Started
Run the following command to create a project:
npx create-turbo@latest
Project Structure
Apps and Packages
web: A Next.js app@repo/ui: Shared React component library integrated with Shadcn/ui, used by thewebapp@repo/eslint-config: ESLint configurations (includeseslint-config-nextandeslint-config-prettier)@repo/typescript-config:tsconfig.jsonconfigurations used throughout the Monorepo
All packages and apps are written in TypeScript.
Integrated Tools
This project has been configured with the following tools:
- TypeScript - Static type checking
- ESLint - Code linting
- Prettier - Code formatting
- Tailwind CSS 4 - Latest version of the utility-first CSS framework
- Shadcn/ui - High-quality React component library
Tailwind 4 Features
This project integrates Tailwind CSS 4, bringing many exciting new features:
- Enhanced responsive design capabilities
- Improved theme customization options
- Optimized build performance
- New utility classes
Tailwind 3 Compatibility
We ensure full compatibility with Tailwind 3:
- Support for all Tailwind 3 class names and functionalities
- Use existing Tailwind 3 components without modification
- Smooth upgrade path for gradually adopting new features
Build
Build all apps and packages:
cd my-turborepo
pnpm build
Development
Start the development environment:
cd my-turborepo
pnpm dev
Useful Links
Learn more about Turborepo's powerful features:
