Tailwind CSS not applied to components without manual CSS import

[md-moijul]

Description

When consuming components from vite-react-component-library-starter, the Tailwind CSS styles are not automatically applied to the components. To get the styles working, it is currently necessary to manually import the CSS file along with the component. Ideally, importing a component should automatically include its styling without needing an additional import statement for the CSS.

Steps to Reproduce

1. Clone the vite-react-component-library-starter repository:

git clone git@github.com:rayyamhk/vite-react-component-library-starter.git

2. Install dependencies and build the library:

npm install && npm run build:lib

3. Link the library for local development:

npm link

4. Create a new project and link vite-react-component-library-starter to it:

npm link vite-react-component-library-starter

5. Use a component from the library without importing the CSS file:

   
   import { Button } from 'vite-react-component-library-starter';
   // import 'vite-react-component-library-starter/css'; 

export default function App() { return ( <>

hello world

        <Button>Click Me!</Button>
    </>
);

}

## Expected Behavior
The Button component should have Tailwind CSS styles applied without the need for manually importing the CSS file.

## Actual Behavior
The Tailwind CSS styles are not applied to the Button component unless the CSS file is manually imported

## Possible Solution ???
Is there a recommended approach or workaround for this issue? Ideally, importing a component should automatically apply its styling.

[mnlfischer]

This is an issue with Tailwind. There is no option in Tailwind to create component based css files otherwise Tailwind needs to merge all files to check if there are redundant classes and if so, which component should be now implement the styles? If both, the idea of Tailwind wont work because you would have styles twice defined.