# Styling and Colors
## Overview
go-tui uses a Tailwind-inspired class system for styling. You set colors, text decorations, borders, and gradients through the `class` attribute on elements. Literal class strings are converted into `tui.Element` options by the code generator at compile time, and class strings built from Go expressions are resolved at runtime (see [Computed Classes](#computed-classes)). For cases where classes aren't flexible enough, you can construct `Style` values in Go and pass them through attributes.
## Text Styles
Text decorations are applied through classes on any element that renders text:
```gsx
```
The full set of text style classes:
| Class | Effect |
|-------|--------|
| `font-bold` | Bold / bright |
| `font-dim` or `text-dim` | Dimmed / faint |
| `italic` | Italic |
| `underline` | Underlined |
| `strikethrough` | Struck through |
| `reverse` | Swaps foreground and background colors |
`font-dim` and `text-dim` are aliases that produce the same result.
## Text Colors
go-tui supports the standard 16 ANSI terminal colors. Each has a `text-` prefixed class:
```gsx
RedGreenBlueCyanMagentaYellowWhiteBlack
```
Each color has a bright variant:
```gsx
Bright redBright greenBright blueBright cyanBright magentaBright yellowBright whiteBright black (gray)
```
### Arbitrary Hex Colors
For colors beyond the 16 ANSI palette, use the bracket syntax with a hex value:
```gsx
Custom orangeShort-form hex (expands to #AA33FF)
```
Both `#RRGGBB` (6-digit) and `#RGB` (3-digit shorthand) formats work. These produce true-color output if the terminal supports it, with automatic fallback to the nearest ANSI color on limited terminals.
## Background Colors
The same color set is available with the `bg-` prefix:
```gsx
Red backgroundCyan backgroundBright yellow backgroundCustom purple background
```
Every named color and bright variant that works with `text-` also works with `bg-`. Arbitrary hex values work the same way: `bg-[#RRGGBB]` or `bg-[#RGB]`.
## Combining Styles
Multiple classes compose. List them space-separated in the `class` attribute:
```gsx
Bold, cyan, on black, underlined
```
Styles on parent elements do not cascade to children. Each element's `class` applies only to that element:
```gsx
This text is NOT cyan. It uses the default colorThis text IS cyan
```
If you want consistent styling across a subtree, apply the class to each element that needs it, or use a pure component to encapsulate the pattern.
## Borders
Borders wrap an element in box-drawing characters. Four styles are available:
| Class | Style | Characters |
|-------|-------|------------|
| `border-single` | Single line | `┌─┐│└─┘` |
| `border-double` | Double line | `╔═╗║╚═╝` |
| `border-rounded` | Rounded corners | `╭─╮│╰─╯` |
| `border-thick` | Heavy line | `┏━┓┃┗━┛` |
```gsx
Single
Double
Rounded
Thick
```
### Border Colors
Color the border with `border-{color}`:
```gsx
Cyan bordered box
```
All 16 named colors and their bright variants work: `border-red`, `border-bright-green`, etc. Arbitrary hex values are supported too: `border-[#FF6B35]`.
### Border Titles
The `borderTitle` attribute draws a label centered in the top border line:
```gsx
All systems normal
```
```
╭────── Status ──────╮
│ All systems normal │
╰────────────────────╯
```
The title renders with the border's style, so border color classes and the `borderStyle` attribute color both the line and the label. Titles wider than the top edge are truncated. Wrapping the text in spaces (`" Status "`) keeps a gap between the label and the line characters.
Border titles also work with border gradients. The gradient draws first and the title overwrites the characters it covers.
## Gradients
Gradients interpolate between two colors across text, backgrounds, or borders.
### Syntax
The general form is:
```
{target}-gradient-{start}-{end}[-{direction}]
```
Where:
- **target**: `text`, `bg`, or `border`
- **start** and **end**: any named ANSI color (`red`, `cyan`, `bright-blue`, etc.)
- **direction** (optional): `-h` (horizontal, the default), `-v` (vertical), `-dd` (diagonal down), `-du` (diagonal up)
### Text Gradients
```gsx
Horizontal gradient (default)Explicit horizontalVertical gradientDiagonal downDiagonal up
```
### Background Gradients
```gsx
Blue-to-cyan background
```
### Border Gradients
```gsx
Gradient border
```
The gradient travels around the perimeter of the border, shifting from the start color to the end color over the first half, then back again over the second half.
### Direction Reference
| Suffix | Direction | Description |
|--------|-----------|-------------|
| `-h` (or omitted) | Horizontal | Left to right |
| `-v` | Vertical | Top to bottom |
| `-dd` | Diagonal down | Top-left to bottom-right |
| `-du` | Diagonal up | Bottom-left to top-right |
## Computed Classes
The `class` attribute also accepts a Go expression that evaluates to a string. This is how a component takes its styling from a parameter, a struct field, or a helper that picks classes based on state:
```gsx
templ Badge(label string, color string) {
{label}
}
templ (d *dashboard) Render() {
{fmt.Sprintf("%d%%", d.cpu.Get())}
}
```
```go
func metricColor(value int) string {
switch {
case value >= 80:
return "text-red font-bold"
case value >= 60:
return "text-yellow"
}
return "text-green"
}
```
Expression classes compile to a `tui.WithClass(...)` option, which resolves the same class set at runtime. The differences from literal classes:
- Unknown classes in an expression are ignored at runtime. Only literal class strings are validated by `tui check` and the language server.
- When the expression reads a `State`, the generator also binds it and swaps the classes through `SetClass` on change, so a value with `hidden` and a later value without it hides and shows the element.
You can use the same option from Go, and re-apply classes on an existing element with `SetClass`:
```go
el := tui.New(tui.WithClass("border-rounded p-1 " + theme))
el.SetClass("border-double text-red")
```
`SetClass` replaces the previous class string. Every property the old string set is restored to the value it had before that string was applied, then the new string is applied. So `SetClass("")` after `"font-bold p-1"` removes both, `SetClass("text-green")` after `"font-bold"` is green and not bold, and a border set through the `border` attribute comes back once the class string stops mentioning borders, whichever attribute came first. Within one class string the last class wins, so `"text-red text-green"` renders green.
On ``, `