Issue with Tailwind CSS Styling Integration in React Project

[aliansyahFirdaus]

Describe the bug

I created a Bit React project using the following command: bit new react my-proj -a teambit.react/react-env -d my.scope

Afterward, I customized my own environment and integrated Tailwind CSS into it, allowing the components to seamlessly work with Tailwind styling.

I successfully developed the components, and they worked flawlessly even after exporting them to Bit Cloud. The preview displayed correct styling with proper Tailwind integration.

However, when I integrated the components into my ReactJS project by installing the package using yarn, I encountered an issue. The Tailwind CSS styling did not integrate properly, resulting in missing styles. As a result, the components appeared unstyled (please refer to the attached screenshot).

I am wondering if there's an error in the process of installing and integrating the components into my React project. Your assistance in resolving this matter would be greatly appreciated.

Steps to Reproduce

1. Create a new Bit React project using the command: bit new react my-proj -a teambit.react/react-env -d my.scope
2. Create the env to include Tailwind CSS integration for the components.
3. Develop and design components with bit create react-component atoms/title, ensuring proper Tailwind styling.
4. Export the components to Bit Cloud and verify that the preview displays the correct styling bit tag && bit export
5. Create a new ReactJS project.
6. Install the exported components from Bit Cloud into the ReactJS project using yarn yarn add @my.scope/my-comp1
7. Start react-app yarn dev
8. Attempt to use the components within the ReactJS project and observe the missing or incorrect Tailwind CSS styling.

Expected Behavior

My expectation is that the Tailwind class styling is implemented effectively.

Screenshots, exceptions, and logs

Specifications

• Bit version: 0.1.74 (downgrade because 0.2.14 can't rename comp)
• Workspace Type: harmony
• Node version: 18.16.0
• npm / yarn version: v1.22.19

[benjgil]

Hi there
This isn't a bug, certainly not with bit :)

Tldr you just need to configure the tailwind config in your react app, in the same way as you configured it in your bit env.

Longer explanation:
The configuration you applied in bit is just for bit's bundler to be able to render your compositions (examples) on your component page.
The component itself only contains tailwind styles, not the app-level config the consuming application uses, and that will always need to be supplied by the application that is consuming your components.

Hope that helps
Benjy

[aliansyahFirdaus]

no @benjgil, I have created Tailwind components and they display correctly, so there's no issue with my Tailwind configuration in the React project.

However, specifically for the components from Bit, Tailwind fails to render its class styling.