Getting started with Turborepo

Step-by-Step Tutorial: Getting Started with Turborepo

1. Understanding Mono Repositories and Turbo Repo:

   • Mono Repo: A collection of multiple apps and packages in a single code base.
   • Turbo Repo: A tool from Versl that manages mono repositories efficiently and speeds up tasks.

2. Setting Up a Mono Repository with Turbo Repo:

   • Run npx create turbo latest to create a new Turbo Repo.
   • Choose the directory for the new Turbo Repo.
   • Once created, you can run commands like npm run build and npm run dev.

3. Workspace and Packages in Turbo Repo:

   • Workspaces: Each application or package in the mono repo is its own workspace.
   • Packages: Shared libraries or configurations shared between apps in the mono repo.

4. Managing Dependencies and Workspaces:

   • Declare dependencies in the package.json of each workspace.
   • Use turbo.json to define pipelines for running tasks across the mono repo.

5. Running Tasks in Turbo Repo:

   • Use turbo run <task> to run tasks across workspaces.
   • Use turbo run <task> --workspace <workspace_name> to run tasks on specific workspaces.

6. Adding Tailwind CSS to Mono Repo:

   • Add Tailwind CSS to a specific workspace using the --workspace flag.
   • Share Tailwind CSS config by creating a shared package and referencing it in workspaces.

7. Configuring Tailwind CSS in Next.js Apps:

   • Create a globals.css file with Tailwind directives.
   • Import the global styles in the _app.js file of the Next.js app.

8. Testing Tailwind CSS in Mono Repo:

   • Ensure dependencies are synced between root and individual workspaces.
   • Run npm run dev to start the development server and test Tailwind CSS changes.

9. Optimizing Build Process in Turbo Repo:

   • Understand caching behavior in Turbo Repo to speed up build processes.
   • Use turbo run build to build apps and packages efficiently.

10. Finalizing Tailwind CSS Implementation:

    • Adjust Tailwind config to include specific directories like pages and components.
    • Verify that Tailwind CSS is working across different apps and shared packages in the mono repo.

By following these steps, you can efficiently set up a mono repository using Turbo Repo and integrate Tailwind CSS to share configurations and styles across multiple applications.