Setup Tailwind CSS with Turborepo!

2022-02-21 -- views 2 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|-- 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


Found this blog helpful? Share it with your friends!