Setup Tailwind CSS with Turborepo!

In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

The GitHub repo for this blog is added in the references.

We have created a basic app template using the npx create-turbo@latest.

I have made a small change in that template, by moving pages, styles into the src folder, so the folder structure would look something like:

1.
2|-- apps
3|   |-- docs
4|   |   `-- src
5|   |       |-- pages
6|   |       `-- styles
7|   `-- web
8|       `-- src
9|           |-- pages
10|           `-- styles
11`-- packages
12    |-- config
13    |-- tsconfig
14    `-- ui
15        `-- components

1. Installing Tailwind.

We’ll start off by installing tailwindcss, postcss and autoprefixer at the root of your project.

1yarn add -DW tailwindcss postcss autoprefixer

Optionally you can also install prettier-plugin-tailwindcssfor sorting those tailwind classes in the components. Check the references below to learn more.

Our root package.json would look like:

1{
2  // ...
3  "devDependencies": {
4    "autoprefixer": "^10.4.2",
5    "postcss": "^8.4.6",
6    "prettier": "^2.5.1",
7    "prettier-plugin-tailwindcss": "^0.1.7",
8    "tailwindcss": "^3.0.23",
9    "turbo": "latest"
10  }
11  // ....
12}

2. Creating tailwind.config.js and postcss.config.js

In our packages/config, let’s create tailwind.config.js and postcss.config.js

  • In tailwind.config.js, add the following:
1module.exports = {
2  content: [
3    '../../packages/ui/components/**/*.{ts,tsx}',
4    './src/**/*.{ts,tsx}',
5  ],
6  theme: {
7    extend: {},
8  },
9  plugins: [],
10};
  • In postcss.config.js, add the following:
1module.exports = {
2  plugins: {
3    tailwindcss: {},
4    autoprefixer: {},
5  },
6};

3. Using the above configs in our apps and packages

  • We have created the common configs, Now we are ready to use them in our apps/web, apps/docs or app/{name} directories.

  • Again create tailwind.config.js and postcss.config.js in our apps/{name} directories and in packages/ui

Add the following in the files:

1/*
2apps/web/tailwind.config.js
3apps/docs/tailwind.config.js
4packages/ui/tailwind.config.js
5*/
6module.exports = require('config/tailwind.config');
1/*
2apps/web/postcss.config.js
3apps/web/postcss.config.js
4packages/ui/postcss.config,js
5*/
6module.exports = require('config/postcss.config');

Lastly, in our next.config.js for both web and docs add this if it’s not already present:

1const withTM = require('next-transpile-modules')(['ui']);
2
3module.exports = withTM({
4  reactStrictMode: true,
5});

That’s it! You are now ready to use Tailwind CSS with Turborepo!

If you found this blog helpful then do share it with others!

References

My Socials