- What is TurboRepo?
- Structure of Turborepo
- Migration to Turborepo
- Installing Tailwind CSS
What is Turborepo ?
When we are working with Monorepos it becomes a nightmare to maintain it. This is where Turborepo comes to the rescue because it helps in maintaining the complex configuration needed for a Monorepo by providing appropriate tooling to maintain Monorepo. You also get additional advantages of turborepo such as incremental build and parallel execution which you can find in the turborepo documentation.
To create a Turborepo, use the command:
npx create-turbo
Then select the name of the Turborepo and the package manager which you want to use for it. You can select package managers such as npm, yarn, etc. Turborepo will create apps and some shared configuration.
Structure of Turborepo
After successful creation of the repo, you will see this kind of folder structure:
- Apps: This folder will contain all your apps/repos. For starters, they have provided two frontend apps named docs and web.
- node-modules: These are the shared node modules accessed by the workspaces you have mentioned. If you are not familiar with yarn workspaces then I recommend you to study up on it a little bit because it will be used extensively in managing packages.
- packages: This folder contains shared configs/components which are used across the apps. This includes shared tsconfig, config, eslint-config, shared UI components, etc.
- package.json: This file contains your turbo scripts as well as yarn workspaces. You can add more workspaces here or configure the pipelines.
Migration to TurboRepo
I already have a next-app(named as next-demo) with typescript which I will migrate to Turborepo.
To be on safer side, add a version to the app-level package.json file. One common node-modules will be used at the Turborepo level for each of the repos so delete the rest of them.
Installing Tailwind CSS :
All the shared UI components will be in the packages/ui folder. Now in order to access the tailwind in that as well as inside the apps folder, install the tailwind as we install normally in a next-app and then make these changes into the content part of tailwind.config.js
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"../../packages/ui/**/*.{js,ts,jsx,tsx}",
After making the changes, your tailwind.config.js should look something like this:
To use the packages/ui add the ui dependency in the app-level package.json
Add next-transpile-modules as a dev dependency in the package.json file. We will take a deep dive into next-transpile-module some other time but for now, just add that package.
Now in the next.config.js add the following line
const withTM = require("next-transpile-modules")(["UI"]);
The final next.config.js after tailwind config will look something like this
Now you will be able to use Tailwind CSS in packages/UI and inside the app too. Link to repo