Compiling Tailwind CSS components in monorepo
Krzysztof Żuraw

Krzysztof Żuraw @kzuraw

About: TypeScript & React + V60

Location:
Wrocław
Joined:
Oct 20, 2017

Compiling Tailwind CSS components in monorepo

Publish Date: Jul 5 '22
16 4

If you have monorepo with Tailwind CSS components in one package and application in the other you may find that Tailwind won't work for components. To fix that you need to add new entry to content inside tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}", // here is path to Tailwind CSS components package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Comments 4 total

  • Francesco Pasqua
    Francesco PasquaApr 30, 2023

    Thank you!

  • Joe Lapp
    Joe LappJul 13, 2023

    Saved my butt. Thank you!

  • Joao Hortale
    Joao HortaleSep 21, 2023

    I fixed with this glob "**/src/**/*.{js,ts,jsx,tsx}" an placed this config file on a tailwind package that can be shared with all the packages and apps that follow this path.

  • Amr
    AmrMay 26, 2024

    Thanks so much. I spent some time searching, using chatGPT, gemeni with no help, but I found this article from Google search and the solution you provided works very well.

Add comment