Tailwind offers 5 grayscale typography themes designed to align with the gray tones of different design languages.
| Name | Style | Color Temperature | Feel |
|---|---|---|---|
| gray | Default / General | Neutral-warm | Most universal and traditional |
| slate | Cool / Tech-inspired | Cool | Slightly bluish, good for code-heavy documentation |
| zinc | Metallic / Minimalist | Cool-gray | Very neutral, suitable for UI component documentation |
| neutral | Pure neutral | Extremely neutral | Slightly grayish-yellow, visually the softest |
| stone | Natural / Soft | Warm | Resembles paper or stone, with a natural, vintage feel |
The shared background color and smaller font size can mask the subtle color differences in details like blockquotes, list markers, code blocks, and table borders. But they do have subtle differences across themes.
This is a paragraph to demonstrate the styles of the `p` tag, including line height, letter spacing, and paragraph spacing.
You can write text that is bold, italicized, or contains code snippets.
This is a blockquote area.
function greet(name) {
return 'Hello, ' + name + '!';
}| Item | Description |
|---|---|
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |
This is a paragraph to demonstrate the styles of the `p` tag, including line height, letter spacing, and paragraph spacing.
You can write text that is bold, italicized, or contains code snippets.
This is a blockquote area.
function greet(name) {
return 'Hello, ' + name + '!';
}| Item | Description |
|---|---|
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |
This is a paragraph to demonstrate the styles of the `p` tag, including line height, letter spacing, and paragraph spacing.
You can write text that is bold, italicized, or contains code snippets.
This is a blockquote area.
function greet(name) {
return 'Hello, ' + name + '!';
}| Item | Description |
|---|---|
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |
This is a paragraph to demonstrate the styles of the `p` tag, including line height, letter spacing, and paragraph spacing.
You can write text that is bold, italicized, or contains code snippets.
This is a blockquote area.
function greet(name) {
return 'Hello, ' + name + '!';
}| Item | Description |
|---|---|
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |
This is a paragraph to demonstrate the styles of the `p` tag, including line height, letter spacing, and paragraph spacing.
You can write text that is bold, italicized, or contains code snippets.
This is a blockquote area.
function greet(name) {
return 'Hello, ' + name + '!';
}| Item | Description |
|---|---|
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |