tailwindcss directives not working with style file outside of project

user_5065235 0
Viewed 1203

I'd like to use tailwindcss for my styles in a nx monorepo.

I made a global style lib with a global-styles.scss file to keep the global styles that should be added to every app.

@tailwind base;
@tailwind components;
@tailwind utilities;

.test {
   color: aqua;
}

#root {
  --teal: #008285;
  --iceberg: #D1F0F1;
  --polar: #F6FCFD;
  --scooter: #2BBEC3;
  --purple: #481059;
  --white: #FFFFFF;
  --red: #E8203A;
  --black: #2C2C2C;
}

in my workspace.json I've added the path to this style file to the build target.

"styles": ["apps/my-app/src/styles.scss", "libs/ui-shared/src/lib/styles/global-styles.scss"],

Now, both the test class as the css variables are picked up by my application, but none of the tailwind classes work, so the @tailwind directive doesn't work.

The tailwind.config.js and postcss.config.js live in the apps/my-app folder, and when I move the global-styles.scss file from the libs directory to this application folder, everything does work. So I wonder if there is some kind of configuration or rule that you have to keep the css files in the same (or deeper nested) location as the postcss.config file?

And I wonder if I can get the tailwind imports to work in that global styles file? Thanks for the advice or explanation!

monorepo postcss tailwind-css css
2 Answers

If someone else is struggling with this, here is how I solved it: I installed postcss-import as a node_module, and added this plugin to the postcss.config.js file in my projects that want to consume the css ui-library.

const { join } = require('path');
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: { config: join(__dirname, 'tailwind.config.js') },
    autoprefixer: {},
  },
};

Now I can create a css file in my ui-library where I define all my common styles & where I import the tailwind classes. In my apps I can import that css file with @import in the app's styles.css file. Purging will still work properly if you've configured your app's tailwind.config file as explained in the nx documentation.

user_50652350

I was having this same issue, also using an nx monorepo. My structure looked something like this:

monorepo/
|-apps/
  |-my-app/
|-libs/
  |-styles/

I ended up fixing it by creating a css file in the my-app/ directory and importing all the global styles from libs/styles into it. That css file was then loaded into my app. Something like:

my-app/index.css

@import '/libs/styles/global.css`

You'll also need to make sure you have a tailwind.config.js and a postcss.config.js file in the root of each of your apps. If you want to keep some global rules, you can extend your tailwind config with the presets key. Here's what my tailwind config in nx looks like.

my-app/tailwind.config.js

module.exports = {
  presets: [require('../../libs/shared/styles/tailwind.base')],
  content: [
    join(
      __dirname,
      '{src,pages,components}/**/*!(*.stories|*.spec).{js, jsx, ts,tsx,html}'
    ),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  plugins: [],
}
user_35503180
Related