Aligning text
Use text-left text-center text-right
For example, to align text to the right you can use the text-right class:
<p class="text-right">
This text is aligned to the right
</p>
Font size
Use text-xs, text-sm, text-base, text-lg, text-xl, text-2xl and more
Font weight
Use font-thin, font-light, font-medium, font-bold, and more
Line height
Use leading-tight, leading-snug, leading-relaxed and more to increase line height
Text decoration
underline, no-underline, line-through
Text transform
uppercase, lowercase, capitalize…
Font Family
| Class | CSS |
|---|---|
| font-sans | font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
| font-serif | font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; |
| font-mono | font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; |
Font Size
| Class | CSS |
|---|---|
| text-xs | 0.75rem |
| text-sm | 0.875rem |
| text-base | 1rem |
| text-lg | 1.125rem |
| text-xl | 1.25rem |
| text-2xl | 1.5rem |
| text-3xl | 1.875rem |
| text-4xl | 2.25rem |
| text-5xl | 3rem |
| text-6xl | 3.75rem |
| text-7xl | 4.5rem |
| text-8xl | 6rem |
| text-9xl | 8rem |
Font weight
| Class | CSS |
|---|---|
| font-hairline | font-weight: 100 |
| font-thin | font-weight: 200 |
| font-light | font-weight: 300 |
| font-normal | font-weight: 400 |
| font-medium | font-weight: 500 |
| font-semibold | font-weight: 600 |
| font-bold | font-weight: 700 |
| font-extrabold | font-weight: 800 |
| font-black | font-weight: 900 |
Center text
Use text-center to center text.
Line Height
| Class | CSS |
|---|---|
| .leading-none | line-height: 1 |
| .leading-tight | line-height: 1.25 |
| .leading-snug | line-height: 1.375 |
| .leading-normal | line-height: 1.5 |
| .leading-relaxed | line-height: 1.625 |
| .leading-loose | line-height: 2 |
You can also use numbers, from .leading-3 to .leading-10
Lessons in this unit:
| 0: | Introduction |
| 1: | Box model properties |
| 2: | Colors |
| 3: | ▶︎ Typography |
| 4: | Flexbox and Grid in Tailwind |
| 5: | Modifiers |
| 6: | Responsive design in Tailwind |
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!