# Trying to consolidate classes

**URL:** <https://forum.builder.io/t/trying-to-consolidate-classes/15605>\
**Category:** Visual Editor Help\
**Created:** [August 14, 2025, 10:22am UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605 "2025-08-14T10:22:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@Penfold](https://forum.builder.io/u/Penfold)\
**Post date:** [August 14, 2025, 10:22am UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/1 "2025-08-14T10:22:48Z")

</div>

_Hi there_

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

```auto
<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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1106c50f22ef1431d8cb0e44d1e3c585713fafbb.png)

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 14, 2025, 6:21pm UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/2 "2025-08-14T18:21:35Z")

</div>

Hello @Penfold,

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

```auto
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](http://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,

---

<div class="post-metadata">

**Author:** ![Penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@Penfold](https://forum.builder.io/u/Penfold)\
**Post date:** [August 14, 2025, 6:37pm UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/3 "2025-08-14T18:37:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 14, 2025, 6:43pm UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/4 "2025-08-14T18:43:17Z")

</div>

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](http://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](http://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.

---

<div class="post-metadata">

**Author:** ![Penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@Penfold](https://forum.builder.io/u/Penfold)\
**Post date:** [August 14, 2025, 7:00pm UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/5 "2025-08-14T19:00:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 15, 2025, 4:00am UTC](https://forum.builder.io/t/trying-to-consolidate-classes/15605/6 "2025-08-15T04:00:13Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/01885423321df7ee1834ab9bd60bb4fc45ef6996.png)