# Tailwind

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30–60 minutes
- Last updated: July 2026

## TL;DR

Add Tailwind CSS to Bubble by injecting the Play CDN script into Settings → SEO/metatags → Script in header, then apply utility classes through HTML element plugins. Bubble's native elements (buttons, inputs, repeating groups) do not accept arbitrary CSS classes — you must use the Bubble HTML plugin to get elements that do. For production apps, compile a CSS file instead of using the CDN.

## Tailwind in Bubble: what works and what does not

Most developers who search for 'Bubble + Tailwind' expect the experience of adding Tailwind to a Next.js or React project — install the package, add classes to elements, done. Bubble works differently, and understanding those differences upfront saves significant frustration.

Bubble is a visual no-code builder where each page element (Button, Input, Text, Repeating Group) is rendered by Bubble's own engine with Bubble-generated class names and inline styles. You cannot right-click a Bubble Button and add 'bg-blue-500 rounded-xl' to its class attribute — Bubble's element renderer does not expose a class input for arbitrary external CSS classes. This is by design: Bubble's visual style editor (Design → Styles) manages element appearance through its own system.

What you CAN do: install a plugin that provides an HTML element — a raw `<div>` or `<span>` with a class attribute you control. The 'Bubble HTML' plugin and the 'Toolbox' plugin both provide such elements. Inside an HTML element, you write raw HTML with Tailwind utility classes, and Tailwind's CDN script or compiled CSS applies the styles at runtime.

There are two ways to load Tailwind into Bubble: the Play CDN (fastest, good for prototyping, NOT for production) and a compiled CSS file (requires a small local build step, but production-safe). The Play CDN script adds 112KB to every page load and scans the DOM at runtime for class names — Tailwind's own documentation marks it as not suitable for production.

The good news: even with these constraints, Tailwind in Bubble is genuinely useful for building custom-designed sections, hero blocks, pricing tables, and marketing-style components that would be difficult to style precisely in Bubble's native Design tab. The HTML element approach gives you a full-fidelity Tailwind layout island inside an otherwise no-code Bubble page.

## Before you start

- A Bubble app on any plan — the CDN and compiled CSS approaches both work on all Bubble plans including Free
- Basic familiarity with Tailwind CSS utility classes (e.g., bg-blue-500, text-xl, flex, rounded-lg)
- The 'Bubble HTML' plugin installed from the Bubble Plugin Marketplace (free) OR the 'Toolbox' plugin (also free) — at least one is needed to get an HTML element that accepts CSS classes
- For the compiled CSS approach: Node.js installed on your local computer to run 'npx tailwindcss' (a one-time build step, not deployed to Bubble)

## Step-by-step guide

### 1. Understand Bubble's styling system and which elements can use Tailwind

Before adding any code, spend two minutes understanding Bubble's styling architecture — this prevents the most common frustration when developers first try Tailwind in Bubble.

Bubble's native elements — Button, Input, Text, Repeating Group, Icon, Image, Group, etc. — are rendered by Bubble's own engine. Each element's visual properties (color, border, font, spacing) are managed through Bubble's Design tab → Styles panel. Bubble generates its own class names and inline styles for these elements, and there is NO input field where you can add an external CSS class like 'bg-blue-500'. This is a fundamental architectural constraint of how Bubble works — it is not a bug.

What this means for Tailwind: you cannot take a Bubble Button element and make it 'the Tailwind button.' You cannot apply 'rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-6 py-3' to a native Bubble Button.

What you CAN do:
- Use the 'Bubble HTML' plugin or 'Toolbox' plugin to add HTML elements to your page. These elements render raw HTML you write — including any class attributes with Tailwind classes.
- Style non-interactive sections (hero sections, cards, banners, marketing layouts) entirely in HTML elements with Tailwind.
- For interactive elements (buttons, forms) that need Bubble's workflow system, style them in Bubble's native style editor and accept that they use Bubble's CSS, not Tailwind.
- Blend the two: use a Tailwind HTML element for layout/design, and place Bubble native elements inside it for interactivity.

Go to the Plugins tab → Add plugins → search 'Bubble HTML' → install it (free). This is the plugin that adds an 'HTML' element type to your Design palette.

**Expected result:** You understand that Tailwind cannot be applied to Bubble's native elements, and the 'Bubble HTML' plugin is installed — you can now add HTML elements to your page that accept Tailwind classes.

### 2. Add the Tailwind Play CDN to Bubble's SEO header (prototyping approach)

The fastest way to start using Tailwind in Bubble is to load the Play CDN script in your app's page head. This script scans the DOM for class names at runtime and generates the corresponding CSS — no local build step required.

In your Bubble editor, click the Settings icon (gear) in the left sidebar. Click the 'SEO / metatags' tab. Scroll down to the 'Script in header' text area. Paste this script tag:

```html
<script src="https://cdn.tailwindcss.com"></script>
```

Click 'Save'. This script loads for every page of your Bubble app. In preview mode, open any page and Tailwind classes used in your HTML elements will be applied.

You can optionally add a custom Tailwind configuration after the CDN script to set your brand colors, fonts, and spacing scale:

```html
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: {
            50: '#eff6ff',
            500: '#3b82f6',
            900: '#1e3a5f'
          }
        }
      }
    }
  }
</script>
```

IMPORTANT limitations of the Play CDN approach:
- Tailwind officially marks Play CDN as 'not for production' — it adds approximately 112KB to every page load and scans the DOM at runtime.
- It may fail if your Bubble app has Content Security Policy (CSP) headers that block external CDN scripts — this is common on white-label enterprise Bubble plans.
- Some complex Tailwind classes that require build-time processing (e.g., JIT arbitrary values like 'w-[347px]') may not work reliably with the Play CDN.

Use the Play CDN for rapid prototyping. When you are ready to move to production, switch to the compiled CSS approach in Step 5.

```
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: '#3b82f6'
        },
        fontFamily: {
          sans: ['Inter', 'sans-serif']
        }
      }
    }
  }
</script>
```

**Expected result:** The Tailwind Play CDN loads on every page of your Bubble app in preview mode. Tailwind utility classes applied to HTML elements are rendered correctly.

### 3. Add HTML elements with Tailwind classes to your Bubble page

Now that Tailwind is loaded, add HTML elements to your page design. With the 'Bubble HTML' plugin installed, you will see an 'HTML' element type available in the Add element panel (press A or click the + button in the left sidebar).

Drag an HTML element onto your page. Double-click to open it, or click the 'Edit HTML' button that appears. You will see a code editor where you can write raw HTML.

Here is a simple example — a hero section with Tailwind classes:

```html
<div class="bg-gradient-to-br from-blue-600 to-indigo-800 py-24 px-6 text-center">
  <h1 class="text-5xl font-bold text-white mb-4 tracking-tight">
    Your Product Headline
  </h1>
  <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">
    Describe your product value proposition in one or two sentences.
  </p>
  <a href="#" class="inline-block bg-white text-blue-700 font-semibold px-8 py-4 rounded-full hover:bg-blue-50 transition-colors">
    Get started free
  </a>
</div>
```

Paste this into the HTML element and click outside to close the editor. In Preview mode, the element should render as a styled hero section with the gradient background and typography. In the Bubble editor canvas, HTML elements show a gray placeholder — you must use Preview to see the Tailwind styles rendered.

To use Bubble dynamic data inside an HTML element, you can use Bubble's text substitution syntax. Click the HTML element to select it, then in the property panel look for the option to add dynamic content markers. Alternatively, pass data via the HTML element's custom properties if the Toolbox plugin's HTML element is used.

RapidDev's team has helped founders integrate design-forward components into Bubble apps — for complex layouts or interactive Tailwind components that need Bubble data, book a free scoping call at rapidevelopers.com/contact.

```
<div class="bg-gradient-to-br from-blue-600 to-indigo-800 py-24 px-6 text-center">
  <h1 class="text-5xl font-bold text-white mb-4 tracking-tight">
    Your Product Headline
  </h1>
  <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">
    A short value proposition sentence.
  </p>
  <div class="flex gap-4 justify-center">
    <a href="#" class="bg-white text-blue-700 font-semibold px-8 py-4 rounded-full hover:bg-blue-50 transition-colors">
      Get started
    </a>
    <a href="#" class="border-2 border-white text-white font-semibold px-8 py-4 rounded-full hover:bg-white hover:text-blue-700 transition-colors">
      See demo
    </a>
  </div>
</div>
```

**Expected result:** The HTML element renders a styled hero section with gradient background, responsive typography, and hover-state buttons in Preview mode.

### 4. Resolve CSS specificity conflicts between Tailwind and Bubble's styles

When Tailwind and Bubble's own CSS are on the same page, you may encounter specificity conflicts — Bubble's generated styles occasionally override Tailwind classes because Bubble uses scoped class names and inline styles with high specificity.

Specificity conflict symptoms:
- A Tailwind text color class has no visible effect
- A Tailwind background color is overridden by Bubble's default element background
- A padding or margin class is ignored

How to diagnose: open Browser Developer Tools → Elements tab → select the HTML element containing your Tailwind classes → look at the Styles panel on the right. Strikethrough CSS properties indicate they are being overridden by a higher-specificity rule. Hover over the overriding rule to see which Bubble CSS selector is winning.

Solutions:

1. Use !important selectively — Tailwind has a built-in way to add !important to any class by prefixing with '!': `!bg-blue-500` applies `background-color: rgb(59, 130, 246) !important`. Use sparingly — overusing !important creates its own specificity problems.

2. Increase selector specificity in Bubble's Custom CSS editor: instead of relying on a Tailwind class alone, add a custom class to your HTML element and scope the Tailwind-like CSS under that class.

3. Place Tailwind HTML elements in areas of the page where Bubble's default styles have minimal influence — top-level groups, full-width containers — rather than nesting deep inside other Bubble elements.

4. For the compiled CSS approach (see Step 5), use Tailwind's `important` configuration option to apply !important to all generated utilities:

```javascript
module.exports = {
  important: '#tailwind-root',
  // ...
}
```

This scopes !important to elements inside an element with the id 'tailwind-root', avoiding global conflicts.

For Bubble elements (Button, Input) that you want to style in a Tailwind-like way, use Bubble's Custom CSS editor (Settings → General → Custom CSS) to write CSS with the same visual result as your Tailwind classes, targeting Bubble's generated CSS classes.

```
/* In Bubble's Custom CSS editor — Settings → General → Custom CSS */
/* Applies Tailwind-like styles to native Bubble elements by targeting their generated classes */
.bubble-element.Button {
  background-color: #3b82f6 !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.bubble-element.Button:hover {
  background-color: #2563eb !important;
}
```

**Expected result:** Tailwind utility classes in your HTML elements are applied correctly without being overridden by Bubble's default styles. Native Bubble elements use Custom CSS overrides for consistent visual treatment.

### 5. Build a compiled Tailwind CSS file for production use

For production Bubble apps, replace the Play CDN script with a compiled CSS file. This is a one-time local build step you repeat whenever you add new Tailwind classes.

You need Node.js installed on your local computer (not on Bubble). You can download Node.js from nodejs.org. Once installed, open your computer's terminal application (Terminal on Mac, Command Prompt or PowerShell on Windows).

Create a new folder on your computer called 'tailwind-for-bubble'. Inside it, create a file named 'input.css' with:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Create a file named 'tailwind.config.js' with the content types your Bubble HTML uses. Since Bubble's page content is not a local file, use a safelist to include specific classes you know you will use:

```javascript
module.exports = {
  content: [],
  safelist: [
    { pattern: /bg-(blue|indigo|green|red|yellow|gray|white|black)-(50|100|200|300|400|500|600|700|800|900)/ },
    { pattern: /text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)/ },
    { pattern: /text-(blue|indigo|green|red|yellow|gray|white|black)-(50|100|200|300|400|500|600|700|800|900)/ },
    { pattern: /p(x|y|t|b|l|r)?-(0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|40|48|56|64)/ },
    { pattern: /m(x|y|t|b|l|r)?-(0|1|2|3|4|5|6|7|8|10|12|16|20|24|32|auto)/ },
    { pattern: /rounded(-sm|-md|-lg|-xl|-2xl|-3xl|-full)?/ },
    { pattern: /flex|grid|block|inline|hidden|items-center|justify-center|justify-between|gap-(1|2|3|4|5|6|7|8)/ },
    { pattern: /font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)/ },
    { pattern: /w-(full|screen|auto|1\/2|1\/3|2\/3|1\/4|3\/4)/ },
    { pattern: /max-w-(xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|screen|none)/ }
  ],
  theme: { extend: {} },
  plugins: []
}
```

Run in your terminal: `npx tailwindcss -i input.css -o bubble-styles.css --minify`

This generates a minified CSS file 'bubble-styles.css'. Upload this file to your Bubble app: go to the Bubble editor → click the Settings icon → General → scroll to 'SEO / metatags'. Alternatively, upload it via the Bubble File Manager (click the Database icon → File manager → Upload).

If you uploaded to File Manager, get the file URL and add to SEO/metatags Script in header:

```html
<link rel="stylesheet" href="https://yourapp.bubbleapps.io/version-test/fileupload/the_file_path/bubble-styles.css">
```

Remove the Play CDN script tag once the compiled CSS is linked — do not run both simultaneously.

```
/* tailwind.config.js — safelist approach for Bubble apps */
module.exports = {
  content: [],
  safelist: [
    { pattern: /bg-(blue|indigo|green|red|gray)-(100|200|300|400|500|600|700|800|900)/ },
    { pattern: /text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)/ },
    { pattern: /p(x|y)?-(0|2|4|6|8|12|16|24)/ },
    { pattern: /rounded(-lg|-xl|-2xl|-full)?/ },
    'flex', 'grid', 'block', 'hidden',
    'items-center', 'justify-center', 'justify-between',
    'font-bold', 'font-semibold', 'font-medium',
    'w-full', 'max-w-2xl', 'max-w-4xl', 'mx-auto'
  ],
  theme: { extend: {} },
  plugins: []
}
```

**Expected result:** A compiled 'bubble-styles.css' file is uploaded to Bubble and linked in the SEO header. The Play CDN script is removed. Tailwind utility classes render correctly in both preview and live modes.

### 6. Test Tailwind styles across Bubble preview and live modes

Bubble has two rendering environments: the editor's Preview mode (accessed via the Preview button in the top right) and the live published app. Tailwind styles must work correctly in both.

In Preview mode: click the Preview button to open your app in a new browser tab. Open the browser Developer Tools (F12 or right-click → Inspect). Verify that the Tailwind CDN script or your compiled CSS file loads in the Network tab. Inspect your HTML elements and confirm the utility classes are applied.

Common issues to check in preview:
- If utility classes are not applying, the CDN script or CSS file is not loading — check the Console tab for errors (blocked by CSP, incorrect URL, etc.)
- If some classes work but others do not, with the Play CDN this often means you are using JIT-only features that the Play CDN does not support fully — switch to the compiled CSS approach with those specific classes safelisted

In the live published app: after you publish your Bubble app, test the same HTML elements on the live URL. Sometimes behaviors differ between preview and live if there are caching differences in how Bubble serves assets.

Mobile responsiveness: Tailwind's responsive prefixes (sm:, md:, lg:) work correctly in Bubble when Tailwind is loaded. Test your HTML elements at different viewport widths using your browser's DevTools device simulation.

Verify WU consumption: Tailwind CSS (CDN or compiled file) is a static asset served from a CDN or Bubble's file storage — it does not consume Bubble Workload Units. Only Bubble Workflows and database operations consume WU. Tailwind adds zero WU cost to your Bubble app.

For native Bubble elements that need Tailwind-consistent styling, use the Custom CSS approach from Step 4 to apply equivalent styles through Bubble's CSS engine rather than Tailwind classes.

**Expected result:** Tailwind styles render correctly in both Bubble Preview and the live published app. Responsive breakpoints work correctly across mobile, tablet, and desktop viewports. The compiled CSS file loads successfully in the browser Network tab.

## Best practices

- Use the Play CDN only for prototyping and local preview — switch to the compiled CSS file approach before publishing your Bubble app to a production custom domain, as the Play CDN's runtime scanning adds significant page load overhead.
- Always use the 'safelist' configuration in tailwind.config.js when building compiled CSS for Bubble — the Tailwind CLI cannot scan Bubble's dynamic page content for used classes, so safelisting the patterns you use ensures they are included in the output file.
- Install the 'Bubble HTML' plugin (free) for Tailwind-styled layout components, but keep native Bubble elements (Button, Input, Dropdown) for interactive elements that trigger Bubble Workflows — this balances design quality with the full power of Bubble's workflow system.
- Test Tailwind styles in Bubble's Preview mode by opening Developer Tools and inspecting the applied classes — do not rely on the Bubble editor canvas preview for HTML elements, as it only shows gray placeholders.
- Keep Tailwind HTML elements as self-contained design components (hero sections, pricing tables, feature grids) rather than mixing Bubble data bindings deep inside them — keep data and interactivity in native Bubble elements placed alongside or on top of the Tailwind container.
- Use Tailwind's responsive prefixes (sm:, md:, lg:) inside HTML elements for mobile-first responsive layouts — Bubble's native responsive system and Tailwind's breakpoints operate independently, so HTML elements with Tailwind responsive classes are self-contained and do not interfere with Bubble's responsive settings.
- Avoid third-party Bubble plugins claiming to provide a 'Tailwind integration' or 'JIT compiler in Bubble' — verify they are actively maintained before installing, as abandoned plugins can break when Tailwind releases major versions.
- Consider using Tailwind CSS primarily for marketing-style public pages and falling back to Bubble's native Design tab for the authenticated app backend — this is often the most pragmatic split given Bubble's styling constraints.

## Use cases

### Build a custom-designed hero section with Tailwind utility classes

Use an HTML element plugin on your Bubble home page to create a polished hero section with Tailwind utility classes — gradient backgrounds, responsive typography, flexbox layouts, and hover animations — that would be tedious to achieve in Bubble's built-in Style editor. The HTML element sits inside your normal Bubble page layout, styled entirely with Tailwind.

Prompt example:

```
Add an HTML element to the top of the page and write a hero div using Tailwind classes: bg-gradient-to-r from-blue-600 to-indigo-700, centered heading with text-5xl font-bold text-white, and a subtitle with text-xl text-blue-100, all in a flex flex-col items-center justify-center min-h-96 container.
```

### Create a responsive pricing table with Tailwind card components

Design a pricing table with three plan cards side-by-side on desktop, stacking on mobile, using Tailwind's responsive prefixes (sm:, md:, lg:). Apply hover states for the recommended plan and conditional Tailwind classes to highlight the most popular tier. The pricing table HTML element can include Bubble dynamic data by passing values through the element's properties.

Prompt example:

```
Build a pricing table using an HTML element with Tailwind: three cards in a grid grid-cols-1 md:grid-cols-3 gap-6, each with rounded-2xl border border-gray-200 p-8 shadow-sm, a featured card with bg-blue-600 text-white border-blue-600, and a CTA button per card with the plan price as dynamic text from a Bubble repeating group.
```

### Style a Tailwind notification banner that Bubble shows or hides dynamically

Create a Tailwind-styled announcement banner (fixed to top, styled with bg-yellow-400 text-yellow-900 py-2 px-4 flex items-center justify-between) inside an HTML element, and control its visibility using Bubble's native 'This element is visible' condition. Bubble's visibility logic works on the HTML element container even when the styling inside is Tailwind.

Prompt example:

```
Add an HTML element containing a fixed-top banner styled with Tailwind. Set the HTML element's visibility condition in Bubble to 'show when Current User's announcement_dismissed is no'. Add a Bubble Workflow to the dismiss button inside the HTML element via a JavaScript action that sets the user's field to yes.
```

## Troubleshooting

### Tailwind classes are added to an HTML element but styles are not being applied in Preview

Cause: The Tailwind Play CDN script is not loading — either the script tag was not saved in Bubble's SEO header, or a Content Security Policy (CSP) header is blocking the external cdn.tailwindcss.com script.

Solution: Check Bubble Settings → SEO/metatags → Script in header and confirm the script tag is there and saved. Open the browser Console tab in Preview mode and look for CSP errors or network errors for cdn.tailwindcss.com. If CSP is the issue, switch to the compiled CSS approach (a self-hosted CSS file uploaded to Bubble's File Manager does not require loading from an external CDN domain).

### Tailwind classes are applied to an HTML element but Bubble's styles override them (visible as strikethrough in DevTools)

Cause: Bubble's generated CSS for its own elements or global page styles has higher specificity than the Tailwind utility classes. Bubble uses inline styles and scoped class names that can override externally loaded utility classes.

Solution: Add '!' prefix to the conflicting Tailwind class (e.g., change 'text-white' to '!text-white') to apply !important. Alternatively, move the HTML element outside of Bubble elements that carry default styles, or use Bubble's Custom CSS editor to apply equivalent styles directly to Bubble's CSS selectors.

```
<div class="!bg-blue-600 !text-white !rounded-xl !p-8">
  Content here
</div>
```

### The Tailwind Play CDN works in Preview but the live published app shows unstyled HTML elements

Cause: The Play CDN script or compiled CSS link tag was saved to the Test version of the Bubble app but not the Live version, or the compiled CSS file was uploaded but the URL in the link tag points to the version-test path instead of the live path.

Solution: In Bubble's SEO/metatags settings, confirm you are editing the settings for the correct version. For compiled CSS, ensure the file URL uses your app's live domain (not the editor URL) and does not include '/version-test/' in the path. Republish the Bubble app after any changes to the SEO header settings.

### Some Tailwind classes work (e.g., background colors) but others have no effect (e.g., flex, grid, hover: states)

Cause: With the Play CDN, certain JIT-compiled features or pseudo-class variants may not scan correctly. With the compiled CSS approach, the safelisted patterns may not cover the specific class names being used.

Solution: For the Play CDN: this is an inherent limitation — switch to the compiled CSS approach for consistent behavior. For compiled CSS: add the missing class names or patterns to the 'safelist' array in tailwind.config.js and rebuild the CSS file with 'npx tailwindcss -i input.css -o bubble-styles.css --minify', then re-upload to Bubble.

```
// Add to safelist in tailwind.config.js
safelist: [
  'flex', 'grid', 'block', 'hidden',
  { pattern: /hover:(bg|text|border)-/ },
  { pattern: /grid-cols-(1|2|3|4|6|12)/ }
]
```

### Bubble's native Button or Input elements cannot have Tailwind classes added to them

Cause: This is expected behavior — Bubble's native elements do not expose a CSS class input field. This is a fundamental architectural constraint of Bubble's no-code rendering engine, not a misconfiguration.

Solution: For sections and layouts: use the Bubble HTML plugin's HTML element and write raw HTML with Tailwind classes inside it. For interactive native elements (Bubble buttons that trigger workflows): style them using Bubble's Design tab or add equivalent CSS via Bubble's Custom CSS editor in Settings → General.

## Frequently asked questions

### Can I use Tailwind CSS classes on Bubble's native Button or Input elements?

No. Bubble's native elements (Button, Input, Dropdown, Text, etc.) are rendered by Bubble's own engine and do not expose a CSS class attribute for external classes. You can only use Tailwind classes on HTML elements added via the 'Bubble HTML' plugin or 'Toolbox' plugin. For native Bubble elements, use Bubble's Design tab style system or add CSS via Settings → General → Custom CSS.

### Is the Tailwind Play CDN safe to use on a live Bubble production app?

Tailwind's own documentation marks the Play CDN as 'not for production use' — it adds approximately 112KB to every page load and scans the DOM at runtime to generate CSS, which has performance implications. For a live production app with real users, build a compiled CSS file using 'npx tailwindcss -i input.css -o bubble-styles.css --minify' and upload the result to Bubble's File Manager. Reserve the Play CDN for prototyping and local preview only.

### Does using Tailwind CSS in Bubble consume Workload Units (WU)?

No. Tailwind CSS is a static styling asset — a JavaScript file (CDN) or CSS file (compiled). Loading CSS does not consume Bubble Workload Units. Only Bubble Workflows, database reads/writes, API Connector calls, and server-side operations consume WU. Adding Tailwind to your Bubble app has no impact on your WU budget.

### Do I need to install Node.js to use Tailwind in Bubble?

Only if you want to use the compiled CSS approach (recommended for production). The Play CDN approach requires no installation at all — you just add a script tag to Bubble's SEO header settings. For the compiled approach, you run 'npx tailwindcss' once on your local computer to generate the CSS file, then upload that file to Bubble. Node.js is not deployed to Bubble.

### Why are my Tailwind hover states or responsive classes not working in Bubble?

With the Play CDN, some advanced Tailwind features (certain pseudo-classes, JIT arbitrary values) may not work consistently. With compiled CSS, the specific class names for hover states (hover:bg-blue-700) and responsive prefixes (md:grid-cols-3) must be explicitly included in your tailwind.config.js safelist, since the Tailwind CLI cannot scan Bubble's pages for used classes. Add the missing patterns to the safelist and rebuild the CSS file.

### Is there an official Tailwind plugin in the Bubble Plugin Marketplace?

There is no official Tailwind CSS plugin developed by Tailwind Labs for Bubble. Some third-party plugins in the Bubble marketplace claim to provide Tailwind integration — verify they are recently maintained before installing, as outdated plugins may not support current Tailwind versions. The most reliable approach is the CDN or compiled CSS method described in this guide, which requires no plugin beyond the free 'Bubble HTML' plugin for HTML elements.

---

Source: https://www.rapidevelopers.com/bubble-integrations/tailwind
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/tailwind