Tipography
We’ll handle the typography supplied by Portábilis UI in the sections below.
Headings
ui-text-9xl
Headline
ui-text-8xl
Headline
ui-text-7xl
Headline
ui-text-6xl
Headline
ui-text-5xl
Headline
ui-text-4xl
Headline
ui-text-3xl
Headline
ui-text-2xl
Headline
ui-text-xl
Headline
ui-text-lg
Headline
ui-text-base
Headline
ui-text-sm
Headline
ui-text-xs
Headline
Font Weights
ui-font-thin
font-weight: 100;
Lorem Ipsum text industry.
ui-font-extralight
font-weight: 200;
Lorem Ipsum text industry.
ui-font-light
font-weight: 300;
Lorem Ipsum text industry.
ui-font-normal
font-weight: 400;
Lorem Ipsum text industry.
ui-font-medium
font-weight: 500;
Lorem Ipsum text industry.
ui-font-semibold
font-weight: 600;
Lorem Ipsum text industry.
ui-font-bold
font-weight: 700;
Lorem Ipsum text industry.
ui-font-extrabold
font-weight: 800;
Lorem Ipsum text industry.
ui-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 ui-font-Muli">This is a Muli font example</div> "This is a Muli font example"
Hindi
html
<div class="text-xl ui-font-Hindi">This is a Hindi font example</div> "This is a Hindi font example"
Open Sans
html
<div class="text-xl ui-font-open-sans">This is a OpenSans font example</div> "This is a OpenSans font example"