Turborepo Vite & Tailwind starter

This is an official starter Turborepo.

What's inside?

This Turborepo includes the following packages and apps:

Apps and Packages

• web: a react vite ts app with Tailwind CSS
• ui: a stub React component library with Tailwind CSS shared by web
• eslint-config-custom: shared eslint configurations
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package and app is 100% TypeScript.

Building packages/ui

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.js 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.js to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in tailwind.config.js:

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

Utilities

This Turborepo has some additional tools already setup for you:

• Tailwind CSS for styles
• TypeScript for static type checking
• ESLint for code linting
• Jest test runner for all things JavaScript
• Prettier for code formatting

Using this example

Run the following command:

npx degit vercel/turbo/examples/with-vite with-vite
cd with-vite
pnpm install
git init . && git add . && git commit -m "Init"