How to Integrate Retool with Tailwind

Before applying any styling, it helps to understand how Retool renders its components and where styling customization is possible. Retool apps are server-rendered React applications running in an iframe. Each built-in component (Table, Button, TextInput, etc.) is a React component from Retool's component library with its own internal class names and CSS. Because these components do not accept arbitrary className props, you cannot pass Tailwind utility classes directly through the visual editor. What you can control is: global design tokens through the Theme editor, component-specific visual properties through the Properties panel on the right side of the editor (colors, fonts, border styles for many components), and arbitrary CSS overrides through the Custom CSS section available in many components. To access Custom CSS for a component: click the component to select it, scroll to the bottom of the Properties panel on the right, and look for the 'Custom CSS' section. This opens a CSS editor where you write standard CSS. Retool applies your CSS inside the component's scope, so you can target Retool's internal class names using the browser's developer tools to inspect the rendered HTML and discover which classes to override. This inspect-and-override workflow is the foundation of Tailwind-style utility overrides in Retool.

Retool's Theme editor is the most efficient way to apply consistent brand styling across all components in an organization. Access it from the app editor: click the app menu (three dots or gear icon in the top toolbar) → Appearance, or from the organization settings at Settings → Appearance. The Theme editor presents a panel with design token categories: Colors (Primary, Accent, Background, Text, Border, Success, Warning, Error, Info), Typography (Font Family, Font Size base, Font Weight), Spacing (Base unit), and Border Radius. For each color token, enter a hex value that matches your brand or design system. The Primary color affects buttons, checkboxes, toggle switches, and focused input borders throughout all apps using the theme. Background color affects app canvas, containers, and form backgrounds. To mirror a Tailwind color palette: use Tailwind's color values directly. For example, Tailwind's blue-600 (#2563EB) as your primary, slate-50 (#F8FAFC) as background, and slate-900 (#0F172A) as the primary text color. For Font Family, enter a Google Fonts import URL in the Custom CSS section of the theme, or use system fonts that match your Tailwind config (Retool uses system-ui by default; Tailwind's sans stack starts with ui-sans-serif). After configuring the theme, click Save and Apply. The theme applies to all new apps and can be optionally applied to existing apps.

1/* Custom CSS at the Theme level to import a Google Font
2   Add this in the Theme editor's Custom CSS section
3   This makes the font available for the Font Family token */
4
5@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
6
7:root {
8  /* These CSS custom properties override Retool's design tokens
9     and affect all components using the default theme */
10  --retool-color-primary: #2563EB;
11  --retool-color-primary-hover: #1D4ED8;
12  --retool-color-background-primary: #F8FAFC;
13  --retool-border-radius: 8px;
14  --retool-font-family: 'Inter', system-ui, -apple-system, sans-serif;
15}

For component-specific styling that goes beyond theme tokens — rounded corners on a specific container, a custom shadow on a card, padding adjustments, or styled status indicators — use the component-level Custom CSS section. Click any component in the Retool editor to select it. In the Properties panel on the right, scroll to the bottom and expand 'Custom CSS'. This opens a CSS editor scoped to that component. Write CSS targeting the component's internal class names. To find class names: run your app, right-click the component element in the browser, and select Inspect in Chrome DevTools. You will see class names like retool-container, retool-table-row, or component-specific names. Target these in your Custom CSS. For a Container component styled like a Tailwind card: target the outer wrapper class and add box-shadow, border-radius, and background-color properties. For styled status text in a Table: target the cell content class and add border-radius, padding, and background-color conditionally based on the value class. Note that Retool applies Custom CSS with some specificity — you may need !important for overrides that conflict with Retool's own component styles. This is an accepted pattern in Retool's documentation.

1/* Component Custom CSS examples — Tailwind-inspired patterns
2   Applied in the component's Custom CSS section in the Properties panel */
3
4/* Card-style container (replaces Tailwind's rounded-xl shadow-md bg-white p-6) */
5.retool-container {
6  border-radius: 12px !important;
7  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important;
8  background-color: #ffffff !important;
9  padding: 24px !important;
10}
11
12/* Status badge in a Table column (replaces Tailwind's px-2 py-1 rounded-full text-sm font-medium)
13   Target Table component → Custom CSS */
14.cell-content {
15  display: inline-flex !important;
16  align-items: center !important;
17  padding: 2px 8px !important;
18  border-radius: 9999px !important;
19  font-size: 12px !important;
20  font-weight: 500 !important;
21}
22
23/* Button style override (replaces Tailwind's font-semibold tracking-wide) */
24.retool-button {
25  font-weight: 600 !important;
26  letter-spacing: 0.025em !important;
27  text-transform: none !important;
28}

For UI patterns that require full Tailwind utility class support — custom card grids, styled timelines, complex form layouts, or any design that Retool's built-in components cannot produce — use Retool's Custom Component feature. Navigate to the Component Panel in the editor, scroll to the 'Custom' section, and drag a 'Custom Component' onto the canvas. Select the Custom Component and click 'Edit source code' in the Properties panel — this opens a React code editor in Retool's interface. Custom Components are React apps running in an isolated iframe. Retool provides a model prop containing data you pass from your app, and an updateModel function for sending data back to Retool. To use Tailwind in a Custom Component, add the Tailwind CDN script in the component's HTML head section. In the Custom Component editor, find the HTML tab and add the Tailwind Play CDN script tag in the head. Then write your React component using Tailwind utility classes in the className prop. The Tailwind CDN processes class names at runtime, making all Tailwind utilities available. Pass data from your Retool queries to the Custom Component by editing the component's 'Model' property in the Properties panel — add JSON properties that map to your query data.

1// Custom Component React code with Tailwind CSS via CDN
2// Paste this in the Custom Component's code editor
3
4const { model, updateModel } = Retool.useRetoolContext();
5
6const MetricCard = ({ title, value, trend, trendLabel, color }) => (
7  <div className={`rounded-xl shadow-md bg-white p-6 border-l-4 ${color}`}>
8    <p className="text-sm font-medium text-slate-500 uppercase tracking-wide">
9      {title}
10    </p>
11    <p className="mt-2 text-3xl font-bold text-slate-900">
12      {value}
13    </p>
14    <div className="mt-2 flex items-center">
15      <span className={`text-sm font-medium ${
16        trend >= 0 ? 'text-emerald-600' : 'text-red-600'
17      }`}>
18        {trend >= 0 ? '↑' : '↓'} {Math.abs(trend)}%
19      </span>
20      <span className="ml-2 text-sm text-slate-500">{trendLabel}</span>
21    </div>
22  </div>
23);
24
25const cards = model.cards || [];
26
27Retool.useEffect(() => {
28  // You can call updateModel to send data back to Retool
29  // updateModel({ selectedCard: null });
30}, []);
31
32return (
33  <div className="p-4">
34    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
35      {cards.map((card, i) => (
36        <MetricCard
37          key={i}
38          title={card.title}
39          value={card.value}
40          trend={card.trend}
41          trendLabel={card.trendLabel}
42          color={card.color || 'border-blue-500'}
43        />
44      ))}
45    </div>
46  </div>
47);