Underline, overline, strike — plus decoration color, style, thickness and offset. This family contains 272 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
decoration-slice | box-decoration-break: slice; |
decoration-clone | box-decoration-break: clone; |
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
decoration-solid | text-decoration-style: solid; |
decoration-double | text-decoration-style: double; |
decoration-dotted | text-decoration-style: dotted; |
decoration-dashed | text-decoration-style: dashed; |
decoration-wavy | text-decoration-style: wavy; |
decoration-inherit | text-decoration-color: inherit; |
decoration-current | text-decoration-color: currentColor; |
decoration-transparent | text-decoration-color: transparent; |
decoration-black | text-decoration-color: #000; |
decoration-white | text-decoration-color: #fff; |
decoration-slate-50 | text-decoration-color: #f8fafc; |
decoration-slate-100 | text-decoration-color: #f1f5f9; |
decoration-slate-200 | text-decoration-color: #e2e8f0; |
decoration-slate-300 | text-decoration-color: #cbd5e1; |
decoration-slate-400 | text-decoration-color: #94a3b8; |
decoration-slate-500 | text-decoration-color: #64748b; |
decoration-slate-600 | text-decoration-color: #475569; |
decoration-slate-700 | text-decoration-color: #334155; |
decoration-slate-800 | text-decoration-color: #1e293b; |
decoration-slate-900 | text-decoration-color: #0f172a; |
decoration-slate-950 | text-decoration-color: #020617; |
decoration-gray-50 | text-decoration-color: #f9fafb; |
decoration-gray-100 | text-decoration-color: #f3f4f6; |
decoration-gray-200 | text-decoration-color: #e5e7eb; |
decoration-gray-300 | text-decoration-color: #d1d5db; |
decoration-gray-400 | text-decoration-color: #9ca3af; |
decoration-gray-500 | text-decoration-color: #6b7280; |
decoration-gray-600 | text-decoration-color: #4b5563; |
decoration-gray-700 | text-decoration-color: #374151; |
decoration-gray-800 | text-decoration-color: #1f2937; |
decoration-gray-900 | text-decoration-color: #111827; |
decoration-gray-950 | text-decoration-color: #030712; |
decoration-zinc-50 | text-decoration-color: #fafafa; |
decoration-zinc-100 | text-decoration-color: #f4f4f5; |
decoration-zinc-200 | text-decoration-color: #e4e4e7; |
decoration-zinc-300 | text-decoration-color: #d4d4d8; |
decoration-zinc-400 | text-decoration-color: #a1a1aa; |
decoration-zinc-500 | text-decoration-color: #71717a; |
decoration-zinc-600 | text-decoration-color: #52525b; |
decoration-zinc-700 | text-decoration-color: #3f3f46; |
decoration-zinc-800 | text-decoration-color: #27272a; |
decoration-zinc-900 | text-decoration-color: #18181b; |
decoration-zinc-950 | text-decoration-color: #09090b; |
decoration-neutral-50 | text-decoration-color: #fafafa; |
decoration-neutral-100 | text-decoration-color: #f5f5f5; |
decoration-neutral-200 | text-decoration-color: #e5e5e5; |
decoration-neutral-300 | text-decoration-color: #d4d4d4; |
decoration-neutral-400 | text-decoration-color: #a3a3a3; |
decoration-neutral-500 | text-decoration-color: #737373; |
decoration-neutral-600 | text-decoration-color: #525252; |
decoration-neutral-700 | text-decoration-color: #404040; |
decoration-neutral-800 | text-decoration-color: #262626; |
decoration-neutral-900 | text-decoration-color: #171717; |
decoration-neutral-950 | text-decoration-color: #0a0a0a; |
…and 212 more in this family — search by class name to find the exact one.
Example#
example
<a class="underline decoration-blue-500 decoration-2 underline-offset-4">Styled link</a>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- underline-offset-2/4 lifts underlines off descenders
- decoration-wavy for editorial flourishes
Related#
colors/index|Text color · utilities/typography/font-size|Font size