Turborepo Tailwind Prisma Starter

The Turborepo Tailwind Prisma Starter is a Turborepo monorepo boilerplate that scaffolds two Next.js 13 App Router applications with Tailwind CSS, Prisma, and type-safe environment variables, wired together with pnpm, Docker, and shared packages.

What is the Turborepo Tailwind Prisma Starter?

The Turborepo Tailwind Prisma Starter is a starter repository created by GitHub user nicnocquee. It combines a Turborepo monorepo with Tailwind CSS, Prisma, and type-safe shared environment variables so developers can start building full-stack Next.js applications without manual configuration. The repository includes two Next.js 13 apps — web (featuring Prisma) and docs — plus a ui component library, a database package holding the Prisma schema, an env package using t3-env and zod, and shared ESLint/TypeScript configuration. It runs on Node.js 18+, pnpm 8+, Docker (for Postgres), and Turbo.

Key Features

• Turborepo monorepo — Manages multiple packages and apps with turbo run dev, running the web app on port 3000 and the docs app on port 3001.
• Two Next.js 13 App Router apps — web connects to Prisma for database access; docs serves as a separate documentation site; both use Tailwind CSS and the shared ui package.
• Shared React component library — The ui package exports Client components that are automatically annotated with the "use client" directive by a post-build script because tsup/esbuild strips the directive from source files.
• Prisma database package — The database package holds the schema and client; after running docker-compose up for Postgres, one-time migration via pnpm db:migrate:reset prepares the schema.
• Type-safe environment variables — The env package exports validated, typed variables via import { env } from "env"; you read server and client values with env.HELLO_WORLD and env.NEXT_PUBLIC_HELLO_WORLD, never directly from process.env.
• 100% TypeScript — All apps and packages are TypeScript, with shared tsconfig and eslint-config-custom (including ESLint configs for Next and Prettier).
• Automated setup script — ./dev-bootstrap.sh copies the example env file and creates symlinks into the apps and packages, making packages/env/.env the single source of truth.

Who is it for?

• Full-stack developers building a Next.js application with a Prisma-backed database — they get a pre-connected web app, a docs app, and shared UI components.
• Teams adopting a monorepo — the starter demonstrates the Turborepo + pnpm workspace pattern with shared packages, so teams can copy or extend the structure for their own projects.
• Developers who want validated environment variables — the t3-env + zod pattern in the env package shows how to keep server and client variables type-safe across multiple workspaces.

What can you do with it?

• Kick off a new product — clone the repo, run pnpm install, start Postgres with docker-compose up, migrate the database, and begin building on the web app.
• Add a documentation site — use the docs app as a second Next.js site in the same repo, reusing the ui package and the shared env configuration.
• Share UI components — put components in the ui package and consume them from both apps; Tailwind styling is bundled through the package build.

How does the starter work?

Setup takes a few steps: clone the repo, run pnpm install, copy packages/env/.env.example to packages/env/.env and execute ./dev-bootstrap.sh to create env symlinks, start the Postgres container with docker-compose up, run the one-time cd packages/database/ && pnpm db:migrate:reset, then start development with turbo run dev.

FAQ

What Node.js version is required?

Node.js 18 or newer is required, along with pnpm 8+ and Docker to run the local Postgres database. Turbo must also be installed.

How do I add a new workspace?

From the root, run turbo gen workspace to create a new app or package, or turbo gen workspace --copy to copy an existing one. To add an npm package to a workspace, use pnpm add <package_name> --filter workspace.

Why does VSCode show "Cannot find module 'ui'"?

If VSCode cannot find the ui module or other workspace modules, restart the TypeScript server by pressing Cmd+P, typing restart ts, and pressing Enter. This is a known workaround for TS module resolution in monorepos.

Can I edit environment variables?

Yes — edit the single packages/env/.env file, which is symlinked into the apps and packages by the bootstrap script. If you add or change server or client variables, you must also update packages/env/src/index.ts to keep the typed schema in sync.