nx: use @tailwind keyword in a lib

user_5065235 0
Viewed 331

I'm creating a styling library in my monorepo, and I want this library to import classes from the tailwindcss library, as well as define a couple more custom classes (with @apply keyword), like so

/*libs/shared/ui-styles/src/lib/styles.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply focus:outline-none py-2 px-4 rounded transition ease-in-out duration-150 inline-flex items-center;
  }
}

With the following update to the build target options in my workspace.json file

"styles": ["apps/example/src/styles.css", "libs/shared/ui-styles/src/lib/styles.css"],

This does not load the tailwindcss classes when I run my application. If I add the tailwind imports to the css file of my application, it does work, but I want to extract this to my styling library.

Can someone tell me how to make the @tailwind keyword work in my library? Thank you

Ps. any other "normal" css (for example css variables) in that library file works just fine.

monorepo nrwl-nx tailwind-css
1 Answers

I'll answer my own question as a found a solution. I've installed the postcss-import plugin, and added it to the postcss.config.jsfile in my application.

Now I can have a library for all my global styles (including the @tailwind imports), and then simply import this stylesheet from the library in my applications with the @import keyword.

This will still purge all the unnecessary classes that are not used in my applications.

user_50652350
Related