File: /home/imensosw/user-interface.imenso.co/tailwind/index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind File</title>
<link rel="icon" type="image/svg+xml" href="images/favicon.png" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container mx-auto">
<h1 class="text-3xl p-5 font-bold text-center">
Tailwind CSS
</h1>
<video autoplay muted loop id="myVideo">
<source src="./images/uiux.mp4" type="video/mp4">
<!-- https://www.youtube.com/shorts/2VIivnEq7hg -->
</video>
<section id="Installation" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Installation Process</h2>
<table class="table-auto border-collapse border w-3/4">
<tr>
<th class="border-collapse border p-2 text-left">Initialization folder</th>
<td class="border-collapse border p-2">npm init -y</td>
</tr>
<tr class=" bg-slate-100">
<th class="border-collapse border p-2 text-left">Install Tailwind CSS</th>
<td class="border-collapse border p-2">
<pre>
npm install -D tailwindcss
npx tailwindcss init
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left">Configure your template paths</th>
<td class="border-collapse border p-2">
<pre>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Exa.
content: [
'./public/index.html',
'./src/**/*.{html,js}',
'./components/**/*.{html,js}',
'./pages/**/*.{html,js}',
'./index.html',
],
* Never include CSS files in your content configuration
</pre>
</td>
</tr>
<tr class=" bg-slate-100">
<th class="border-collapse border p-2 text-left">Add the Tailwind directives to your CSS</th>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">input.css</small>
<pre>
@tailwind base;
@tailwind components;
@tailwind utilities;
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left">Start the Tailwind CLI build process</th>
<td class="border-collapse border p-2">
<pre>
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Run Command: npm run build
</pre>
</td>
</tr>
<tr class=" bg-slate-100">
<th class="border-collapse border p-2 text-left">Start using Tailwind in your HTML</th>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg mb-3">index.html/php</small>
<pre>
<link href="/output.css" rel="stylesheet">
</pre>
</td>
</tr>
</table>
</section>
<section id="Screen" class="mx-auto mb-5">
<div class="mb-5">
<div class="mb-3">
<strong>screen()</strong>
<p>The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.</p>
</div>
<table class="table-auto border-collapse border w-3/4">
<tr>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">input.css</small>
<pre>
@media screen(sm) {
/* ... */
}
@media (min-width: 640px) {
/* ... */
}
</pre>
</td>
</tr>
</table>
</div>
</section>
<section id="Responsive" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Responsive Design</h2>
<div>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left">Breakpoint prefix</th>
<th class="border-collapse border p-2 text-left">Minimum width</th>
<th class="border-collapse border p-2 text-left">CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-collapse border p-2"><code>sm</code></td>
<td class="border-collapse border p-2">640px</td>
<td class="border-collapse border p-2"><code>@media (min-width: 640px) { ... }</code></td>
</tr>
<tr class=" bg-slate-100">
<td class="border-collapse border p-2"><code>md</code></td>
<td class="border-collapse border p-2">768px</td>
<td class="border-collapse border p-2"><code>@media (min-width: 768px) { ... }</code></td>
</tr>
<tr>
<td class="border-collapse border p-2"><code>lg</code></td>
<td class="border-collapse border p-2">1024px</td>
<td class="border-collapse border p-2"><code>@media (min-width: 1024px) { ... }</code></td>
</tr>
<tr class=" bg-slate-100">
<td class="border-collapse border p-2"><code>xl</code></td>
<td class="border-collapse border p-2">1280px</td>
<td class="border-collapse border p-2"><code>@media (min-width: 1280px) { ... }</code></td>
</tr>
<tr>
<td class="border-collapse border p-2"><code>2xl</code></td>
<td class="border-collapse border p-2">1536px</td>
<td class="border-collapse border p-2"><code>@media (min-width: 1536px) { ... }</code></td>
</tr>
</tbody>
</table>
<pre>
<img class="w-16 md:w-32 lg:w-48" src="...">
</pre>
</div>
<!-- <div class="mt-3">
<p>Tailwind generates a corresponding max-* modifier for each breakpoint, so out of the box the following modifiers are available:</p>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left">Modifier</th>
<th class="border-collapse border p-2 text-left">Media query</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-collapse border p-2"><code>max-sm</code></td>
<td class="border-collapse border p-2"><code>@media not all and (min-width: 640px) { ... }</code></td></tr>
<tr class=" bg-slate-100">
<td class="border-collapse border p-2"><code>max-md</code></td>
<td class="border-collapse border p-2"><code>@media not all and (min-width: 768px) { ... }</code></td>
</tr>
<tr>
<td class="border-collapse border p-2"><code>max-lg</code></td>
<td class="border-collapse border p-2"><code>@media not all and (min-width: 1024px) { ... }</code></td>
</tr>
<tr class=" bg-slate-100">
<td class="border-collapse border p-2"><code>max-xl</code></td>
<td class="border-collapse border p-2"><code>@media not all and (min-width: 1280px) { ... }</code></td>
</tr>
<tr>
<td class="border-collapse border p-2"><code>max-2xl</code></td>
<td class="border-collapse border p-2"><code>@media not all and (min-width: 1536px) { ... }</code></td>
</tr>
</tbody>
</table>
</div> -->
</section>
<section id="Hover Effect" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Handling Hover, Focus</h2>
<div>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left">Hover</th>
<td class="border-collapse border p-2">
<pre>
<button class="bg-sky-500 hover:bg-sky-700 ...">
</pre>
</td>
</tr>
<tr class=" bg-slate-100">
<th class="border-collapse border p-2 text-left">Focus</th>
<td class="border-collapse border p-2">
<pre>
<button class="bg-sky-500 focus:bg-sky-700 ...">
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left">Active</th>
<td class="border-collapse border p-2">
<pre>
<button class="bg-sky-500 active:bg-sky-700 ...">
</pre>
</td>
</tr>
<tr class=" bg-slate-100">
<th class="border-collapse border p-2 text-left">Disabled</th>
<td class="border-collapse border p-2">
<pre>
<button class="bg-sky-500 disabled:bg-sky-700 ...">
</pre>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</section>
<section id="Layout" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Colors</h2>
<p>Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.</p>
<div>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left">
<div class="space-x-3">
<span class="text-gray-600">Gray</span>,
<span class="text-zinc-600">Zinc</span>,
<span class="text-neutral-600">Neutral</span>,
<span class="text-stone-600">Stone</span>,
<span class="text-red-600">Red</span>,
<span class="text-orange-600">Orange</span>,
<span class="text-amber-600">Amber</span>,
<span class="text-yellow-600">Yellow</span>,
<span class="text-lime-600">Lime</span>,
<span class="text-green-600">Green</span>,
<span class="text-emerald-600">Emerald</span>,
<span class="text-teal-600">Teal</span>,
<span class="text-cyan-600">Cyan</span>,
<span class="text-sky-600">Sky</span>,
<span class="text-blue-600">Blue</span>,
<span class="text-indigo-600">Indigo</span>,
<span class="text-violet-600">Violet</span>,
<span class="text-purple-600">Purple</span>,
<span class="text-fuchsia-600">Fuchsia</span>,
<span class="text-pink-600">Pink</span>,
<span class="text-rose-600">Rose</div>
</th>
</tr>
<tr>
<td class="border-collapse border p-2">
<div class="flex items-center space-x-3">
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-50">50</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-100">100</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-200">200</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-300">300</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-400">400</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-500">500</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-600 text-white">600</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-700 text-white">700</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-800 text-white">800</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-900 text-white">900</div>
<div class="h-8 w-8 leading-8 text-center rounded-sm bg-slate-950 text-white">950</div>
</div>
</td>
</tr>
</thead>
</table>
<pre class="mt-3">
class="text-rose-600" Class="bg-slate-950"
</pre>
</div>
</section>
<section id="Layout" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Layout</h2>
<div>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left w-[100px]"></th>
<th class="border-collapse border p-2 text-left" style="min-width: 150px;">Class</th>
<th class="border-collapse border p-2 text-left">Properties</th>
</tr>
<!-- <tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> aspect ratio</th>
<td class="border-collapse border p-2"> aspect-auto </td>
<td class="border-collapse border p-2"> aspect-ratio: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> aspect-square </td>
<td class="border-collapse border p-2"> aspect-ratio: 1 / 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> aspect-video </td>
<td class="border-collapse border p-2"> aspect-ratio: 16 / 9; </td>
</tr> -->
<tr>
<th class="border-collapse border p-2 text-left" rowspan="6"> Container</th>
<td class="border-collapse border p-2"> container </td>
<td class="border-collapse border p-2"> width: 100%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> sm (640px) </td>
<td class="border-collapse border p-2"> max-width: 640px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> md (768px) </td>
<td class="border-collapse border p-2"> max-width: 768px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> lg (1024px) </td>
<td class="border-collapse border p-2"> max-width: 1024px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> xl (1280px) </td>
<td class="border-collapse border p-2"> max-width: 1280px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> 2xl (1536px) </td>
<td class="border-collapse border p-2"> max-width: 1536px; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="27"> Columns</th>
<td class="border-collapse border p-2"> columns-1 </td>
<td class="border-collapse border p-2"> columns: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-2 </td>
<td class="border-collapse border p-2"> columns: 2; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-3 </td>
<td class="border-collapse border p-2"> columns: 3; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-4 </td>
<td class="border-collapse border p-2"> columns: 4; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-5 </td>
<td class="border-collapse border p-2"> columns: 5; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-6 </td>
<td class="border-collapse border p-2"> columns: 6; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-7 </td>
<td class="border-collapse border p-2"> columns: 7; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-8 </td>
<td class="border-collapse border p-2"> columns: 8; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-9 </td>
<td class="border-collapse border p-2"> columns: 9; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-10 </td>
<td class="border-collapse border p-2"> columns: 10; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-11 </td>
<td class="border-collapse border p-2"> columns: 11; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-12 </td>
<td class="border-collapse border p-2"> columns: 12; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-auto </td>
<td class="border-collapse border p-2"> columns: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-3xs </td>
<td class="border-collapse border p-2"> columns: 16rem; /* 256px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-2xs </td>
<td class="border-collapse border p-2"> columns: 18rem; /* 288px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-xs </td>
<td class="border-collapse border p-2"> columns: 20rem; /* 320px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-sm </td>
<td class="border-collapse border p-2"> columns: 24rem; /* 384px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-md </td>
<td class="border-collapse border p-2"> columns: 28rem; /* 448px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-12 </td>
<td class="border-collapse border p-2"> columns: 12; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-lg </td>
<td class="border-collapse border p-2"> columns: 32rem; /* 512px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-xl </td>
<td class="border-collapse border p-2"> columns: 36rem; /* 576px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-2xl </td>
<td class="border-collapse border p-2"> columns: 42rem; /* 672px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-3xl </td>
<td class="border-collapse border p-2"> columns: 48rem; /* 768px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-4xl </td>
<td class="border-collapse border p-2"> columns: 56rem; /* 896px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-5xl </td>
<td class="border-collapse border p-2"> columns: 64rem; /* 1024px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-6xl </td>
<td class="border-collapse border p-2"> columns: 72rem; /* 1152px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> columns-7xl </td>
<td class="border-collapse border p-2"> columns: 80rem; /* 1280px */ </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="7"> Display</th>
<td class="border-collapse border p-2"> block </td>
<td class="border-collapse border p-2"> display: block; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> inline-block </td>
<td class="border-collapse border p-2"> display: inline-block; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> inline </td>
<td class="border-collapse border p-2"> display: inline; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> flex </td>
<td class="border-collapse border p-2"> display: flex; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid </td>
<td class="border-collapse border p-2"> display: grid; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> list-item </td>
<td class="border-collapse border p-2"> display: list-item; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> hidden </td>
<td class="border-collapse border p-2"> display: none; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Floats</th>
<td class="border-collapse border p-2"> float-left </td>
<td class="border-collapse border p-2"> float: left; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> float-right </td>
<td class="border-collapse border p-2"> float: right; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> float-none </td>
<td class="border-collapse border p-2"> float: none; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Clear</th>
<td class="border-collapse border p-2"> clear-left </td>
<td class="border-collapse border p-2"> clear: left; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> clear-right </td>
<td class="border-collapse border p-2"> clear: right; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> clear-both </td>
<td class="border-collapse border p-2"> clear: both; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5"> Object Fit</th>
<td class="border-collapse border p-2"> object-contain </td>
<td class="border-collapse border p-2"> object-fit: contain; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-cover </td>
<td class="border-collapse border p-2"> object-fit: cover; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-fill </td>
<td class="border-collapse border p-2"> object-fit: fill; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-none</td>
<td class="border-collapse border p-2"> object-fit: none; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-scale-down </td>
<td class="border-collapse border p-2"> object-fit: scale-down; </td>
</tr>
<!-- <tr>
<th class="border-collapse border p-2 text-left" rowspan="9"> Object Position </th>
<td class="border-collapse border p-2"> object-bottom </td>
<td class="border-collapse border p-2"> object-position: bottom; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-center </td>
<td class="border-collapse border p-2"> object-position: center; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-left </td>
<td class="border-collapse border p-2"> object-position: left; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-left-bottom </td>
<td class="border-collapse border p-2"> object-position: left bottom; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-left-top </td>
<td class="border-collapse border p-2"> object-position: left top; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-right </td>
<td class="border-collapse border p-2"> object-position: right; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-right-bottom </td>
<td class="border-collapse border p-2"> object-position: right bottom; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-right-top </td>
<td class="border-collapse border p-2"> object-position: right top; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> object-top </td>
<td class="border-collapse border p-2"> object-position: top; </td>
</tr> -->
<tr>
<th class="border-collapse border p-2 text-left" rowspan="6"> Overflow</th>
<td class="border-collapse border p-2"> overflow-auto </td>
<td class="border-collapse border p-2"> overflow: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overflow-hidden </td>
<td class="border-collapse border p-2"> overflow: hidden; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overflow-visible </td>
<td class="border-collapse border p-2"> overflow: visible; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overflow-scroll </td>
<td class="border-collapse border p-2"> overflow: scroll; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overflow-x-auto </td>
<td class="border-collapse border p-2"> overflow-x: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overflow-y-auto </td>
<td class="border-collapse border p-2"> overflow-y: auto; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5"> Position</th>
<td class="border-collapse border p-2"> static </td>
<td class="border-collapse border p-2"> position: static; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> fixed </td>
<td class="border-collapse border p-2"> position: fixed; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> absolute </td>
<td class="border-collapse border p-2"> position: absolute; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> relative </td>
<td class="border-collapse border p-2"> position: relative; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> sticky </td>
<td class="border-collapse border p-2"> position: sticky; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="9"> Top / Right / Bottom / Left</th>
<td class="border-collapse border p-2"> inset-0 </td>
<td class="border-collapse border p-2"> inset: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> inset-x-0 </td>
<td class="border-collapse border p-2"> left: 0px; right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> inset-y-0 </td>
<td class="border-collapse border p-2"> top: 0px; bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> start-0 </td>
<td class="border-collapse border p-2"> inset-inline-start: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> end-0 </td>
<td class="border-collapse border p-2"> inset-inline-end: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> top-0 </td>
<td class="border-collapse border p-2"> top: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> right-0 </td>
<td class="border-collapse border p-2"> right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> bottom-0 </td>
<td class="border-collapse border p-2"> bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> left-0 </td>
<td class="border-collapse border p-2"> left: 0px; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Visibility </th>
<td class="border-collapse border p-2"> visible </td>
<td class="border-collapse border p-2"> visibility: visible; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> invisible </td>
<td class="border-collapse border p-2"> visibility: hidden; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> collapse </td>
<td class="border-collapse border p-2"> visibility: collapse; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Z-Index</th>
<td class="border-collapse border p-2" colspan="2"> z-0, z-10, z-20, z-30, z-40, z-50, z-auto </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Customizing </td>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
module.exports = {
theme: {
extend: {
zIndex: {
'999': '999',
}
}
}
}
OR
class="z-[100]"
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="9"> Padding </th>
<td class="border-collapse border p-2"> p-0 </td>
<td class="border-collapse border p-2"> padding: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> px-0 </td>
<td class="border-collapse border p-2"> padding-left: 0px; padding-right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> py-0 </td>
<td class="border-collapse border p-2"> padding-top: 0px; padding-bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> pt-0 </td>
<td class="border-collapse border p-2"> padding-top: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> pb-0 </td>
<td class="border-collapse border p-2"> padding-bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> pr-0 </td>
<td class="border-collapse border p-2"> padding-right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> pl-0 </td>
<td class="border-collapse border p-2"> padding-left: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2" colspan="2"> 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem)
</td>
</tr>
<tr>
<td class="border-collapse border p-2">Customize
</td>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
module.exports = {
theme: {
extend: {
padding: {
'5px': '5px',
}
}
}
}
OR
class="p-[5px]"
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="9"> Margin </th>
<td class="border-collapse border p-2"> m-0 </td>
<td class="border-collapse border p-2"> margin: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> mx-auto </td>
<td class="border-collapse border p-2"> margin-left: auto; margin-right: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> my-auto </td>
<td class="border-collapse border p-2"> margin-top: auto; margin-bottom: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> mx-0 </td>
<td class="border-collapse border p-2"> margin-left: 0px; margin-right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> my-0 </td>
<td class="border-collapse border p-2"> margin-top: 0px; margin-bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> mt-0 </td>
<td class="border-collapse border p-2"> margin-top: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> mb-0 </td>
<td class="border-collapse border p-2"> margin-bottom: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> mr-0 </td>
<td class="border-collapse border p-2"> margin-right: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> ml-0 </td>
<td class="border-collapse border p-2"> margin-left: 0px; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Space Between </th>
<td class="border-collapse border p-2"> space-x-0, <br />space-y-0 </td>
<td class="border-collapse border p-2"> margin-left: 0px;<br />margin-top: 0px;<br /><br />Utilities for controlling the space between child elements. </td>
</tr>
<tr>
<td class="border-collapse border p-2"> space-y-reverse<br />space-x-reverse</td>
<td class="border-collapse border p-2"> --tw-space-y-reverse: 1;<br />--tw-space-x-reverse: 1;<br /><br />
If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.<br /><br />
<strong>Using negative values</strong>To use a negative space value, prefix the class name with a dash to convert it to a negative value.
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="22"> Dimentions </th>
<td class="border-collapse border p-2"> w-0 </td>
<td class="border-collapse border p-2"> width: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-auto </td>
<td class="border-collapse border p-2"> width: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/12 </td>
<td class="border-collapse border p-2"> width: 8.333333%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/6, w-2/12 </td>
<td class="border-collapse border p-2"> width: 16.666667%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/5 </td>
<td class="border-collapse border p-2"> width: 20%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/4, w-3/12 </td>
<td class="border-collapse border p-2"> width: 25%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/3, w-4/12 </td>
<td class="border-collapse border p-2"> width: 33.333333%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-2/5 </td>
<td class="border-collapse border p-2"> width: 40%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-5/12 </td>
<td class="border-collapse border p-2"> width: 41.666667%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-1/2, w-2/4, w-3/6, w-6/12 </td>
<td class="border-collapse border p-2"> width: 50%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-7/12 </td>
<td class="border-collapse border p-2"> width: 58.333333%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-3/5 </td>
<td class="border-collapse border p-2"> width: 60%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-2/3, w-4/6, w-8/12 </td>
<td class="border-collapse border p-2"> width: 66.666667%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-3/4, w-9/12 </td>
<td class="border-collapse border p-2"> width: 75%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-4/5 </td>
<td class="border-collapse border p-2"> width: 80%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-5/6, w-10/12 </td>
<td class="border-collapse border p-2"> width: 83.333333%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-11/12 </td>
<td class="border-collapse border p-2"> width: 91.666667%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-full </td>
<td class="border-collapse border p-2"> width: 100%; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> w-screen </td>
<td class="border-collapse border p-2"> width: 100vw; </td>
</tr>
<tr>
<td class="border-collapse border p-2" colspan="2"> 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem)
</td>
</tr>
<tr>
<td class="border-collapse border p-2" colspan="2">
Width and height having same type of properties with prefix of (w/h)
</td>
<tr>
<td class="border-collapse border p-2"> min-width,<br /> max-width </td>
<td class="border-collapse border p-2"> min-height,<br /> max-height </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Size </th>
<td class="border-collapse border p-2"> size-0 </td>
<td class="border-collapse border p-2"> width: 0px; height: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> size-auto </td>
<td class="border-collapse border p-2"> width: auto; height: auto; </td>
</tr>
<tr>
<td class="border-collapse border p-2" colspan="2"> Same Properties like other<br /> 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4"> Typography </th>
<td class="border-collapse border p-2"> font-sans </td>
<td class="border-collapse border p-2"> font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-serif </td>
<td class="border-collapse border p-2"> font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-mono </td>
<td class="border-collapse border p-2"> font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; </td>
</tr>
<tr>
<td class="border-collapse border p-2">Customize
</td>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
module.exports = {
theme: {
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
}
}
}
</pre>
<hr class="mb-3" />
<small class="bg-slate-300 py-1 px-2 rounded-lg mb-3">input.css</small>
<pre>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Poppins', sans-serif;
}
}
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="15"> Font Size </th>
<td class="border-collapse border p-2"> text-xs </td>
<td class="border-collapse border p-2"> font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-sm </td>
<td class="border-collapse border p-2"> font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-sm </td>
<td class="border-collapse border p-2"> font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-base </td>
<td class="border-collapse border p-2"> font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-lg </td>
<td class="border-collapse border p-2"> font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-xl </td>
<td class="border-collapse border p-2"> font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-2xl </td>
<td class="border-collapse border p-2"> font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-3xl </td>
<td class="border-collapse border p-2"> font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-4xl </td>
<td class="border-collapse border p-2"> font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */ </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-5xl </td>
<td class="border-collapse border p-2"> font-size: 3rem; /* 48px */
line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-6xl </td>
<td class="border-collapse border p-2"> font-size: 3.75rem; /* 60px */
line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-7xl </td>
<td class="border-collapse border p-2"> font-size: 4.5rem; /* 72px */
line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-8xl </td>
<td class="border-collapse border p-2"> font-size: 6rem; /* 96px */
line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-9xl </td>
<td class="border-collapse border p-2"> font-size: 8rem; /* 128px */
line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Customize </td>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
module.exports = {
theme: {
fontSize: {
sm: '0.8rem',
base: '1rem',
xl: '1.25rem',
'2xl': '1.563rem',
}
}
}
OR
class="text-sm/[17px]"
</pre>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Font Style </th>
<td class="border-collapse border p-2"> italic </td>
<td class="border-collapse border p-2"> font-style: italic; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> not-italic </td>
<td class="border-collapse border p-2"> font-style: normal; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="9"> Font Weight </th>
<td class="border-collapse border p-2"> font-thin </td>
<td class="border-collapse border p-2"> font-weight: 100; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-extralight </td>
<td class="border-collapse border p-2"> font-weight: 200; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-light </td>
<td class="border-collapse border p-2"> font-weight: 300; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-normal </td>
<td class="border-collapse border p-2"> font-weight: 400; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-medium </td>
<td class="border-collapse border p-2"> font-weight: 500; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-semibold </td>
<td class="border-collapse border p-2"> font-weight: 600; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-bold </td>
<td class="border-collapse border p-2"> font-weight: 700; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-extrabold </td>
<td class="border-collapse border p-2"> font-weight: 800; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> font-black </td>
<td class="border-collapse border p-2"> font-weight: 900; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="7"> Letter Spacing </th>
<td class="border-collapse border p-2"> tracking-tighter </td>
<td class="border-collapse border p-2"> letter-spacing: -0.05em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> tracking-tight </td>
<td class="border-collapse border p-2"> letter-spacing: -0.025em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> tracking-normal </td>
<td class="border-collapse border p-2"> letter-spacing: 0em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> tracking-wide </td>
<td class="border-collapse border p-2"> letter-spacing: 0.025em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> tracking-wider </td>
<td class="border-collapse border p-2"> letter-spacing: 0.05em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> tracking-widest </td>
<td class="border-collapse border p-2"> letter-spacing: 0.1em; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Using negative values </td>
<td class="border-collapse border p-2"> To use a negative letter-spacing value, prefix the class name with a dash to convert it to a negative value.
<p>class="-tracking-2"</p>
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Line Clamp</th>
<td class="border-collapse border p-2"> line-clamp-1 </td>
<td class="border-collapse border p-2">
<pre>
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
Utilities for clamping text to a specific number of lines.
</pre>
</td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="7"> Line Height</th>
<td class="border-collapse border p-2"> leading-none </td>
<td class="border-collapse border p-2"> line-height: 1; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> leading-tight </td>
<td class="border-collapse border p-2"> line-height: 1.25; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> leading-snug </td>
<td class="border-collapse border p-2"> line-height: 1.375; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> leading-normal </td>
<td class="border-collapse border p-2"> line-height: 1.5; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> leading-relaxed </td>
<td class="border-collapse border p-2"> line-height: 1.625; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> leading-loose </td>
<td class="border-collapse border p-2"> line-height: 2; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> leading-3(.75rem), leading-4(1rem), leading-5(1.25rem), leading-6(1.5rem), leading-7(1.75rem), leading-8(2rem), leading-9(2.25rem), leading-10(2.5rem) </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Text Color</th>
<td class="border-collapse border p-2"> text-transparent </td>
<td class="border-collapse border p-2"> color: transparent; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-black,<br /> text-white </td>
<td class="border-collapse border p-2"> color: rgb(0 0 0);<br /> color: rgb(255 255 255); </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> text-gray-(50-950) </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="6"> Text Align</th>
<td class="border-collapse border p-2"> text-left </td>
<td class="border-collapse border p-2"> text-align: left; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-center </td>
<td class="border-collapse border p-2"> text-align: center; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-right </td>
<td class="border-collapse border p-2"> text-align: right; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-justify </td>
<td class="border-collapse border p-2"> text-align: justify; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-start </td>
<td class="border-collapse border p-2"> text-align: start; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-end </td>
<td class="border-collapse border p-2"> text-align: end; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4"> Text Decoration</th>
<td class="border-collapse border p-2"> underline </td>
<td class="border-collapse border p-2"> text-decoration-line: underline; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> overline </td>
<td class="border-collapse border p-2"> text-decoration-line: overline; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> line-through </td>
<td class="border-collapse border p-2"> text-decoration-line: line-through; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> no-underline </td>
<td class="border-collapse border p-2"> text-decoration-line: none; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4"> Text Transform</th>
<td class="border-collapse border p-2"> uppercase </td>
<td class="border-collapse border p-2"> text-transform: uppercase; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> lowercase </td>
<td class="border-collapse border p-2"> text-transform: lowercase; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> capitalize </td>
<td class="border-collapse border p-2"> text-transform: capitalize; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> normal-case </td>
<td class="border-collapse border p-2"> text-transform: none; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3"> Text Overflow</th>
<td class="border-collapse border p-2"> truncate </td>
<td class="border-collapse border p-2">
<pre>
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
</pre>
</td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-ellipsis </td>
<td class="border-collapse border p-2"> text-overflow: ellipsis; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-clip </td>
<td class="border-collapse border p-2"> text-overflow: clip; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4"> Text Wrap</th>
<td class="border-collapse border p-2"> text-wrap </td>
<td class="border-collapse border p-2"> text-wrap: wrap; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-nowrap </td>
<td class="border-collapse border p-2"> text-wrap: nowrap; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-balance </td>
<td class="border-collapse border p-2"> text-wrap: balance; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> text-pretty </td>
<td class="border-collapse border p-2"> text-wrap: pretty; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Text Indent</th>
<td class="border-collapse border p-2"> indent-0 </td>
<td class="border-collapse border p-2"> text-indent: 0px; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2">
indent-1<br />
0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Vertical Align</th>
<td class="border-collapse border p-2"> align-baseline </td>
<td class="border-collapse border p-2"> vertical-align: baseline; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> align-top,<br /> align-middle,<br /> align-bottom,<br /> align-text-top,<br /> align-text-bottom,<br /> align-sub,<br /> align-super </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Whitespace</th>
<td class="border-collapse border p-2"> whitespace-normal </td>
<td class="border-collapse border p-2"> white-space: normal; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> whitespace-nowrap,<br /> whitespace-pre,<br /> whitespace-pre-line,<br /> whitespace-pre-wrap,<br /> whitespace-break-spaces </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2"> Word Break</th>
<td class="border-collapse border p-2"> break-normal </td>
<td class="border-collapse border p-2"> overflow-wrap: normal;
word-break: normal; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> break-words,<br /> break-all,<br /> break-keep</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">List Style</th>
<td class="border-collapse border p-2"> list-image-none </td>
<td class="border-collapse border p-2"> list-style-image: none; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> list-inside </td>
<td class="border-collapse border p-2"> list-style-position: inside;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> list-outside </td>
<td class="border-collapse border p-2"> list-style-position: outside;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> list-outside </td>
<td class="border-collapse border p-2"> list-none,<br /> list-disc,<br /> list-decimal</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="7"> Background Color</th>
<td class="border-collapse border p-2"> bg-transparent </td>
<td class="border-collapse border p-2"> background-color: transparent; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> bg-black,<br /> bg-white </td>
<td class="border-collapse border p-2"> background-color: rgb(0 0 0);<br /> background-color: rgb(255 255 255); </td>
</tr>
<tr>
<td class="border-collapse border p-2"> more </td>
<td class="border-collapse border p-2"> bg-gray-(50-950) </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Background Attachment </td>
<td class="border-collapse border p-2"> bg-fixed, bg-local, bg-scroll </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Background Position </td>
<td class="border-collapse border p-2"> bg-bottom, bg-center, bg-left, bg-left-bottom, , bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Background Repeat </td>
<td class="border-collapse border p-2"> bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space </td>
</tr>
<tr>
<td class="border-collapse border p-2"> Background Size </td>
<td class="border-collapse border p-2">bg-auto, bg-cover, bg-contain </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Border</th>
<td class="border-collapse border p-2"> rounded-none </td>
<td class="border-collapse border p-2">rounded-none (border-radius: 0px;) <br /><br /> rounded(border-radius: 0.25rem; /* 4px */),<br /> rounded-sm(border-radius: 0.125rem; /* 2px */),<br /> rounded-md(border-radius: 0.375rem; /* 6px */),<br /> rounded-lg(border-radius: 0.5rem; /* 8px */),<br /> rounded-xl(border-radius: 0.75rem; /* 12px */),<br /> rounded-2xl(border-radius: 1rem; /* 16px *),<br /> rounded-3xl(border-radius: 1.5rem; /* 24px */),<br /> rounded-full(border-radius: 9999px;),<br /> more.....</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Border Width </td>
<td class="border-collapse border p-2"> border-0(border-width: 0px;),<br /> border(border-width: 1px;),<br /> border-2(border-width: 2px;),<br /> border-4(border-width: 4px;),<br /> border-8(border-width: 8px;),<br />border-x-, border-y-, border-t-, border-r-, border-b-, border-l-, more.....</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Border Style </td>
<td class="border-collapse border p-2"> border-solid,<br /> border-dashed,<br /> border-dotted,<br /> border-double,<br /> border-hidden,<br /> border-none</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Border Color </td>
<td class="border-collapse border p-2"> border-black,<br /> border-white,<br /> border-slate-(50-950)</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3">Divide </th>
<td class="border-collapse border p-2"> Divide Width </td>
<td class="border-collapse border p-2">divide-x,<br /> divide-x-0,<br /> divide-x-2,<br /> divide-x-4,<br /> divide-x-8,<br /> divide-y,<br /> divide-y-reverse,<br /> divide-x-reverse<br />
<p>Utilities for controlling the border width between elements.</p>
</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Divide Style </td>
<td class="border-collapse border p-2"> divide-solid,<br /> divide-dashed,<br /> divide-dotted,<br /> divide-double,<br /> divide-hidden,<br /> divide-none</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Divide Color </td>
<td class="border-collapse border p-2">divide-transparent, <br /> divide-black,<br /> divide-white,<br /> divide-slate-(50-950)</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3">Outline </th>
<td class="border-collapse border p-2"> Outline Width </td>
<td class="border-collapse border p-2">outline-0,<br /> outline-1,<br /> outline-2,<br /> outline-4,<br /> outline-8</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Outline Style </td>
<td class="border-collapse border p-2"> outline,<br /> outline-dashed,<br /> outline-dotted,<br /> outline-double,<br /> outline-none</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Outline Color </td>
<td class="border-collapse border p-2">outline-transparent, <br /> outline-black,<br /> outline-white,<br /> outline-slate-(50-950)</td>
</tr>
<!-- <tr>
<th class="border-collapse border p-2 text-left" rowspan="3">Ring </th>
<td class="border-collapse border p-2"> Ring Width </td>
<td class="border-collapse border p-2">ring, <br />ring-0,<br /> ring-1,<br /> ring-2,<br /> ring-4,<br /> ring-8, <br />ring-inset</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Ring Offset Width </td>
<td class="border-collapse border p-2"> ring-offset-0,<br /> ring-offset-1,<br /> ring-offset-2,<br /> ring-offset-4,<br /> ring-offset-8</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Ring Color </td>
<td class="border-collapse border p-2">ring-transparent, <br /> ring-black,<br /> ring-white,<br /> ring-slate-(50-950)</td>
</tr> -->
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Box Shadow </th>
<td class="border-collapse border p-2">Box Shadow </td>
<td class="border-collapse border p-2">shadow, <br />shadow-none,<br /> shadow-sm,<br /> shadow-md,<br /> shadow-lg,<br /> shadow-xl, <br />shadow-2xl, <br />shadow-inner</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Box Shadow Color </td>
<td class="border-collapse border p-2">shadow-transparent, <br /> shadow-black,<br /> shadow-white,<br /> shadow-slate-(50-950)</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left">Opacity </th>
<td class="border-collapse border p-2">Opacity</td>
<td class="border-collapse border p-2">opacity-0, <br />opacity-(0,5,10,15....100)</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4 ">Tables </th>
<td class="border-collapse border p-2">Border Collapse</td>
<td class="border-collapse border p-2">border-collapse, <br />border-separate</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Border Spacing </td>
<td class="border-collapse border p-2">border-spacing-, border-spacing-x-, border-spacing-y-<br/>(0, 1, 2, 3, 4, 5, 6 7, 8, 9, 10, 11, 12, 14, 16,20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64,72, 80, 96)</td>
</tr>
<tr>
<td class="border-collapse border p-2"> Table Layout </td>
<td class="border-collapse border p-2">table-auto<br/>table-fixed</td>
</tr>
<tr>
<td class="border-collapse border p-2">Caption Side </td>
<td class="border-collapse border p-2">caption-top<br/>caption-bottom</td>
</tr>
</thead>
</table>
</div>
</section>
<section id="Layout" class="mx-auto mb-5">
<h2 class="text-2xl mb-3 font-semibold">Flexbox & Grid</h2>
<h4 class="mb-3 font-bold">display: flex; flex</h4>
<div>
<table class="table-auto border-collapse border w-3/4 mb-3">
<thead>
<tr>
<th class="border-collapse border p-2 text-left w-[100px]" style="width: 100px;"></th>
<th class="border-collapse border p-2 text-left" style="min-width: 150px;">Class</th>
<th class="border-collapse border p-2 text-left">Properties</th>
</tr>
<tr>
<th class="border-collapse border p-2 text-left"> Flex Basis</th>
<td class="border-collapse border p-2"> Flex Basis</td>
<td class="border-collapse border p-2"> basis-(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96)
<br />
basis-auto,<br /> basis-px, <br />
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="16"></th>
<td class="border-collapse border p-2"> basis-1/12</td>
<td class="border-collapse border p-2">(flex-basis: 8.333333%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-1/6, basis-2/12</td>
<td class="border-collapse border p-2">(flex-basis: 16.666667%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-1/5</td>
<td class="border-collapse border p-2">(flex-basis: 20%)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-1/4, basis-3/12</td>
<td class="border-collapse border p-2">(flex-basis: 25%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-1/3, basis-2/6, basis-4/12</td>
<td class="border-collapse border p-2">(flex-basis: 33.333333%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-2/5</td>
<td class="border-collapse border p-2">(flex-basis: 40%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-5/12</td>
<td class="border-collapse border p-2">(flex-basis: 41.666667%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-1/2, basis-2/4, basis-3/6, basis-6/12</td>
<td class="border-collapse border p-2">(flex-basis: 50%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-7/12</td>
<td class="border-collapse border p-2">(flex-basis: 58.333333%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-3/5</td>
<td class="border-collapse border p-2">(flex-basis: 60%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-2/3, basis-4/6, basis-8/12</td>
<td class="border-collapse border p-2">(flex-basis: 66.666667%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-3/4, basis-9/12</td>
<td class="border-collapse border p-2">(flex-basis: 75%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-4/5</td>
<td class="border-collapse border p-2">(flex-basis: 80%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-5/6, basis-10/12</td>
<td class="border-collapse border p-2">(flex-basis: 83.333333%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-11/12</td>
<td class="border-collapse border p-2">(flex-basis: 91.666667%;)</td>
</tr>
<tr>
<td class="border-collapse border p-2">basis-full</td>
<td class="border-collapse border p-2">(flex-basis: 100%;)</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Flex Direction</th>
<td class="border-collapse border p-2"> flex-row</td>
<td class="border-collapse border p-2">flex-direction: row;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-row-reverse</td>
<td class="border-collapse border p-2">flex-direction: row-reverse;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-col</td>
<td class="border-collapse border p-2">flex-direction: column;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-col-reverse</td>
<td class="border-collapse border p-2">flex-direction: column-reverse;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="3">Flex Wrap</th>
<td class="border-collapse border p-2"> flex-wrap</td>
<td class="border-collapse border p-2"> flex-wrap: wrap;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-wrap-reverse</td>
<td class="border-collapse border p-2">flex-wrap: wrap-reverse;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-nowrap</td>
<td class="border-collapse border p-2">flex-wrap: nowrap;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Flex</th>
<td class="border-collapse border p-2"> flex-1</td>
<td class="border-collapse border p-2"> flex: 1 1 0%;<br />Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-auto</td>
<td class="border-collapse border p-2">flex: 1 1 auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-initial</td>
<td class="border-collapse border p-2">flex: 0 1 auto;<br />Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:</td>
</tr>
<tr>
<td class="border-collapse border p-2">flex-none</td>
<td class="border-collapse border p-2">flex: none;<br />Use flex-none to prevent a flex item from growing or shrinking:</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Flex Grow</th>
<td class="border-collapse border p-2"> grow </td>
<td class="border-collapse border p-2"> flex-grow: 1;<br />Use grow to allow a flex item to grow to fill any available space:</td>
</tr>
<tr>
<td class="border-collapse border p-2"> grow-0</td>
<td class="border-collapse border p-2">flex-grow: 0;<br />Use grow-0 to prevent a flex item from growing:</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Flex Shrink</th>
<td class="border-collapse border p-2"> shrink </td>
<td class="border-collapse border p-2"> flex-shrink: 1;<br />Use shrink to allow a flex item to shrink if needed:</td>
</tr>
<tr>
<td class="border-collapse border p-2"> shrink-0</td>
<td class="border-collapse border p-2">flex-shrink: 0;<br />Use shrink-0 to prevent a flex item from shrinking:</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Order</th>
<td class="border-collapse border p-2"> order-(1-12)</td>
<td class="border-collapse border p-2"> order: 1;<br />Utilities for controlling the order of flex and grid items.</td>
</tr>
<tr>
<td class="border-collapse border p-2"> </td>
<td class="border-collapse border p-2">order-first,<br />order-last,<br /> order-none</td>
</tr>
</thead>
</table>
</div>
<h4 class="mb-3 font-bold">Flex & Grid Formatting</h4>
<div>
<table class="table-auto border-collapse border w-3/4 mb-3">
<thead>
<tr>
<th class="border-collapse border p-2 text-left w-[100px]" style="width: 100px;"></th>
<th class="border-collapse border p-2 text-left" style="min-width: 150px;">Class</th>
<th class="border-collapse border p-2 text-left">Properties</th>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Gap</th>
<td class="border-collapse border p-2"> gap-(0-96)</td>
<td class="border-collapse border p-2"> gap-x-(Horizontal), <br />gap-y-(Vertical),<br /><br />Utilities for controlling gutters between grid and flexbox items.</td>
</tr>
<tr>
<td class="border-collapse border p-2" colspan="2">
0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem)
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="8">Justify Content</th>
<td class="border-collapse border p-2"> justify-normal</td>
<td class="border-collapse border p-2">justify-content: normal;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-start</td>
<td class="border-collapse border p-2">justify-content: flex-start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-end</td>
<td class="border-collapse border p-2">justify-content: flex-end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-center</td>
<td class="border-collapse border p-2">justify-content: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-between</td>
<td class="border-collapse border p-2">justify-content: space-between;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-around</td>
<td class="border-collapse border p-2">justify-content: space-around;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-evenly</td>
<td class="border-collapse border p-2">justify-content: space-evenly;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-stretch</td>
<td class="border-collapse border p-2">justify-content: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Justify Items</th>
<td class="border-collapse border p-2"> justify-items-start</td>
<td class="border-collapse border p-2">justify-items: start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-items-end</td>
<td class="border-collapse border p-2">justify-items: end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-items-center</td>
<td class="border-collapse border p-2">justify-items: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-items-stretch</td>
<td class="border-collapse border p-2">justify-items: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5">Justify Self</th>
<td class="border-collapse border p-2"> justify-self-auto</td>
<td class="border-collapse border p-2">justify-self: auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-self-start</td>
<td class="border-collapse border p-2">justify-self: start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-self-end</td>
<td class="border-collapse border p-2">justify-self: end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-self-center</td>
<td class="border-collapse border p-2">justify-self: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> justify-self-stretch</td>
<td class="border-collapse border p-2">justify-self: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="9">Align Content</th>
<td class="border-collapse border p-2"> content-normal</td>
<td class="border-collapse border p-2">align-content: normal;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-center</td>
<td class="border-collapse border p-2">align-content: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-start</td>
<td class="border-collapse border p-2">align-content: flex-start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-end</td>
<td class="border-collapse border p-2">align-content: flex-end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-between</td>
<td class="border-collapse border p-2">align-content: space-between;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-around</td>
<td class="border-collapse border p-2">align-content: space-around;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-evenly</td>
<td class="border-collapse border p-2">align-content: space-evenly;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-baseline</td>
<td class="border-collapse border p-2">align-content: baseline;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> content-stretch</td>
<td class="border-collapse border p-2">align-content: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5">Align Items</th>
<td class="border-collapse border p-2"> items-start</td>
<td class="border-collapse border p-2">align-items: flex-start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> items-end</td>
<td class="border-collapse border p-2">align-items: flex-end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> items-center</td>
<td class="border-collapse border p-2">align-items: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> items-baseline</td>
<td class="border-collapse border p-2">align-items: baseline;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> items-stretch</td>
<td class="border-collapse border p-2">align-items: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="6">Align Self</th>
<td class="border-collapse border p-2"> self-auto</td>
<td class="border-collapse border p-2">align-self: auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> self-start</td>
<td class="border-collapse border p-2">align-self: flex-start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> self-end</td>
<td class="border-collapse border p-2">align-self: flex-end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> self-center </td>
<td class="border-collapse border p-2">align-self: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> self-stretch</td>
<td class="border-collapse border p-2">align-self: stretch;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> self-baseline</td>
<td class="border-collapse border p-2">align-self: baseline;</td>
</tr>
</thead>
</table>
</div>
<!-- <h4 class="mb-3 font-bold">Place Content</h4>
<div>
<table class="table-auto border-collapse border w-3/4 mb-3">
<thead>
<tr>
<th class="border-collapse border p-2 text-left w-[100px]" style="width: 100px;"></th>
<th class="border-collapse border p-2 text-left" style="min-width: 150px;">Class</th>
<th class="border-collapse border p-2 text-left">Properties</th>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="8">Place Content</th>
<td class="border-collapse border p-2"> place-content-center</td>
<td class="border-collapse border p-2">place-content: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-start </td>
<td class="border-collapse border p-2">place-content: start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-end </td>
<td class="border-collapse border p-2">place-content: end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-between </td>
<td class="border-collapse border p-2">place-content: space-between;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-around</td>
<td class="border-collapse border p-2">place-content: space-around;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-evenly </td>
<td class="border-collapse border p-2">place-content: space-evenly;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-baseline</td>
<td class="border-collapse border p-2">place-content: baseline;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-content-stretch </td>
<td class="border-collapse border p-2">place-content: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5">Place Items</th>
<td class="border-collapse border p-2"> place-items-start</td>
<td class="border-collapse border p-2">place-items: start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-items-end </td>
<td class="border-collapse border p-2">place-items: end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-items-center</td>
<td class="border-collapse border p-2">place-items: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-items-baseline </td>
<td class="border-collapse border p-2">place-items: baseline;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-items-stretch</td>
<td class="border-collapse border p-2">place-items: stretch;</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5">Place Self</th>
<td class="border-collapse border p-2"> place-self-auto</td>
<td class="border-collapse border p-2">place-self: auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-self-start </td>
<td class="border-collapse border p-2"> place-self: start;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-self-end </td>
<td class="border-collapse border p-2">place-self: end;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-self-center </td>
<td class="border-collapse border p-2">place-self: center;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> place-self-stretch</td>
<td class="border-collapse border p-2">place-self: stretch;</td>
</tr>
</thead>
</table>
</div> -->
<h4 class="mb-3 font-bold">display: grid; grid</h4>
<div>
<table class="table-auto border-collapse border w-3/4">
<thead>
<tr>
<th class="border-collapse border p-2 text-left w-[100px]" style="width: 100px;"></th>
<th class="border-collapse border p-2 text-left" style="min-width: 150px;">Class</th>
<th class="border-collapse border p-2 text-left">Properties</th>
</tr>
<tr>
<th class="border-collapse border p-2 text-left"> Grid Basis</th>
<td class="border-collapse border p-2"> grid-cols-1</td>
<td class="border-collapse border p-2"> grid-cols-(1- 12) <br />
grid-cols-none, <br /> grid-cols-subgrid <br /><br /> Utilities for specifying the columns in a grid layout.
</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Grid Column Start / End</th>
<td class="border-collapse border p-2"> col-span-(1-12)</td>
<td class="border-collapse border p-2"> col-auto, <br /><br />Use the col-span-{n} utilities to make an element span n columns(increse size of element).</td>
</tr>
<tr>
<td class="border-collapse border p-2"> col-start-(1-12), <br />col-start-auto,<br />col-end-(1-12), <br />col-end-auto</td>
<td class="border-collapse border p-2">Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line.</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Grid Template Rows</th>
<td class="border-collapse border p-2"> grid-rows-(1-12)</td>
<td class="border-collapse border p-2">Utilities for specifying the rows in a grid layout.</td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid-rows-none, <br />grid-rows-subgrid</td>
<td class="border-collapse border p-2">Use the grid-rows-subgrid utility to adopt the row tracks defined by the item’s parent.</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="2">Grid Row Start / End</th>
<td class="border-collapse border p-2"> row-span-(1-12)</td>
<td class="border-collapse border p-2"> row-auto, <br /><br />Use the row-span-{n} utilities to make an element span n rows.</td>
</tr>
<tr>
<td class="border-collapse border p-2"> row-start-(1-12), <br />row-start-auto,<br />row-end-(1-12), <br />row-end-auto</td>
<td class="border-collapse border p-2">Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="5">Grid Auto Flow</th>
<td class="border-collapse border p-2"> grid-flow-row</td>
<td class="border-collapse border p-2"> grid-auto-flow: row;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid-flow-col</td>
<td class="border-collapse border p-2">grid-auto-flow: column; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid-flow-dense</td>
<td class="border-collapse border p-2">grid-auto-flow: dense;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid-flow-row-dense</td>
<td class="border-collapse border p-2">grid-auto-flow: row dense; </td>
</tr>
<tr>
<td class="border-collapse border p-2"> grid-flow-col-dense</td>
<td class="border-collapse border p-2">grid-auto-flow: column dense; </td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Grid Auto Columns</th>
<td class="border-collapse border p-2"> auto-cols-auto</td>
<td class="border-collapse border p-2"> grid-auto-columns: auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-cols-min</td>
<td class="border-collapse border p-2">grid-auto-columns: min-content;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-cols-max</td>
<td class="border-collapse border p-2">grid-auto-columns: max-content;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-cols-fr</td>
<td class="border-collapse border p-2"> grid-auto-columns: minmax(0, 1fr);</td>
</tr>
<tr>
<th class="border-collapse border p-2 text-left" rowspan="4">Grid Auto Rows</th>
<td class="border-collapse border p-2"> auto-rows-auto</td>
<td class="border-collapse border p-2">grid-auto-rows: auto;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-rows-min</td>
<td class="border-collapse border p-2">grid-auto-rows: min-content;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-rows-max</td>
<td class="border-collapse border p-2">grid-auto-rows: max-content;</td>
</tr>
<tr>
<td class="border-collapse border p-2"> auto-rows-fr</td>
<td class="border-collapse border p-2">grid-auto-rows: minmax(0, 1fr);</td>
</tr>
</thead>
</table>
</div>
</section>
<section>
<strong>Customizing your theme</strong>
<table class="table-auto border-collapse border w-3/4 mb-4">
<tbody>
<tr>
<td class="border-collapse border p-2">
<p>If you need to use a one-off aspect-ratio value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.</p>
<p><iframe class="w-full aspect-[4/3]" src="https://www.youtube.com/..."> </iframe></p>
</td>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
module.exports = {
theme: {
extend: {
aspectRatio: {
'4/3': '4 / 3',
},
}
}
}
</pre>
</td>
</tr>
</tbody>
</table>
</section>
<section id="Layer" class="mx-auto mb-5">
<div class="mb-5">
<div class="mb-3">
<strong>@layer</strong>
<p>Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities.</p>
</div>
<table class="table-auto border-collapse border w-3/4">
<tr>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">input.css</small>
<pre>
@layer base {
h1 {
@apply text-2xl;
}
}
</pre>
<p>*If you’re working with any third-party libraries (for example Select2) and styling that library with your own custom CSS, we recommend writing those styles without using Tailwind’s @layer feature:</p>
<pre>
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
</pre>
</td>
</tr>
</table>
</div>
<div class="mb-5">
<div class="mb-3">
<strong>@apply</strong>
<p>Use @apply to inline any existing utility classes into your own custom CSS.</p>
</div>
<table class="table-auto border-collapse border w-3/4">
<tr>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">input.css</small>
<pre>
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
</pre>
</td>
</tr>
</table>
</div>
<div class="mb-5">
<div class="mb-3">
<strong>theme()</strong>
<p>Use the theme() function to access your Tailwind config values using dot notation.</p>
</div>
<table class="table-auto border-collapse border w-3/4 mb-4">
<tr>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">input.css</small>
<pre>
.content-area {
height: calc(100vh - theme(spacing.12));
}
</pre>
If you need to access a value that contains a dot (like the 2.5 value in the spacing scale),
you can use square bracket notation:
<pre>
.content-area {
height: calc(100vh - theme(spacing[2.5]));
}
</pre>
</td>
</tr>
</table>
</div>
</section>
<section id="Customization" class="mx-auto mb-5">
<div class="mb-5">
<div class="mb-3">
<h2 class="text-2xl mb-3 font-semibold">Customization Configuration</h2>
<p>Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.</p>
</div>
<table class="table-auto border-collapse border w-3/4 mb-4">
<tr>
<td class="border-collapse border p-2">
<small class="bg-slate-300 py-1 px-2 rounded-lg">tailwind.config.js</small>
<pre>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
colors: {
'blue': '#1fb6ff',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
}
extend: {
spacing: {
'8xl': '96rem',
}
},
},
plugins: [],
}
</pre>
</td>
</tr>
</table>
</div>
</section>
</div>
</body>
</html>