My personal starter repo, created through an integration of the Turborepo + Next.js (with-tailwind) template and Steven Tey's Precedent starter.

This starter assumes use of:

• Next.js as a React framework
• pnpm as a package manager
• Turborepo as a build system
• Vercel for automated deployment & hosting

• basic: a Next.js app that uses CSS modules (deploys on port 3000, uses ui-basic (with tsup))
• tailwind: a Next.js app that uses Tailwind CSS (deploys on port 3001, uses ui-tailwind)
• combo-css-1: example app that uses a combination of CSS modules and Tailwind (deploys on port 3002, uses integrated ui)
• (coming soon): combo-css-2: example app that uses CSS modules, but whose stylesheets import Tailwind classes when possible (deploys on port 3003, uses ui-combo)
• (coming soon): cva: example app that uses CVA? (deploys on port 3004, uses ui-cva)

• ui: a stub React component library with Tailwind CSS, shared by both web and docs applications
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

• (coming soon) Prisma ORM- Typescript-first ORM
• (coming soon) Vercel Postgres - serverless Postgres at the Edge

• Tailwind CSS for styles
• (coming soon) Radix - React component libary
• (coming soon) Lucide Icons - open-source icon library
• (coming soon) next/font - font optimization
• (coming soon) ImageResponse - dynamic OG images at the edge
• (coming soon) one or more of the following animation libraries:
  • Framer Motion - motion library for React
  • React Spring - spring-physics React animation library
  • Renature - archived project that I may still want to pull from; see gallery

• all coming soon:
  • useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
  • useLocalStorage – Persist data in the browser's local storage
  • useScroll – React hook to observe scroll position (example)
  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • capitalize – Capitalize the first letter of a string
  • truncate – Truncate a string to a specified length
  • use-debounce – Debounce a function call / state update

• WebGL gradient
• On-demand ISR
• Vercel Analytics
• select features & config from the Next.js Enterprise Boilerplate template

This example is setup to build packages/ui and output the transpiled source and compiled styles to dist/. This was chosen to make sharing one tailwind.config.ts as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update your tailwind.config.ts to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in packages/tailwind-config/tailwind.config.ts:

  content: [
    // app content
    "src/**/*.{js,ts,jsx,tsx,mdx}",
    // include packages if not transpiling
    "../../packages/**/*.{js,ts,jsx,tsx,mdx}",
  ],

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. Assuming you have an account, run pnpm dlx turbo login from the root of your reposity to authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

pnpm dlx turbo link

• Tasks
• Caching
• Filtering
• Configuration Options
• CLI Usage