Framework Integrations

Turbo Themes works with any CSS framework. Choose your integration method based on your project.

Available Integrations

Framework	Integration Type	Complexity
Pure CSS	Native tokens	Simple
Tailwind CSS	Custom preset	Easy
Bulma	CSS adapter	Easy
Bootstrap	CSS variables	Moderate

Platform Libraries

Platform	Package	Installation
Python	`turbo-themes`	`pip install turbo-themes`
SwiftUI	`TurboThemes`	Swift Package

How Integrations Work

Pure CSS (No Framework)

The simplest approach - use CSS custom properties directly:

.card {
  background: var(--turbo-bg-surface);
  color: var(--turbo-text-primary);
  border: 1px solid var(--turbo-border-default);
}

Framework Adapters

Adapters map Turbo Themes tokens to framework-specific variables. For example, the Bulma adapter sets:

/* Bulma adapter (simplified) */
:root {
  --bulma-background: var(--turbo-bg-base);
  --bulma-text: var(--turbo-text-primary);
  --bulma-primary: var(--turbo-brand-primary);
}

This means Bulma components automatically use your theme colors.

Tailwind Preset

The Tailwind preset extends your color palette:

// tailwind.config.js
module.exports = {
  presets: [require('turbo-themes/adapters/tailwind/preset')],
};

Now you can use classes like bg-turbo-surface and text-turbo-primary.

Choosing an Integration

Use Pure CSS If

You’re building a simple site
You want maximum control
You don’t need a UI component library

Use Bulma If

You want pre-built components
You prefer a lightweight framework
You like semantic class names

Use Tailwind If

You prefer utility-first CSS
You’re building custom components
You want full design flexibility

Use Bootstrap If

You have an existing Bootstrap project
You need Bootstrap’s JavaScript components
You want extensive documentation

Next Steps

Choose your integration: