Tipography
We’ll handle the typography supplied by Clinux UI in the sections below.
Headings
text-9xl
Headline
text-8xl
Headline
text-7xl
Headline
text-6xl
Headline
text-5xl
Headline
text-4xl
Headline
text-3xl
Headline
text-2xl
Headline
text-xl
Headline
text-lg
Headline
text-base
Headline
text-sm
Headline
text-xs
Headline
Font Weights
font-thin
font-weight: 100;
Lorem Ipsum text industry.
font-extralight
font-weight: 200;
Lorem Ipsum text industry.
font-light
font-weight: 300;
Lorem Ipsum text industry.
font-normal
font-weight: 400;
Lorem Ipsum text industry.
font-medium
font-weight: 500;
Lorem Ipsum text industry.
font-semibold
font-weight: 600;
Lorem Ipsum text industry.
font-bold
font-weight: 700;
Lorem Ipsum text industry.
font-extrabold
font-weight: 800;
Lorem Ipsum text industry.
font-black
font-weight: 900;
Lorem Ipsum text industry.
CSS Helper Classes
| Class Name | Description |
|---|---|
text-right | Align text to the right |
text-left | Align text to the left |
text-center | Align text to the center |
text-justify | Text will be justified |
text-start | Align text to the start |
text-end | Align text to the end |
uppercase | Transform text to uppercase |
lowercase | Transform text to lowercase |
capitalize | Capitalize first letter of the text |
normal-case | Transform text to normal case |
underline | Transform text to underline |
overline | Transform text to overline |
line-through | Transform text to underline |
no-underline | Transform text to no underline |
italic | Transform text to italic |
not-italic | Transform text to not italic |
See more examples in Typography Section on the Tailwindcss docs.
Default fonts
By default, we have all Tailwindcss original fonts, and we have Hindi, Muli and Open Sans imported by default.
scss
@import url('https://fonts.googleapis.com/css?family=Hind|Muli|Open+Sans&display=swap');Examples
Muli
html
<div class="text-xl font-Muli">This is a Muli font example</div> "This is a Muli font example"
Hindi
html
<div class="text-xl font-Hindi">This is a Hindi font example</div> "This is a Hindi font example"
Open Sans
html
<div class="text-xl font-open-sans">This is a OpenSans font example</div> "This is a OpenSans font example"