Styles not being applied on components imported from an external package

[fmazanerdwallet]

Given the following code:

import { Button } from "react-component-library"

const Application: FunctionComponent = () => {
    return (
        <>
            <Button label="Click on me" />
            <div className="border-4 border-light-blue-500 border-opacity-100"></div>
       </>
    )
}

The styles set on the Button are reflected on the DOM node on the browser inspector but are not being applied.

On the other hand, the styles set on the div are both being reflected and applied correctly.

Would someone be so kind to help me with this issue, please?

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

I'm assuming that you are using JIT mode here (otherwise everything was generated for you – unless you purged).
However, JIT mode works by scanning your source files for Tailwind classes. This means that inside your purge paths you have to include the paths to your components form your library. ./node_modules/react-component-library/**/*.js for example.

This means that you have to do that for every project you are using that library in.
Alternatively, you can also create a tailwind.config.js file inside your package that already contains the correct paths. If you have that, than you can use the presets features and include that config file.

More info: https://tailwindcss.com/docs/configuration#presets

[jquense]

@RobinMalfait does that work? presets don't merge purge settings according to docs (and my experience). so if you want to add your local project files to the JIT config it would override any preset settings i believe

[RobinMalfait]

Ah right I forgot about the part that they are not getting merged. However, what you can do is expose those paths and merge them in yourself manually. For example:

let paths = require('react-component-library/paths.js')

module.export = {
  purge: ['./src/**/*.js', ...paths],
  // rest of the config
}

[vinayraghu1]

This is great and it works but want to note that this doesn't purge the CSS as you would expect. If the library contains 100s of components, the CSS will include all classes used in all components even if you are importing just one in your app.

[fmazanerdwallet]

@RobinMalfait, I'm so grateful! Including the path on the purge list definitely worked!

I'll check what @jquense mentioned later, but since that involves modifying the package and testing it I think I'm going to delay it just for now.

Thank you very much for the help!

[jquense]

I raised this as a good improvement here a bit ago: #5208

[hasanm95]

@jquense could you please, share your code with me? I am facing the same problem but can't solve it.

[federicofazzeri]

hello, is this still the best option we have to purge components imported from a library? thanks!

[jbexx]

If you're working with JIT its helpful to know that the "purge" option has been renamed to "content".
https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

[0tuedon]

This doesn't work with storybook.

[Jared-Dahlke]

@RobinMalfait how can we consume an NPM package that has tailwind in an app that does not have tailwind?

[beautyfree]

how it can be done today?

[0tuedon]

But your app has to use tailwind

[beautyfree]

By importing it directly from the package can't something like node_modules/style.css this is just an example

are you sure? if I just import a component there are no styles in my project for the classes used in this component

[0tuedon]

So you have to import it in the tailwind config as a path

[beautyfree]

yep, it works, thank you!

[0tuedon]

Check here