148 lines
5.3 KiB
HTML
148 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Typography</title>
|
|
</head>
|
|
<body>
|
|
<!-- Font Family -->
|
|
<p class="font-sans">Tailwind is awesome</p>
|
|
<p class="font-serif">Tailwind is awesome</p>
|
|
<p class="font-mono">Tailwind is awesome</p>
|
|
|
|
<!-- Font Size -->
|
|
<p class="text-xs">Tailwind is awesome</p>
|
|
<p class="text-sm">Tailwind is awesome</p>
|
|
<p class="text-base">Tailwind is awesome</p>
|
|
<p class="text-lg">Tailwind is awesome</p>
|
|
<p class="text-xl">Tailwind is awesome</p>
|
|
<p class="text-2xl">Tailwind is awesome</p>
|
|
<p class="text-3xl">Tailwind is awesome</p>
|
|
<p class="text-4xl">Tailwind is awesome</p>
|
|
<p class="text-5xl">Tailwind is awesome</p>
|
|
<p class="text-6xl">Tailwind is awesome</p>
|
|
<p class="text-7xl">Tailwind is awesome</p>
|
|
<p class="text-8xl">Tailwind is awesome</p>
|
|
<p class="text-9xl">Tailwind is awesome</p>
|
|
|
|
<!-- Font Weight -->
|
|
<p class="font-light">Tailwind is awesome</p>
|
|
<p class="font-normal">Tailwind is awesome</p>
|
|
<p class="font-medium">Tailwind is awesome</p>
|
|
<p class="font-semibold">Tailwind is awesome</p>
|
|
<p class="font-bold">Tailwind is awesome</p>
|
|
|
|
<!-- Letter Spacing -->
|
|
<p class="tracking-tight">Tailwind is awesome</p>
|
|
<p class="tracking-normal">Tailwind is awesome</p>
|
|
<p class="tracking-wide">Tailwind is awesome</p>
|
|
|
|
<!-- Text Alignment -->
|
|
<p class="text-left">Tailwind is awesome</p>
|
|
<p class="text-center">Tailwind is awesome</p>
|
|
<p class="text-right">Tailwind is awesome</p>
|
|
|
|
<!-- Text Decoration -->
|
|
<p class="underline decoration-4">Tailwind is awesome</p>
|
|
<p class="line-through">Tailwind is awesome</p>
|
|
<p class="overline">Tailwind is awesome</p>
|
|
<p class="no-underline">Tailwind is awesome</p>
|
|
|
|
<!-- Decoration Style -->
|
|
<p class="underline decoration-solid">Tailwind is awesome</p>
|
|
<p class="underline decoration-double">Tailwind is awesome</p>
|
|
<p class="underline decoration-dotted">Tailwind is awesome</p>
|
|
<p class="underline decoration-dashed">Tailwind is awesome</p>
|
|
<p class="underline decoration-wavy">Tailwind is awesome</p>
|
|
|
|
<!-- Decoration Offset -->
|
|
<p class="underline underline-offset-1">Tailwind is awesome</p>
|
|
<p class="underline underline-offset-2">Tailwind is awesome</p>
|
|
<p class="underline underline-offset-4">Tailwind is awesome</p>
|
|
<p class="underline underline-offset-8">Tailwind is awesome</p>
|
|
|
|
<!-- Text Transform -->
|
|
<p class="normal-case">Tailwind is awesome</p>
|
|
<p class="uppercase">Tailwind is awesome</p>
|
|
<p class="lowercase">Tailwind is awesome</p>
|
|
<p class="capitalize">Tailwind is awesome</p>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Font Family
|
|
font-sans
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
|
font-serif
|
|
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
|
|
font-mono
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
|
|
-->
|
|
|
|
<!--
|
|
Font Size
|
|
text-xs font-size: 0.75rem; /* 12px */
|
|
text-sm font-size: 0.875rem; /* 14px */
|
|
text-base font-size: 1rem; /* 16px */
|
|
text-lg font-size: 1.125rem; /* 18px */
|
|
text-xl font-size: 1.25rem; /* 20px */
|
|
text-2xl font-size: 1.5rem; /* 24px */
|
|
text-3xl font-size: 1.875rem; /* 30px */
|
|
text-4xl font-size: 2.25rem; /* 36px */
|
|
text-5xl font-size: 3rem; /* 48px */
|
|
text-6xl font-size: 3.75rem; /* 60px */
|
|
text-7xl font-size: 4.5rem; /* 72px */
|
|
text-8xl font-size: 6rem; /* 96px */
|
|
text-9xl font-size: 8rem; /* 128px */
|
|
-->
|
|
|
|
<!-- Font Weight
|
|
font-thin font-weight: 100;
|
|
font-extralight 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;
|
|
-->
|
|
|
|
<!-- Letter Spacing
|
|
tracking-tighter letter-spacing: -0.05em;
|
|
tracking-tight letter-spacing: -0.025em;
|
|
tracking-normal letter-spacing: 0em;
|
|
tracking-wide letter-spacing: 0.025em;
|
|
tracking-wider letter-spacing: 0.05em;
|
|
tracking-widest letter-spacing: 0.1em;
|
|
-->
|
|
|
|
<!-- Text Alignment
|
|
text-left text-align: left;
|
|
text-center text-align: center;
|
|
text-right text-align: right;
|
|
text-justify text-align: justify;
|
|
-->
|
|
|
|
<!-- Text Decoration
|
|
decoration-auto text-decoration-thickness: auto;
|
|
decoration-from-font text-decoration-thickness: from-font;
|
|
decoration-0 text-decoration-thickness: 0px;
|
|
decoration-1 text-decoration-thickness: 1px;
|
|
decoration-2 text-decoration-thickness: 2px;
|
|
decoration-4 text-decoration-thickness: 4px;
|
|
decoration-8 text-decoration-thickness: 8px;
|
|
-->
|
|
|
|
<!-- Text Transform
|
|
uppercase text-transform: uppercase;
|
|
lowercase text-transform: lowercase;
|
|
capitalize text-transform: capitalize;
|
|
normal-case text-transform: none;
|
|
-->
|