How to Add CSS Classes to Retool Components

If you've tried to add a CSS class to a Retool component, you've already hit the wall: Retool does not natively support assigning custom CSS classes to individual components. This is one of the most-requested features in the Retool community, and until it ships, developers are stuck repeating styles across component-specific selectors like ._retool-table1, ._retool-table2, and so on. This guide shows you the best workaround available today to add CSS class-like behavior to Retool components so your styles stay reusable and maintainable.

Why You Can't Just Add a CSS Class in Retool (Yet)

In standard web development, you'd slap a class like .has-shadow onto any element and call it a day. Retool's visual builder doesn't expose a "CSS class" field on components, which means you can't do this directly. Every component gets an auto-generated selector — for example, a table named table1 gets the selector ._retool-table1 for the element itself and ._retool-container-table1 for its wrapper container. If you want to apply the same style to ten tables, you have to list all ten selectors explicitly. That's a maintenance nightmare.

The Best Workaround: Group Selectors in Custom CSS

The closest thing to a reusable CSS class in Retool today is a grouped selector block inside the app's custom CSS override. Instead of repeating your declaration for every component, you list all the component selectors together, separated by commas, pointing at a single set of rules. Here's what that looks like for adding a box shadow to multiple tables:

._retool-table1, ._retool-table2, ._retool-table3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

It's not as elegant as a true CSS class, but it centralizes your styles in one place. When you need to update the shadow, you change it once.

How to Add Custom CSS Overrides in Retool

• Open your Retool app in the editor.
• Click the App settings panel (the gear or settings icon, usually in the left or top toolbar).
• Locate the Custom CSS section.
• Paste your grouped selector block into the CSS editor field.
• Save and preview — the styles will apply to all listed components immediately.

For styles you want to reuse across multiple apps, navigate to your Retool Organization settings and add the CSS there instead. Global CSS overrides apply site-wide, so a single .has-shadow-equivalent block covers every app in your workspace without copy-pasting.

Styling the Element vs. the Container Separately

Retool wraps most components in a container element. This means you have two distinct selectors to work with for each component:

• ._retool-table1 — targets the inner component element itself
• ._retool-container-table1 — targets the outer wrapper container

This distinction matters. If you're adding a shadow and it's being clipped or ignored, try applying the style to the container selector instead of the element selector. If you want padding or margin changes to affect layout spacing, the container is usually the right target. You can style both independently in the same CSS block:

._retool-container-table1, ._retool-container-table2 { padding: 16px; } ._retool-table1, ._retool-table2 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

Simulating a Reusable CSS Class with a Naming Convention

Here's a practical pattern that mimics class-based styling as closely as possible in Retool today:

• Define your "class" as a CSS comment block at the top of your custom CSS, documenting what components belong to each style group.
• Name your Retool components consistently — for example, prefix all shadowed tables with shadow_table_ so their selectors are predictable: ._retool-shadow_table_1, ._retool-shadow_table_2, etc.
• Group those selectors under a single rule block and add a comment above it like /* .has-shadow */ so any developer on your team understands the intent.
• When you add a new component to the "class," just append its selector to the group — one line change, done.

When Will Retool Support Native CSS Classes?

As of this writing, native CSS class support for Retool components is an open feature request with significant community demand. Retool's team has acknowledged the ticket internally. Until it ships, the grouped selector approach in custom CSS is the most maintainable solution available. If this feature matters to your team, upvoting the Retool community thread directly helps move it up the priority queue.

Key Takeaways

• Retool does not currently support adding CSS classes directly to components.
• Use grouped selectors in the app's Custom CSS panel to simulate reusable class behavior.
• For global styles, use Organization-level CSS overrides so rules apply across all apps.
• Remember that each component has both an element selector (._retool-componentName) and a container selector (._retool-container-componentName) — use the right one for your use case.
• A consistent component naming convention makes grouped selectors far easier to manage at scale.