[Re-Open] Issue with Tailwind CSS Styling Integration in React Project

[aliansyahFirdaus]

Description

From issue #7750, Before that, I would like to express my gratitude to @benjgil for assisting me in the previous issue.

However, there was a miscommunication between us, I have raised the concern in the issue, but there is a response or an assumption that the error originates from my Tailwind configuration in my React project. However, this is a misunderstanding.

I have integrated my React project with Tailwind, as can be seen in the attached image, where I have successfully created other components using Tailwind that work fine. It's only the components from Bit that are not rendering Tailwind properly.

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

Context and additional information

[benjgil]

Hi @aliansyahFirdaus Again, this cannot be a bit issue, as bit doesnt manage the tailwind configuration in your react application. I would guess that the tailwind styles being used in your bit components havent been configured in the tailwind config in your application, which is why they're not rendering properly.

you can paste your tailwind config here, both the one used in your bit compositions and the tw config from your app and we can try to work out what's missing, but in general the code inside your bit component is not 'managed' by bit, and when it gets into your application the app is responsible for producing the required tailwind styles.

Maybe you need to add node_modules/@your-bit-org to the content section of your tailwind config?

[aliansyahFirdaus]

In the Bit Project

Below is the configuration code I added to my environment. I customized the environment that is automatically generated when creating a new Bit workspace.

preview(): EnvHandler<Preview> {
  /**
   * @see https://bit.dev/docs/react-env/component-previews
   */
  return ReactPreview.from({
    mounter: require.resolve('./preview/mounter'),
    hostDependencies,
    transformers: [
      tailwindTransformer({
        cdn: true,
      }),
    ],
  });
}

I only made changes in this section, even though there are other tasks in the environment. I noticed that some blogs only modify this part (or it could be that I'm mistaken). You can also see the attached image for the folder structure to check if anything is wrong or if any configurations are missing.

In the React Project

I didn't make many changes to the configuration in my React project. I only added the following lines:

import '@fontsource/inter';
import '@learnbit-react/tailwind.tailwind-config/globals.tailwind.css';
import './assets/style/index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './router';
import ReduxProvider from '@/providers/redux';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ReduxProvider>
      <Router />
    </ReduxProvider>
  </React.StrictMode>
);

In the main file, I added import '@learnbit-react/tailwind.tailwind-config/globals.tailwind.css';, but this doesn't seem to work. It's possible that this is due to my lack of knowledge in configuration. I hope this information helps you assist me @benjgil

[aliansyahFirdaus]

I realized that the issue stemmed from not 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 install, check your location components in node_modules and add this to your tailwind config

I realized that the issue stemmed from not 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 install your package into react projec, 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: [],
};

and it works! thanks @benjgil