tailwindcss does not support css file in monorepo packages

[anilpixel]

What version of Tailwind CSS are you using?

latest v3.1.4.

What build tool (or framework if it abstracts the build tool) are you using?

webpack 5.73.0

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/anilpixel/tailwind-monorepo-css-bug

Describe your issue

The css file is in a scoped package and is not transformed correctly.

I created some css files in scoped packages and configured my tailwind.config.js follow issue content - supports scoped packages path? #6889 :

// tailwind.config.js
const path = require('path');

// Assuming `@xx` is an alias for: <root>/packages
function resolvePackages(...packages) {
  return packages.map(
    (pkg) =>
      path.resolve(__dirname, pkg.replace('@demo', '../../packages')) +
      '/src/**/*.{js,ts,jsx,tsx}',
  );
}

console.log(resolvePackages('@demo/components'));
/* print:
[
  '/Users/.../tailwind-monorepo-css-bug/packages/components/src/**/*.{js,ts,jsx,tsx}'
]
*/

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

packages/components/src/component.css was:

.component {
  @apply bg-purple-600;
}

and packages/components/src/component.tsx was:

import React from 'react';

import './component.css';

export const Component = () => {
  return <div className="component text-cyan-400">component</div>;
};

The classes in the "tsx" file work fine, but the "component.css " does not, like it is not in the dependency. Here is the screenshot:

I've provided a minimal implementation that can be reproduced, please start webpack in apps/demo with npm run start to debug.

[thecrypticace]

Hey, appreciate you opening the issue. I poked around the reproduction and Tailwind CSS wasn't being called for the component.css file at all. I tracked it down to how webpack and postcss-loader process CSS files.

The PostCSS config file is inside ./apps/demo whereas the CSS file being processed is in ./packages/components. When postcss-loader compiles component.css it tries to find a PostCSS config in ./packages/components/src, ./packages/components, ./packages, and ./ none of which have a config file. This happens because PostCSS configs are loaded relative to the file being processed. Since the ./packages/components directory is not a child of ./apps/demo it will not pick up a config for the CSS and therefore does not run Tailwind CSS on the file at all.

I believe you have two options to work around this issue:

1. Move your PostCSS config to the root folder. or;
2. Add a second, identical postcss.config.js file to ./packages/components

Hope that helps!

[iway1]

I know this isn't directly related to the issue you're having but since this is the first Google search result for "Tailwind Monorepo" I thought I'd share how I fixed my issue here. In my case I just had to add the shared component package to the "content" property in tailwind.config.js to get the css to compile:

module.exports = {
    content: [
        //...
        '../web-shared/**/*.{js,ts,jsx,tsx}',
    ],
}

Here, my shared component folder is named web-shared, any stuff that's included in content will make it into the bundle.

[artemis-prime]

Was this ever fixed?? Resolution is unclear @thecrypticace
I'm having the same issue

[thecrypticace]

@artemis-prime this wasn't an issue with Tailwind but with postcss and the project setup. If you have a repo you want me to look at I can some time later this week.

[musjj]

• Move your PostCSS config to the root folder. or;

• Add a second, identical postcss.config.js file to ./packages/components

Oh wow, thanks for this answer. Lost a lot of hours over this issue so I wished I could've found this sooner. The strange thing is that this only happens with Storybook, but not Next.js. With Storybook, I had to add a postcss.config.mjs to the monorepo package containing the css file for Tailwind to work.