Skip to main content
Fuego includes a standalone Tailwind CSS v4 binary, so you can use Tailwind without Node.js or npm.

​
Setup

When creating a new project with fuego new: 
fuego new myapp
# Answer "Yes" to "Would you like to use templ for pages?"
This automatically sets up:

​
File Structure

FilePurpose
styles/input.cssSource CSS with Tailwind directives
static/css/output.cssCompiled CSS (generated)
app/layout.templLinks to the compiled CSS

​
input.css

The source CSS file: 
@import "tailwindcss";

/* Custom styles */
.btn-primary {
  @apply bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700;
}

.card {
  @apply bg-white shadow rounded-lg p-6;
}

​
CLI Commands

​
Build for Production

fuego tailwind build
Generates minified CSS at static/css/output.css.

​
Watch for Development

fuego tailwind watch
Rebuilds CSS when files change.

​
Install Binary

fuego tailwind install
Downloads the Tailwind binary if not present.

​
Check Installation

fuego tailwind info
Shows installation status and version.

​
Development Workflow

When running fuego dev:
  1. Tailwind watcher starts automatically (if styles/input.css exists)
  2. CSS rebuilds on any file change
  3. No manual rebuild needed
fuego dev
You’ll see: 
[fuego] Starting development server...
[tailwind] Watching for changes...
[fuego] Server running at http://localhost:3000

​
Using in Templates

Reference the compiled CSS in your layout: 
// app/layout.templ
templ Layout(title string) {
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="/docs/static/css/output.css"/>
    </head>
    <body class="bg-gray-100 min-h-screen">
        <nav class="bg-white shadow-sm">
            <!-- Navigation -->
        </nav>
        <main class="max-w-7xl mx-auto py-6">
            { children... }
        </main>
    </body>
    </html>
}

​
Example Page

// app/dashboard/page.templ
package dashboard

templ Page() {
    <div class="px-4 py-5 sm:p-6">
        <h1 class="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium">Users</h2>
                <p class="text-3xl font-bold text-orange-600">1,234</p>
            </div>
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium">Revenue</h2>
                <p class="text-3xl font-bold text-green-600">$12,345</p>
            </div>
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-lg font-medium">Orders</h2>
                <p class="text-3xl font-bold text-blue-600">567</p>
            </div>
        </div>
        
        <button class="mt-6 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
            View Details
        </button>
    </div>
}

​
Custom Configuration

​
Custom Colors

Add to styles/input.css: 
@import "tailwindcss";

@theme {
  --color-brand-50: #fff7ed;
  --color-brand-500: #f97316;
  --color-brand-600: #ea580c;
  --color-brand-700: #c2410c;
}
Use with bg-brand-500, text-brand-600, etc.

​
Custom Fonts

@import "tailwindcss";

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

​
Common Patterns

​
Cards

<div class="bg-white shadow rounded-lg p-6">
    <h2 class="text-lg font-medium text-gray-900">Title</h2>
    <p class="mt-2 text-gray-600">Description</p>
</div>

​
Buttons

<!-- Primary -->
<button class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
    Save
</button>

<!-- Secondary -->
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300">
    Cancel
</button>

<!-- Outline -->
<button class="border border-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-50">
    Edit
</button>

​
Forms

<input 
    type="text" 
    class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
    placeholder="Enter text..."
/>

<nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <a href="/docs/" class="text-xl font-bold text-orange-600">Logo</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="/docs/dashboard" class="text-gray-600 hover:text-gray-900">Dashboard</a>
                <a href="/docs/settings" class="text-gray-600 hover:text-gray-900">Settings</a>
            </div>
        </div>
    </div>
</nav>

​
Docker Build

Include Tailwind build in Docker: 
FROM golang:1.23-alpine AS builder
WORKDIR /app

# Install Fuego for Tailwind
RUN go install github.com/abdul-hamid-achik/fuego/cmd/fuego@latest

COPY . .

# Build CSS
RUN fuego tailwind build

# Build Go
RUN go build -o server .

FROM alpine:latest
WORKDIR /app
COPY --from=builder /app/server .
COPY --from=builder /app/static ./static
CMD ["./server"]

​
Troubleshooting

Make sure fuego tailwind watch is running, or run fuego tailwind build after changes.
Check that styles/input.css has @import "tailwindcss"; at the top.
Run fuego tailwind install to download the Tailwind binary.

​
Next Steps

Templates

Build templ pages

HTMX

Add interactivity

Examples

Full-stack example

Static Files

Serve assets