Integrations

Connect TW Builder with Tailwind CSS, Figma, and AI providers

Tailwind CSS

TW Builder uses Tailwind CSS for all element styling. By default, the builder loads Tailwind CSS from the official CDN, which provides instant compilation of any Tailwind class you use. This section explains how to configure Tailwind CSS integration for your workflow.

How It Works

When you add Tailwind classes to elements (like text-xl, bg-blue-500, or p-4), the Tailwind CSS engine compiles them into actual CSS. The builder offers two modes for this compilation:

  • CDN Mode - Uses the Tailwind Play CDN for instant, browser-based compilation
  • Custom Build - Use your own Tailwind configuration and build process

Settings Reference

Setting Description Default
CDN Mode Load the Tailwind Play CDN for instant class compilation. When enabled, any Tailwind class works immediately without a build step. Enabled
Custom Config Override the default Tailwind configuration. Enter JavaScript that extends or replaces the default config. Only applies when CDN Mode is enabled. Empty
Safelist Additional Tailwind classes to always include, even if not used in your content. One class per line. Useful for dynamic classes generated by PHP or JavaScript. Empty
CDN vs Custom Builds

CDN Mode is simpler and great for development, but loads the entire Tailwind library (~300KB). For production sites with many pages, consider disabling CDN Mode and using a build process with PurgeCSS to generate smaller, optimized CSS files containing only the classes you actually use.

Custom Configuration Example

You can extend the default Tailwind config by entering JavaScript in the Custom Config field:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'brand': '#ff6b35',
        'brand-dark': '#d4552a',
      },
      fontFamily: {
        'display': ['Playfair Display', 'serif'],
      }
    }
  }
}

Figma Import

Import designs directly from Figma into TW Builder. The Figma Import feature converts Figma frames into builder elements with Tailwind CSS classes, preserving layout, typography, and colors.

Prerequisite

Requires a Figma personal access token. You can generate one from your Figma account settings.

Getting a Figma Access Token

  1. Go to Figma Account Settings - Visit figma.com/developers/api#access-tokens
  2. Generate a Token - Click "Create a new personal access token" and give it a descriptive name
  3. Copy the Token - The token is only shown once, so copy it immediately
  4. Paste in TW Builder - Enter the token in the Access Token field below

Settings Reference

Setting Description Default
Access Token Your Figma personal access token. This is stored securely and used to fetch designs from the Figma API. Empty
Default Font Mapping How to handle fonts from Figma that aren't available on the web. Choose to map to theme fonts, use system fonts, or prompt for each import. Prompt

Import Workflow

To import a design from Figma:

  1. Copy a Figma file URL or frame URL from your browser
  2. Click the Import from Figma button in the builder sidebar
  3. Paste the URL and click Fetch
  4. Map any custom fonts to your theme fonts (if prompted)
  5. Preview the converted elements and click Insert

For more details on the Figma Import feature, refer to CLAUDE.md in the theme root which documents the full Figma Import System including font detection, color mapping, and element conversion.

AI Assistant

The AI Assistant helps you build pages faster by generating sections, layouts, and content from natural language descriptions. It can also analyze your designs and suggest improvements.

Pro Feature

The AI Assistant is available with Pro and Agency licenses. You'll also need to provide your own API key from at least one supported provider.

Supported Providers

TW Builder supports multiple AI providers for text generation and image analysis. Each provider has different strengths:

Provider Models Strengths
OpenAI GPT-4o, GPT-4o-mini Best overall quality, excellent at following complex instructions, vision capabilities for design import
Anthropic Claude Sonnet Excellent at longer context, nuanced content, and detailed explanations
Google Gemini 2.0 Flash Fast responses, good for quick iterations, competitive pricing

Settings Reference

Setting Description Default
Enable AI Assistant Show the AI chat panel in the builder sidebar. When disabled, all AI features are hidden. Disabled
Text Provider Which AI provider to use for generating page sections and content. Choose based on your preference and which API keys you have configured. OpenAI
Image Provider Which provider to use for vision features (analyzing uploaded design mockups). Currently only OpenAI GPT-4o supports vision. OpenAI
OpenAI API Key Your OpenAI API key for GPT-4o access. Empty
Anthropic API Key Your Anthropic API key for Claude access. Empty
Google AI API Key Your Google AI API key for Gemini access. Empty

Getting API Keys

Each provider has their own process for obtaining API keys:

API Key Security

Your API keys are stored securely using WordPress encryption. Never share your API keys or commit them to version control. Each provider bills you directly based on your usage.

Usage and Costs

AI providers charge based on the number of tokens (roughly words) processed. Typical costs for generating a page section:

  • OpenAI GPT-4o - $0.01 - $0.05 per section
  • Anthropic Claude - $0.02 - $0.08 per section
  • Google Gemini - Less than $0.01 per section

You can monitor your usage in the Logs page, which tracks AI requests and estimated token usage.

Saving Settings

Click Save Settings at the bottom of the panel to apply your changes. Integration settings take effect immediately. Test your integrations by:

  • Tailwind CSS - Add a new Tailwind class to an element and verify it applies correctly
  • Figma - Try importing a simple frame from Figma
  • AI Assistant - Open the AI panel and send a test message