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

[DaniFrancisco]

Thank you for sharing your experience @webcodavic!

I ended up using CSS modules and so far I'm happy with it.

Even solving the problem of the preflight styles at layout level with Tailwind, as you demonstrated, I couldn't get around 2 other things:

• If preflight styles are not included at component level, how do you include them while developing? I've experimented with a css preprocessor at vite.config level, which worked, but not the most elegant solution
• And to me the ultimate dealbreaker with Tailwind: If two different HS React components use the same class (let's say, flex), the build process is done per component, meaning we don't end up with a single Tailwind stylesheet with a single flex class. You get two stylesheets with the flex class, I believe - didn't actually experimented but it's my assumption based on how the build process seems to work with cms-react. For me this defeats the purpose of using Tailwind and, personally not being the biggest fan of Tailwind's syntax, ended up going to CSS modules