twerge

generates tailwind merges and classes from go templ sources

Usage

You can install this library using the following command:

go get github.com/conneroisu/twerge@latest

You can then use twerge in your .templ files like so:

package views

import "github.com/conneroisu/twerge"

templ ExampleTempl() {
    <div class=twerge.It("bg-blue-500 text-blue-700")>
        <h1 class=twerge.It("text-2xl font-bold")>Hello, world!</h1>
    </div>
}

This will generate the following CSS in a code generation step:

/* twerge:begin */
.tw-1 {
    @apply bg-blue-500 text-blue-700;
}
.tw-2 {
    @apply text-2xl font-bold;
}
/* twerge:end */

To generate the CSS, you can use the CodeGen function:

import "github.com/conneroisu/twerge"

func main() {
    g := twerge.Default()
    err := g.CodeGen(
        g, 
        "views/view.go",
        "views/views.css",
        "views/views.html",
        views.ExampleTempl(),
    )
    if err != nil {
        panic(err)
    }
}

Development

With a working nix and direnv installed, run the following commands to get started:

direnv allow

Project structure:

./.
├── assets
│   └── twerge.png
├── benchmarks
│   └── regexs
│       └── main_test.go
├── CLAUDE.md
├── doc # documentation
│   ├── book.toml # book configuration
│   └── src # documentation source
│       └── ...
├── doc.go
├── examples # examples
├── flake.lock
├── flake.nix
├── go.mod # go module
├── go.sum # go module checksums
├── internal
│   └── files # utilities for working with files
│       ├── doc.go
│       ├── interpolate.go
│       ├── jen.go
│       └── paths.go
├── LICENSE # license
├── LLMS.txt # notes for llms
├── README.md # this file
├── config.go # twerge configuration
├── config_test.go # twerge configuration tests
├── twerge.go # twerge implementation
├── twerge_test.go # twerge tests
└── tw.go # twerge code generation implementations

twerge

import "github.com/conneroisu/twerge"

Package twerge provides a tailwind merger for go-templ with class generation and runtime static hashmap.

It performs four key functions: 1. Merges TailwindCSS classes intelligently (resolving conflicts) 2. Generates short unique CSS class names from the merged classes 3. Creates a mapping from original class strings to generated class names 4. Provides a runtime static hashmap for direct class name lookup

Basic Usage:

import "github.com/conneroisu/twerge"

// Merge TailwindCSS classes from a space-delimited string
merged := twerge.Merge("text-red-500 bg-blue-500 text-blue-700")
// Returns: "bg-blue-500 text-blue-700"

// Generate a short unique class name
className := twerge.Generate("text-red-500 bg-blue-500")
// Returns something like: "tw-Ab3F5g7"

Index

• func CodeGen(g *Generator, goPath string, cssPath string, htmlPath string, comps ...templ.Component) error
• func If(ok bool, trueClass string, falseClass string) string
• func It(raw string) string
• func SetDefault(g *Generator)
• type CacheValue
• type Generator
  • func Default() *Generator
  • func New(h Handler) *Generator
  • func (Generator) Cache() map[string]CacheValue
  • func (g *Generator) It(classes string) string
• type Handler

func CodeGen

func CodeGen(g *Generator, goPath string, cssPath string, htmlPath string, comps ...templ.Component) error

CodeGen generates all the code needed to use Twerge statically.

func If

func If(ok bool, trueClass string, falseClass string) string

If returns a short unique CSS class name from the merged classes taking an additional boolean parameter.

func It

func It(raw string) string

It returns a short unique CSS class name from the merged classes.

func SetDefault

func SetDefault(g *Generator)

SetDefault sets the default Generator.

type CacheValue

CacheValue contains the value of a cache entry.

It is used to store the generated and merged classes.

As twerge is meant to be used statically, aka at build/compile time, it is trying to maxmimize performance at runtime.

type CacheValue struct {
    Generated string
    Merged    string
}

type Generator

Generator generates all the code needed to use Twerge statically.

At runtime, it uses the statically defined code, if configured, to map the class names to the generated class names.

type Generator struct{ Handler Handler }

func Default

func Default() *Generator

Default returns the default Generator.

func New

func New(h Handler) *Generator

New creates a new Generator with the given non-nil Handler.

func (Generator) Cache

func (Generator) Cache() map[string]CacheValue

Cache returns the cache of the Generator.

func (*Generator) It

func (g *Generator) It(classes string) string

It returns a short unique CSS class name from the merged classes.

If the class name already exists, it will return the existing class name.

If the class name does not exist, it will generate a new class name and return it.

type Handler

Handler is the interface that needs to be implemented to customize the behavior of the Generator.

type Handler interface {
    It(string) string
    Cache() map[string]CacheValue
    SetCache(map[string]CacheValue)
}

Generated by gomarkdoc