tulip tulip v0.x

Tailwind CSS

Use Tailwind CSS with tulip via plugin.

Install the plugin

tulip plugin add https://github.com/eduardostuart/tulip-tailwind

Configure

Add the plugin to your tulip.toml with optional font configuration:

[[plugins]]
name = "tailwind"
source = "https://github.com/eduardostuart/tulip-tailwind@v0.1.0"
config = { fonts = { sans = "Outfit", serif = "Newsreader", mono = "JetBrains Mono" } }

Usage

The plugin injects the Tailwind Play CDN script into every page. Use utility classes anywhere in your templates:

<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
  <h1 class="text-2xl font-bold">{{ title }}</h1>
</div>

Dark mode

The plugin configures Tailwind with darkMode: "class". Toggle the dark class on the <html> element to switch themes.

This plugin uses the Tailwind Play CDN which includes all classes (no tree-shaking). A production-optimized plugin using the Tailwind CLI is planned.
Frontmatter Minification