Issue Title:
Tailwind CSS Not Rendering Correctly When "ui" Library Is Used as a Package in Consuming Applications
Issue Description:
I'm encountering a problem where Tailwind CSS is not rendering as expected when my "ui" library is used as a package indifferent
applications, particularly in Storybook previews. The styling does not match what I see during development and testing within the "ui" library storybook.
Certainly, I've modified the steps as you requested:
Steps to Reproduce:
Install the "ui" package using a package manager like npm or yarn by running:
npm install ui
or
yarn add ui
Import a specific component, for example, EmailRegister, in your consuming application. This can be done in your code file like this:
import { EmailRegister } from 'ui';
Navigate to the "ui" library folder located either in the "packages/ui" directory or in "node_modules/ui."
Run Storybook using your preferred package manager, for example, if you're using pnpm, you can run:
pnpm storybook
This will display Storybook, allowing you to identify and investigate any discrepancies or rendering issues with the EmailRegister component.
These steps should help you identify and analyse any rendering issues within the Storybook environment.
Expected Behavior:
Tailwind CSS classes and styling from the "ui" library should render correctly and as designed within the consuming application, including Storybook previews.
Actual Behavior:
The Tailwind CSS styling within the consuming application does not match the expected design, and there are inconsistencies or issues in the rendering.
Additional Information:
"ui" Library Version (workspace)
Consuming Application: [apps/web, aswell as Storybook]
We've successfully integrated Tailwind into our application within a test repository on my local machine. However, we haven't yet tested its compatibility with Storybook.
Issue Title: Tailwind CSS Not Rendering Correctly When "ui" Library Is Used as a Package in Consuming Applications
Issue Description: I'm encountering a problem where Tailwind CSS is not rendering as expected when my "ui" library is used as a package indifferent
applications, particularly in Storybook previews. The styling does not match what I see during development and testing within the "ui" library storybook.
Certainly, I've modified the steps as you requested:
Steps to Reproduce:
Install the "ui" package using a package manager like npm or yarn by running:
or
Import a specific component, for example, EmailRegister, in your consuming application. This can be done in your code file like this:
Navigate to the "ui" library folder located either in the "packages/ui" directory or in "node_modules/ui."
Run Storybook using your preferred package manager, for example, if you're using pnpm, you can run:
This will display Storybook, allowing you to identify and investigate any discrepancies or rendering issues with the EmailRegister component.
These steps should help you identify and analyse any rendering issues within the Storybook environment.
Expected Behavior: Tailwind CSS classes and styling from the "ui" library should render correctly and as designed within the consuming application, including Storybook previews.
Actual Behavior: The Tailwind CSS styling within the consuming application does not match the expected design, and there are inconsistencies or issues in the rendering.
Additional Information:
Environment:
Screenshots or Code Snippets:
vs
Related Issues: