Trying to consolidate classes

Visual Editor Help
1

Hi there

as an example, this is the unedited code output for a simple nav

<Link to="/" className="text-black font-poppins text-xl font-normal hover:text-white transition-colors">
                Home
              </Link>
              <Link to="/about" className="text-black font-poppins text-xl font-normal hover:text-white transition-colors">
                About us
              </Link>
              <Link to="/faqs" className="text-black font-poppins text-xl font-normal hover:text-white transition-colors">
                FAQs
              </Link>
              <Link to="/pricing" className="text-black font-poppins text-xl font-normal hover:text-white transition-colors">
                Pricing
              </Link>

and have tried to consolidate the class names to replace, as an example, text-black font-poppins text-xl font-normal hover:text-white transition-colors to simply footerLinks eg <Link to=“/pricing” className="footerLinks”>Pricing

I have added the class name in the style bar

image
image812×1178 39.1 KB

but the class names are coming out as

class=”footerLinks text-black font-poppins text-xl font-normal hover:text-white transition-colors”

Am I doing something wrong? Is there a way to name elements using a simple naming convention of my own or do I have to keep the builder generated class names in as well?

Thanks

2

Hello @Penfold,

You’re not doing anything wrong — Builder.io just merges your custom class with the generated Tailwind classes by default. That’s why you’re still seeing

class="footerLinks text-black font-poppins ..."

If you really want the element to only have your custom class and skip Builder’s generated styles, you have try using AI chat

Use the AI chat inside Builder.io — just open the AI panel and tell it something like:

“Replace the current class list on this element with a single class called footerLinks”
The AI will remove the extra classes for you and apply only the class name you want.

Something like the above should work.

Hope this helps!

Thanks,

3

Thank you @manish-sharma - being new to this what is ‘best practice’?

Coming from a a traditional environment it just seems messy but that might just be my take.

Genuinely interested in improving my output and happy to do so if these long class names are normal practice

4

You’re welcome!

In a traditional development setup, you’d typically see short, semantic class names (like footerLinks or main-nav-item) that are defined in a stylesheet or CSS module. This keeps markup clean and separates design from content.

However, in a Tailwind-first workflow (which Builder.io uses under the hood), long utility-based class strings are actually normal practice. Each utility class does one job — text-black for color, text-xl for font size, hover:text-white for hover color, etc. The trade-off is:

  • Pros: No hunting through CSS files, styles are visible right in the markup, and unused styles can be purged for small CSS bundles.

  • Cons: Markup can look “messy” and harder to scan if you’re not used to it.

Best practice really depends on your team and workflow:

  • If you want cleaner markup, define your own reusable classes (e.g., .footerLinks) in a stylesheet or Tailwind config and apply those instead of stacking utilities everywhere.

  • If you want maximum flexibility and no CSS maintenance, keep the utility classes in the markup — this is what most Tailwind users do.

In Builder.io specifically, you can strip it down to your own classes, but you’ll need to clear styles in the Style tab or use AI to replace the generated classes (otherwise Builder merges them).

So — messy or not is a matter of perspective. Utility-first styling is the “norm” in Tailwind land, but semantic classes are still totally valid if that fits your background better.

5

OK I can see that and go with that but how doni apply a builder generated class on another element eslewhwr? Or is that just me coming at it from old school?

6

Hello @Penfold,

Builder-generated classes are applied automatically — you don’t need to add them manually.

However, if you want to apply your own custom class to an element (or reuse a class you’ve defined elsewhere), you can do so via:

Style tab → Advanced → CSS class

From there, just enter the class name, and Builder will add it alongside the generated classes.

image
image688×1000 31.2 KB