I created an npm package that includes React components styled with Tailwind CSS. However, when I imported the package into another project, the components rendered—but without any styles.
Through the browser’s developer tools, I could confirm that the Tailwind utility classes were present in the HTML, but the actual styles weren’t being applied.
The Cause
Tailwind CSS styles weren’t included in the consuming project. Although the utility classes existed in the DOM, the corresponding CSS wasn’t available in the browser.
The Solution
The built package includes a compiled .css file that contains all necessary Tailwind styles.
To make the styles work, I needed to explicitly import that CSS file from the package in the consuming project.
For example:
// In the main entry file of your app (e.g. index.tsx or App.tsx)
import 'my-package/styles.css';
This ensures that all the required Tailwind CSS is loaded alongside the components.
If you’re publishing reusable React components styled with Tailwind, don’t forget to:
-
Generate a CSS build during the package build process.
-
Document that the consuming project needs to import that CSS.