Embedding Tailwind base styles

[DaniFrancisco]

Hi,

I've been trialing Tailwind for styling with cms-react but I'm confused with the way of including Tailwind styles.

As suggested by the docs, I've been including the base styles at the top of my component, like this:

import "../../styles/tailwind.css";

export const Component = </div>;

export const meta = {
  label: "My component",
};

export * from "./fields";

my tailwind.css being

@tailwind base;
@tailwind components;
@tailwind utilities;

But, if we do that to every single component using Tailwind in a Hubspot webpage, won't we eventually end up with duplicated styling/ unnecessarily large stylesheets? Defeating Tailwind's purpose in the first place.

Based on https://github.com/HubSpot/cms-react/tree/main/examples/styling, it seems that the best practice would be to inject base styles as part of a partial and then include islands/ modules as needed. I guess that would work but then the modules wouldn't be self-sufficient. I guess my end goal here would be to leverage Hubspot's Website pages drag & drop functionality, delegating some of that stuff to non technical staff while keeping my components granular and isolated. Am I making any sense?

Thank you

[webcodavic]

Sharing from my own experience, this is what I did

1. I create GlobalCss.tsx which looks like this

   
   import '../../styles/app.css'

export default function GlobalCss() { return null }

2. In the base.layout.html that is extended on most of my templates, I included

{% js_partial path="@projects/parkline-project/src/components/partials/GlobalCss.tsx" no_wrapper=True %}

3. app.css would consist of the tailwind stuff 

@tailwind base; @tailwind components; @tailwind utilities;

This allows you to use the css without including it in every single component