Monsoon v0.2.0
Made by Alexandre Kohler Star

Utilities

Typography

Font family, size, weight, line height, letter spacing, alignment, decoration, wrapping and lists.

140classes
290variant classes
25properties
Open in the class reference

Live example

Full

Variant support

Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:text-xs. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.

KindPrefixesClasses in this category
Statehover:active:2
Group and peergroup-hover:peer-checked:2
Structurenot generated0
Motionnot generated0
Schemenot generated0
Breakpointssm:md:lg:xl:2xl:28
Containers@xs:@sm:@md:@lg:@xl:16
Media and directionprint:screen:rtl:ltr:forced-colors:28

Font family 3

Variants: none

ClassCSS
font-sansfont-family: var(--font-sans);
font-seriffont-family: var(--font-serif);
font-monofont-family: var(--font-mono);

Font size 22

Variants: listed per class

ClassCSSVariants
text-xsfont-size: 0.75rem; line-height: 1rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-smfont-size: 0.875rem; line-height: 1.25rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-basefont-size: 1rem; line-height: 1.5rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-lgfont-size: 1.125rem; line-height: 1.75rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-xlfont-size: 1.25rem; line-height: 1.75rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-2xlfont-size: 1.5rem; line-height: 2rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-3xlfont-size: 1.875rem; line-height: 2.25rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-4xlfont-size: 2.25rem; line-height: 2.5rem;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-5xlfont-size: 3rem; line-height: 1;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-6xlfont-size: 3.75rem; line-height: 1;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-7xlfont-size: 4.5rem; line-height: 1;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-8xlfont-size: 6rem; line-height: 1;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-9xlfont-size: 8rem; line-height: 1;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-fluid-smfont-size: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem); line-height: 1.5;
text-fluid-basefont-size: clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem); line-height: 1.6;
text-fluid-lgfont-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); line-height: 1.55;
text-fluid-xlfont-size: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem); line-height: 1.45;
text-fluid-2xlfont-size: clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem); line-height: 1.3;
text-fluid-3xlfont-size: clamp(1.5rem, 1.3533rem + 0.6522vw, 1.875rem); line-height: 1.2;
text-fluid-4xlfont-size: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); line-height: 1.15;
text-fluid-5xlfont-size: clamp(2rem, 1.6087rem + 1.7391vw, 3rem); line-height: 1.1;
text-fluid-6xlfont-size: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem); line-height: 1.05;

Font weight 9

Variants: sm:md:lg:xl:2xl:print:screen:

ClassCSS
font-thinfont-weight: 100;
font-extralightfont-weight: 200;
font-lightfont-weight: 300;
font-normalfont-weight: 400;
font-mediumfont-weight: 500;
font-semiboldfont-weight: 600;
font-boldfont-weight: 700;
font-extraboldfont-weight: 800;
font-blackfont-weight: 900;

Font style 2

Variants: none

ClassCSS
italicfont-style: italic;
not-italicfont-style: normal;

Font smoothing 2

Variants: none

ClassCSS
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Font variant numeric 4

Variants: none

ClassCSS
normal-numsfont-variant-numeric: normal;
tabular-numsfont-variant-numeric: tabular-nums;
proportional-numsfont-variant-numeric: proportional-nums;
slashed-zerofont-variant-numeric: slashed-zero;

Line height 14

Variants: none

ClassCSS
leading-noneline-height: 1;
leading-tightline-height: 1.25;
leading-snugline-height: 1.375;
leading-normalline-height: 1.5;
leading-relaxedline-height: 1.625;
leading-looseline-height: 2;
leading-3line-height: 0.75rem;
leading-4line-height: 1rem;
leading-5line-height: 1.25rem;
leading-6line-height: 1.5rem;
leading-7line-height: 1.75rem;
leading-8line-height: 2rem;
leading-9line-height: 2.25rem;
leading-10line-height: 2.5rem;

Letter spacing 6

Variants: none

ClassCSS
tracking-tighterletter-spacing: -0.05em;
tracking-tightletter-spacing: -0.025em;
tracking-normalletter-spacing: 0em;
tracking-wideletter-spacing: 0.025em;
tracking-widerletter-spacing: 0.05em;
tracking-widestletter-spacing: 0.1em;

Text align 6

Variants: listed per class

ClassCSSVariants
text-lefttext-align: left;rtl ltr sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-centertext-align: center;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-righttext-align: right;rtl ltr sm md lg xl 2xl @xs @sm @md @lg @xl print screen
text-justifytext-align: justify;sm md lg xl 2xl print screen
text-starttext-align: start;sm md lg xl 2xl print screen
text-endtext-align: end;sm md lg xl 2xl print screen

Text decoration line 4

Variants: listed per class

ClassCSSVariants
underlinetext-decoration-line: underline;hover active group-hover peer-checked forced-colors
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;hover active group-hover peer-checked forced-colors

Text decoration style 5

Variants: none

ClassCSS
decoration-solidtext-decoration-style: solid;
decoration-doubletext-decoration-style: double;
decoration-dottedtext-decoration-style: dotted;
decoration-dashedtext-decoration-style: dashed;
decoration-wavytext-decoration-style: wavy;

Text decoration thickness 7

Variants: none

ClassCSS
decoration-0text-decoration-thickness: 0px;
decoration-1text-decoration-thickness: 1px;
decoration-2text-decoration-thickness: 2px;
decoration-4text-decoration-thickness: 4px;
decoration-8text-decoration-thickness: 8px;
decoration-autotext-decoration-thickness: auto;
decoration-from-fonttext-decoration-thickness: from-font;

Text underline offset 6

Variants: none

ClassCSS
underline-offset-0text-underline-offset: 0px;
underline-offset-1text-underline-offset: 1px;
underline-offset-2text-underline-offset: 2px;
underline-offset-4text-underline-offset: 4px;
underline-offset-8text-underline-offset: 8px;
underline-offset-autotext-underline-offset: auto;

Text transform 4

Variants: none

ClassCSS
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;

Overflow 8

Variants: none

ClassCSS
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-clamp-1overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
line-clamp-2overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp-3overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp-4overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
line-clamp-5overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
line-clamp-6overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
line-clamp-noneoverflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;

Text overflow 2

Variants: none

ClassCSS
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

White space 6

Variants: none

ClassCSS
whitespace-normalwhite-space: normal;
whitespace-nowrapwhite-space: nowrap;
whitespace-prewhite-space: pre;
whitespace-pre-linewhite-space: pre-line;
whitespace-pre-wrapwhite-space: pre-wrap;
whitespace-break-spaceswhite-space: break-spaces;

Overflow wrap 2

Variants: none

ClassCSS
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;

Word break 2

Variants: none

ClassCSS
break-allword-break: break-all;
break-keepword-break: keep-all;

Text wrap 4

Variants: none

ClassCSS
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

Hyphens 3

Variants: none

ClassCSS
hyphens-none-webkit-hyphens: none; hyphens: none;
hyphens-manual-webkit-hyphens: manual; hyphens: manual;
hyphens-auto-webkit-hyphens: auto; hyphens: auto;

Vertical align 8

Variants: none

ClassCSS
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;
align-subvertical-align: sub;
align-supervertical-align: super;

List style type 3

Variants: none

ClassCSS
list-nonelist-style-type: none;
list-disclist-style-type: disc;
list-decimallist-style-type: decimal;

List style position 2

Variants: none

ClassCSS
list-insidelist-style-position: inside;
list-outsidelist-style-position: outside;

Text indent 6

Variants: none

ClassCSS
indent-0text-indent: 0;
indent-1text-indent: 0.25rem;
indent-2text-indent: 0.5rem;
indent-4text-indent: 1rem;
indent-8text-indent: 2rem;
indent-pxtext-indent: 1px;

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.