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.

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.

1<script src="https://cdn.tailwindcss.com"></script>
2<script>
3  tailwind.config = {
4    theme: {
5      extend: {
6        colors: {
7          brand: '#3b82f6'
8        },
9        fontFamily: {
10          sans: ['Inter', 'sans-serif']
11        }
12      }
13    }
14  }
15</script>

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.

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

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.

1/* In Bubble's Custom CSS editor — Settings → General → Custom CSS */
2/* Applies Tailwind-like styles to native Bubble elements by targeting their generated classes */
3.bubble-element.Button {
4  background-color: #3b82f6 !important;
5  border-radius: 9999px !important;
6  font-weight: 600 !important;
7  padding: 12px 24px !important;
8  color: white !important;
9  border: none !important;
10  cursor: pointer !important;
11  transition: background-color 0.2s ease !important;
12}
13
14.bubble-element.Button:hover {
15  background-color: #2563eb !important;
16}

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.

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

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.