Tailwind CSS doesn't process styles in a React library

[maxkoretskyi]

Current Behavior

Tailwind @apply directive isn't processed by Tailwind in a React library.

All works good with the main application.

Expected Behavior

Tailwind @apply directive should be processed by Tailwind in libraries same way as in the main application.

Steps to Reproduce

1. I followed the steps described here. All worked well for the main application.
2. Created a library with nx g lib ui. Added @apply tailwind directive to the styles of the generated component.
3. The directive is kept as is in the source files and so the browser doesn't recognize it.

I did a bit of debugging, and it seems that ...createGlobPatternsForDependencies(__dirname), correctly adds second entry to the content property of the tailwind.config.js. Here is what I saw while debugging:

"D:\playground\nx-react\apps\me\{src,pages,components}\**\*!(*.stories|*.spec).{ts,tsx,html}"
"D:\playground\nx-react\libs\ui\src\**\!(*.stories|*.spec).{tsx,jsx,js,html}"

Minimal github repo is here. Here's generated tailwind.config.js and postcss.config.js.

Environment

 >  NX   Report complete - copy this into the issue template

   Node : 16.14.0
   OS   : win32 x64
   npm  : 8.3.1

   nx : 14.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:

[ahkhanjani]

Styles are compiled with the library before rendering in the app. So it has no idea what @apply is.

Either put the Tailwind classes inside the tsx file in the className prop directly, or copy both postcss.config.js and tailwind.config.js into the lib root. As for the Tailwind config, here's how to prevent the duplication:

// libs/ui/tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = { presets: [require('../../apps/me/tailwind.config.js')] };

[jaysoo]

This issue is due to the postcss.config.js not applying to the UI library. By default, postcss will apply the closest postcss.config.js file to the file being processed.

In this case, there is no postcss.config.js for the library, so nothing is applied.

You can fix by manually setting the app's postcss config to be applied to everything (and opt out of the default behavior).

{
   // ...
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        // ...
        "postcssConfig": "apps/me/postcss.config.js", // <--- This is the fix
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
  // ...
}

I'll update the guide to include this information. The reason why we cannot just make this the default behavior is that the libraries may have their own postcss/tailwind config.

[maxkoretskyi]

@jaysoo appreciate quick reply! yeah, it would be great to have this in the doc :)

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.