Turborepo React app fails to load Tailwind

Question

I’ve created a monorepo with Turborepo that for now have 1 React Vite App, and tailwind-config package. And my problem for now is that my App is not loading tailwind at all. Let me try to explain you my project structure and files.

root
|
|- packages
|   |- tailwind-config
| 
`- apps
    |- container

tailwind-config module contains basic package.json, tailwind.config.js and postcss.config.js files.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {}
  }
}

Inside my container app I added tailwind-config package as the local devDependency, added Tailwind directives to my index.css.

At the end in container I created tailwind.config.cjs that looks like:

/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config")

module.exports = {
    ...sharedConfig,
    content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html"]
}

And postcss.config.cjs

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {},
  }
}

As I mentioned the problem is that container app is not applying any tailwind classes I provide.

Thank you all for help in advance and hope you have nice day :)

Corron

Did you find any fix for this? – Charmer

Answer 1

Add the exact location of .jsx/.tsx files in tailwind.config.js file e.g.:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config")

module.exports = {
    ...sharedConfig,
    content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html", "../apps/**/*.{js,ts,jsx,tsx}"]
}

Pantomimist

Answer 2

A better way to share tailwind configs is to use presets.

1. Create a tailwind-presets.js file in your shared config folder
2. Add all the configuration options you want to use in all projects

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
};

3. In each project, setup the tailwind.config.js to use the preset

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("../../packages/config/tailwind-preset.js")],
};

You can override any option individually in each project but this is a fairly straightforward way of sharing the config.

Psychopharmacology

Answer 3

I spent 3-4 hours trying to figure out why the heck my Tailwind styles were not making it through to my Next Apps from my UI library.

I had Tailwind installed in the Next apps, and any Tailwind I wrote inside of the Next app would work fine. I also had Tailwind installed in my UI library, but when I imported a component from the UI library into the Next App, it wouldn’t work.

Turns out it’s because the styles from the UI library were being purged because I was not specifying them in the content property in tailwind.config.js.

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*{.js,.ts,.jsx,.tsx}", // This line helps me
],

Indeed, you should specify all paths that needs to use tailwind in the tailwind.config.js file.

Raucous