Setup Tailwind CSS with Turborepo!

20/2/2022 16K views 3 min read


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

1. Installing Tailwind.

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

1 yarn 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:

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

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

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:

js
{apps,packages}/{web,docs,ui}/tailwind.config.js
1 module.exports = require('config/tailwind.config')
js
{apps,packages}/{web,docs,ui}/postcss.config.js
1 module.exports = require('config/postcss.config')

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

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

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

References


Found this blog helpful? Share it with your friends!