CODEWITHSUNDEEP
reactjstailwind-cssbittailwind-uibit.dev
Aliansyah Firdaus
Aliansyah Firdaus

Reputation: 181

Unusual Behavior: Tailwind CSS Integration with Bit.dev Components in React Project

I'm currently experiencing an issue with integrating Bit.dev components that utilize Tailwind CSS into my React project. Despite diligently following the steps outlined in the Bit.dev blog, I'm encountering an unexpected problem.

Here's the context: I created an initial Bit.dev project using the command bit new react my-proj -a teambit.react/react-env -d my.scope. Following that, I configured my environment according to the instructions provided in this blog: Integrating Tailwind CSS and Bit for Component Styling.

Afterward, I developed a component with styling with className="w-10 h-10", performed a bit tag & bit export. Interestingly, the preview on Bit.cloud displayed the component without any issues; the styling classes were applied correctly.

However, when I imported this Bit.dev component into my React project (which already had Tailwind properly set up). The component did not behave as expected. It's puzzling that when I attempted to create a simple component with the classes "w-10 h-10" (following the same pattern as the Bit.dev component) on a <div>, suddenly the previously non-functional Bit.dev component started working as intended, with proper width and height.

In essence, the styling classes only seem to work when used in another component – for instance, applying the styles to a separate <div> element.

I have also posted two issues on Bit's GitHub repository related to my complaint. One of them was closed due to a misunderstanding, while the other one is still open and awaiting a response after they requested the Tailwind config code from my React project and the config from my Bit project.

You can also take a look there and discuss the matter if you don't mind. I have explained the situation there in an organized manner

Upvotes: 0

Views: 220

Answers (1)

Aliansyah Firdaus
Aliansyah Firdaus

Reputation: 181

I realized that the issue, you must be including node_modules/@your-bit-org in the content section of the Tailwind CSS configuration

Adding this directory is crucial for correctly applying styling classes from Bit.dev components in the React project.

after installing your bit component into react project, check your location of components in node_modules and add this to your tailwind config

/** tailwind.config.js (in your react project) **/

export default {
  content: [
    './**/*.{jsx,tsx}',
    './node_modules/@your/components.**/*.{jsx,tsx}', //add this
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Upvotes: 0

Related Questions