skills.rest
mazrean
mazreanCOMMUNITY
Explore all skills by this author →
Website𝕏@mazrean22GitHub

using-unocss-with-templ

Integrate UnoCSS atomic CSS with Go templ templates for static sites.

Updated Mar 7, 2026
Search Tags:#css#go#static site#unocss#templ#atomic css
One-click install
npx skills add https://github.com/mazrean/agent-skills --skill using-unocss-with-templ
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-unocss-with-templ
Source: https://github.com/mazrean/agent-skills/tree/main/skills/using-unocss-with-templ
Command: npx skills add https://github.com/mazrean/agent-skills --skill using-unocss-with-templ

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the integration of UnoCSS, an on-demand atomic CSS engine, with Go's templ templating language, enabling efficient styling for static sites.

Core Features & Use Cases

  • UnoCSS Integration: Set up and configure UnoCSS for templ projects.
  • Atomic CSS: Utilize utility-first classes directly within .templ files.
  • Static Site Building: Build fast, modern static sites with Go and atomic CSS.
  • Use Case: When starting a new Go static site project and wanting to use a fast, utility-first CSS framework like UnoCSS, this skill provides the exact configuration and usage examples needed.

Quick Start

Install UnoCSS CLI and add package scripts to your project.

Frequently Asked Questions about using-unocss-with-templ

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use UnoCSS with Go templ templates for static site development?▼

To use UnoCSS with Go templ, you need to configure `uno.config.ts` to scan `.templ` files, allowing you to apply atomic utility classes directly within templ components for static site building.

Can I use atomic CSS utility classes directly inside .templ files?▼

Yes, you can use atomic CSS utility classes directly inside `.templ` files by integrating the UnoCSS engine, which scans your templates to generate on-demand CSS for your static site.

What do I need to set up UnoCSS for a Go static site project?▼

You need to install the UnoCSS CLI and the Go templ templating language. This Skill provides the necessary `uno.config.ts` configuration and package scripts to build static sites with atomic CSS.

What is the best way to configure UnoCSS for templ components?▼

The best way to configure UnoCSS for templ components is to adjust `uno.config.ts` to target `.templ` files, ensuring the atomic CSS engine correctly scans your templates and generates utility classes.

Why integrate an on-demand atomic CSS engine into Go templ projects?▼

Integrating an on-demand atomic CSS engine like UnoCSS into Go templ projects enables efficient utility-first styling, generating only the CSS you use for fast, modern static sites without bloating your stylesheets.

Related Skills

Explore More Software Engineering Skills→
PeterBookerPeterBooker
23

generate

Run go generate to compile templ templates and build frontend assets.

Community
Basic
ousiassousiass

halt-review

Review Go, Templ, and Lit projects for HALT architecture consistency.

Community
Advanced
ev3rlitev3rlit

templ-http

Render templ components in Go net/http handlers to serve dynamic HTML pages.

Community
Intermediate
mymx2mymx2
4

unocss

Configure UnoCSS atomic CSS engine with presets and custom rules.

Community
Advanced