Tailwind

Before you begin, it's important to be clear about what you're doing here — and what you're not doing. You cannot install Tailwind CSS in FlutterFlow. There is no npm install, no PostCSS config, and no stylesheet. Even if you export your FlutterFlow project as code and look at the web build's index.html, adding a Tailwind CDN link there would have no effect because the Flutter web widgets are rendered to an HTML canvas element, not as styled HTML DOM nodes. CSS class names simply have nothing to attach to. What you're doing instead is a design-token translation: Tailwind's opinionated design system (4px base grid, named color palette, type scale) is mathematically precise, and every value in it can be looked up and expressed as a raw number or hex code. Those raw values are what you put into FlutterFlow. The process is closer to looking up a recipe's ingredients and measuring them into a different pot — the final dish (the visual design) looks the same, even though the cooking method (the rendering technology) is completely different. This is a one-time setup step per project. Once you've entered your Tailwind tokens into FlutterFlow's Design System, every widget you add automatically has access to them.

Open your FlutterFlow project and click the Theme icon in the left sidebar (the paint palette or Design System icon). Navigate to Colors. FlutterFlow shows you a palette of named colors — Primary, Secondary, Alternate, Primary Text, Secondary Text, Primary Background, Secondary Background, and others. These are the named color slots that FlutterFlow widgets use by default. Your job is to fill these slots with the Tailwind color values from your design. For each color in your Tailwind design, click the corresponding FlutterFlow color swatch, choose Custom, and paste the hex value. For example, if your design uses Tailwind's `indigo-600` as the primary brand color, look up indigo-600 in Tailwind's docs (hex: #4F46E5) and paste that into FlutterFlow's Primary color. If your design uses `slate-900` for main text, look up slate-900 (hex: #0F172A) and put it in Primary Text. You can also add custom named colors beyond the defaults: click + to add a new named color and give it the same name as in Tailwind (e.g., create a color called `Indigo600` with value #4F46E5). This one-to-one naming makes it easier to match annotations in design handoff. Go through each color your design uses — typically 5-15 colors for a standard app. The whole step takes 10-20 minutes.

1/* Tailwind v3 Default Palette — Key Values for FlutterFlow Mapping
2   Source: tailwindcss.com/docs/customizing-colors */
3
4/* Common text colors */
5slate-900:  #0F172A  /* → FlutterFlow Primary Text */
6slate-500:  #64748B  /* → FlutterFlow Secondary Text */
7white:      #FFFFFF  /* → FlutterFlow Primary Background */
8slate-100:  #F1F5F9  /* → FlutterFlow Secondary Background */
9
10/* Common brand/accent colors */
11indigo-600: #4F46E5  /* → FlutterFlow Primary */
12indigo-500: #6366F1  /* → hover/lighter brand */
13emerald-500:#10B981  /* → FlutterFlow Tertiary / success */
14red-500:    #EF4444  /* → FlutterFlow Error */
15
16/* Common spacing reminders (Tailwind → pixels) */
17p-1  → 4px    p-2  → 8px    p-3  → 12px
18p-4  → 16px   p-6  → 24px   p-8  → 32px
19p-10 → 40px   p-12 → 48px   p-16 → 64px
20gap-4 → 16px  gap-6 → 24px  gap-8 → 32px
21
22/* Border radius */
23rounded-sm  → 2px   rounded    → 4px
24rounded-md  → 6px   rounded-lg → 8px
25rounded-xl  → 12px  rounded-2xl → 16px
26rounded-full → 9999px (pill/circle)

Tailwind's type scale is a named set of font sizes with corresponding line heights. In FlutterFlow's Design System, navigate to Typography. You'll see default text styles (Display Large, Headline Large, Title Large, Label Large, Body Large, and their Medium/Small variants). These map loosely to Tailwind's naming. FlutterFlow uses Material Design type scale names, while Tailwind uses descriptive names (text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl). Adapt them: Tailwind's `text-base` (16px) corresponds to Body styles; `text-xl` (20px) to Title styles; `text-2xl`/`text-3xl` (24px/30px) to Headline styles; `text-4xl` and above to Display styles. For each FlutterFlow Typography style, click Edit and set the Font family to match your Tailwind config (if you're using Inter, Roboto, or another Google Font, FlutterFlow has these built in — select them from the font picker). Set the Size to the Tailwind px value. Set the Weight to match (font-semibold = 600, font-bold = 700, font-medium = 500). Tailwind's line heights (leading-tight, leading-normal, leading-relaxed) correspond to FlutterFlow's Line Height multiplier (1.25, 1.5, 1.625). After setting up the Typography styles, go through your design and replace any inline font settings on Text widgets with references to these named styles.

Tailwind's spacing system is built on a 4px base unit: p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-6 = 24px, p-8 = 32px, and so on. This is the same 4px grid used by Google's Material Design (which FlutterFlow is based on), so the values translate perfectly. In FlutterFlow, padding and margin are set per-widget in the Properties panel on the right side — there are no utility classes. For each Container or Column widget, click on it in the canvas, then in the right Properties panel find the Padding section. Enter the pixel value that corresponds to your Tailwind annotation: if the Framer or Tailwind mockup says `px-6 py-3`, enter 24px for horizontal padding and 12px for vertical padding. For spacing between items inside a Column or Row (the equivalent of Tailwind's `gap-4`), look for the Spacing/Main Axis Spacing property on the Column or Row widget and enter 16px for `gap-4`. FlutterFlow doesn't have a global spacing token like a CSS variable, so you apply these values widget by widget. To enforce consistency across your team, document the mapping in a README or AGENTS.md in your repository: 'Standard card padding = 16px (p-4), standard section gap = 24px (gap-6).' This prevents collaborators from using arbitrary values that diverge from the Tailwind grid.

With colors, typography, and spacing tokens in place, build reusable FlutterFlow Components that embody the Tailwind design system. Open the left sidebar → Components → + Add Component. Build a component for each repeated UI element in your design: primary button, card, input field, navigation bar. For a primary button component, add a Container with Background Color set to your mapped Primary color, padding of 24px horizontal and 12px vertical (Tailwind `px-6 py-3`), and a border radius of 8px (rounded-lg). Add a Text child with your Body Medium typography style, white color, and center alignment. Because the button uses named Theme tokens rather than hardcoded values, changing the Primary color in the Theme later will update every button across the app instantly. Once your components are built, place them on a test screen and compare against the Tailwind mockup side by side. Adjust padding and spacing values until visual parity is achieved. Finally, run the app on a mobile device or in FlutterFlow's Local Run to verify the layout holds at real device dimensions — sometimes values that look perfect on the FlutterFlow canvas shift slightly on actual screens due to safe area insets or system font scaling.