Configuration

After installing and activating your license, take a few minutes to configure the essential settings. This checklist covers the recommended initial configuration to get the most out of Tailwind CSS Builder. You can always adjust these settings later, but getting the basics right now will save time as you build.

Configuration Checklist

Follow these steps to complete your initial setup:

1. Set up Global Styles - Define your brand colors, fonts, and spacing that apply across all pages. This is the foundation for consistent design.
2. Configure Header - Create or assign a custom header that will appear on your pages. You can use the builder to design your header from scratch.
3. Configure Footer - Create or assign a custom footer for your site. Like headers, footers are built using the same drag-and-drop interface.
4. Review Builder Settings - Check canvas options, enabled elements, and other builder preferences to match your workflow.
5. Set up Integrations (optional) - If you have API keys for Figma or AI providers, configure them now to enable design import and AI assistance.

Global Styles Basics

Global Styles define the core design tokens used throughout your site. Setting these up first ensures consistency across all your pages.

Colors

Define your brand color palette. These colors will be available in every color picker throughout the builder:

• Primary - Your main brand color for buttons, links, and accents
• Secondary - Supporting color for secondary actions and elements
• Background - Page background colors
• Text - Default text colors for headings and body copy

Typography

Choose your heading and body fonts. The builder supports Google Fonts and custom font uploads:

• Heading Font - Used for all heading elements (H1-H6)
• Body Font - Used for paragraphs, lists, and general text
• Font Sizes - Define the size scale for your typography

Spacing

Configure the padding and margin scale. The builder uses Tailwind's spacing system, but you can customize the base values:

• Container Width - Maximum width for content containers at each breakpoint
• Section Padding - Default vertical padding for page sections

For detailed information on all Global Styles options, see Settings > Global Styles.

Header and Footer Setup

Custom headers and footers give your site a polished, professional look. You build them using the same drag-and-drop interface as regular pages.

Creating a Header

1. Go to TW Builder > Headers in the WordPress admin menu
2. Click "Add New Header" to create a new header template
3. Build your header using the page builder - add your logo, navigation menu, buttons, etc.
4. Save and publish your header when finished

Creating a Footer

1. Go to TW Builder > Footers in the WordPress admin menu
2. Click "Add New Footer" to create a new footer template
3. Build your footer - common elements include copyright text, links, social icons, and newsletter signup
4. Save and publish your footer when finished

Assigning Headers and Footers

After creating your header and footer, assign them as defaults:

1. Go to TW Builder > Settings in the admin menu
2. Click the "Header/Footer" tab to see assignment options
3. Select your default header from the dropdown menu
4. Select your default footer from the dropdown menu
5. Save your settings to apply the changes site-wide

For more details on header and footer options, see Features > Headers and Features > Footers.

Builder Settings Overview

The Builder Settings tab in TW Builder > Settings controls how the page builder behaves. Here are the key options to review:

Element Visibility

Toggle which element categories appear in the builder sidebar. This is useful for simplifying the interface or restricting access to certain elements:

• Layout elements (Section, Container, Grid, etc.)
• Basic elements (Heading, Text, Image, Button, etc.)
• Content elements (Video, Gallery, Slider, etc.)
• Interactive elements (Accordion, Tabs, Form)
• Code elements (for PHP and template building)
• WordPress elements (Menu, Breadcrumbs, Post List)

Canvas Preferences

Customize how the editing canvas works:

• Default breakpoint - Which device view to start in (Desktop, Tablet, or Mobile)
• Show grid lines - Display alignment guides on the canvas
• Auto-save - How frequently to save your work automatically

For a complete guide to all builder settings, see Settings > Builder.

Next Steps

You've completed the initial configuration! Your Tailwind CSS Builder installation is now ready for building pages.

Ready to build? Start with our Quick Start tutorial to create your first page in about 10 minutes. You'll learn the essential builder techniques by creating a simple landing page with a hero section and feature grid.