As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects:
If you’ve created your own set of components styled with Tailwind and are importing them in various projects, make sure to include them in the configuration file as shown below:
// tailwind.config.js
module.exports = {
content: [
'./components/**/*.{html,js}',
'./node_modules/@my-company/components/src/**/*.js',
],
// ...
}
In a scenario where @my-company/components relies on another Tailwind-based package called @shared, the dependency tree would look like this:
- my-app
- @my-company/components
- @shared
The challenge then arises in defining the tailwind.config.js in such a way that Tailwind can extract class names from @shared. How should we approach this?