开局示例
两种版本的比较
<!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>Utility First Fundamentals</title>
<style>
body {
margin-top: 200px !important;
}
.alert {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.alert-logo-wrap {
flex-shrink: 0;
}
.alert-logo {
height: 3rem;
width: 3rem;
}
.alert-body {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.alert-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
font-weight: 500;
}
.alert-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
</head>
<body>
<!-- HTML/CSS Version -->
<div class="alert">
<div class="alert-logo-wrap">
<img class="alert-logo" src="../assets/img/warning.svg" alt="alert" />
</div>
<div class="alert-body">
<h4 class="alert-title">Are You Sure?</h4>
<p class="alert-message">You are about to delete a post</p>
</div>
</div>
<!-- Tailwind Version -->
<div class="flex items-center p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-x-4">
<img class="h-12 w-12" src="../assets/img/warning.svg" alt="alert" />
<div>
<div class="text-xl font-medium text-black">Are You Sure?</div>
<p class="text-slate-500">You are about to delete a post</p>
</div>
</div>
</body>
</html>
<!--
- We didn't have to write any extra CSS
- No spending time on class names
- No worrying about our CSS file getting too large
- Add and change things on the fly, try different layouts, etc
- Less chance of stuff going wrong
-->
颜色
<!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>Colors</title>
</head>
<body>
<!-- Default colors -->
<!-- white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber, -->
<!-- Text Colors -->
<p class="text-black">Tailwind is awesome</p>
<p class="text-red-50">Tailwind is awesome</p>
<p class="text-red-100">Tailwind is awesome</p>
<p class="text-red-200">Tailwind is awesome</p>
<p class="text-red-300">Tailwind is awesome</p>
<p class="text-red-400">Tailwind is awesome</p>
<p class="text-red-500">Tailwind is awesome</p>
<p class="text-red-600">Tailwind is awesome</p>
<p class="text-red-700">Tailwind is awesome</p>
<p class="text-red-800">Tailwind is awesome</p>
<p class="text-red-900">Tailwind is awesome</p>
<!-- Background Colors -->
<div class="bg-slate-600">
<p class="text-white">Tailwind is awesome</p>
</div>
<div class="bg-zinc-400">
<p class="text-white">Tailwind is awesome</p>
</div>
<div class="bg-emerald-600">
<p class="text-white">Tailwind is awesome</p>
</div>
<!-- Text Underline -->
<p class="underline text-red-700 decoration-red-700">Tailwind is awesome</p>
<p class="underline text-blue-700 decoration-blue-700">
Tailwind is awesome
</p>
<!-- Border Colors -->
<input class="border-2 border-rose-500" />
<input class="border-2 border-blue-300" />
<input class="border-2 border-purple-900" />
<input class="border-2 border-yellow-500" />
<!-- Divide Colors -->
<div class="divide-y divide-blue-200">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
<!-- Outline Colors -->
<button class="outline outline-blue-500">Subscribe</button>
<button class="outline outline-purple-300">Subscribe</button>
<button class="outline outline-gray-500">Subscribe</button>
<!-- Box Shadow Colors (Opacity defaults to 100, but you cans set it)-->
<button class="bg-cyan-500 shadow-lg shadow-cyan-500">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50">
Subscribe
</button>
<!-- Accent Colors -->
<input type="checkbox" class="accent-purple-500" checked /> Option 1
<input type="checkbox" class="accent-pink-500" checked /> Option 2
<input type="checkbox" class="accent-red-300" checked /> Option 3
<!-- Arbitrary Colors -->
<div class="bg-[#427fab] h-10">Hello</div>
<div class="text-[#427fab] h-10">Hello</div>
<div class="border border-[#427fab] h-10">Hello</div>
</body>
</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>Container & Spacing</title>
</head>
<body>
<div class="container mx-auto">
<article class="bg-slate-300">
<h3>Article One</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem laboriosam libero molestiae recusandae accusantium
voluptates? Expedita dignissimos amet eveniet dolore nobis odio a
sunt, maiores quasi. Modi amet quos dolores!
</p>
</article>
<!-- Margin -->
<h3 class="my-4">Margin</h3>
<div class="m-4 bg-slate-100">m-4</div>
<div class="mx-4 bg-slate-200">mx-4</div>
<div class="my-4 bg-slate-300">my-4</div>
<div class="mt-6 bg-slate-400">mt-6</div>
<div class="mr-4 bg-slate-500">mr-4</div>
<div class="mb-8 bg-slate-600">mb-8</div>
<div class="ml-2 bg-slate-700">ml-2</div>
<!-- Arbitrary Spacing -->
<div class="ml-[200px] bg-slate-700">ml-[200px]</div>
<!-- Padding -->
<h3 class="my-4">Padding</h3>
<div class="p-4 bg-slate-100">p-4</div>
<div class="px-4 bg-slate-200">px-4</div>
<div class="py-4 bg-slate-300">py-4</div>
<div class="pt-6 bg-slate-400">pt-6</div>
<div class="pr-4 bg-slate-500">pr-4</div>
<div class="pb-8 bg-slate-600">pb-8</div>
<div class="pl-2 bg-slate-700">pl-2</div>
<!-- Space Between X -->
<h3 class="my-4">Space Between X</h3>
<div class="flex space-x-4">
<div class="p-3 bg-red-100">01</div>
<div class="p-3 bg-red-100">02</div>
<div class="p-3 bg-red-100">03</div>
</div>
<!-- Space Between Y -->
<h3 class="my-4">Space Between Y</h3>
<div class="flex flex-col space-y-4">
<div class="p-3 bg-red-100">01</div>
<div class="p-3 bg-red-100">02</div>
<div class="p-3 bg-red-100">03</div>
</div>
</div>
</body>
</html>
<!-- Breakpoinsts for Container
container None width: 100%;
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;
-->
<!-- Margin Values
m-0 margin: 0px;
mx-0 margin-left: 0px;
margin-right: 0px;
my-0 margin-top: 0px;
margin-bottom: 0px;
mt-0 margin-top: 0px;
mr-0 margin-right: 0px;
mb-0 margin-bottom: 0px;
ml-0 margin-left: 0px;
m-px margin: 1px;
mx-px margin-left: 1px;
margin-right: 1px;
my-px margin-top: 1px;
margin-bottom: 1px;
mt-px margin-top: 1px;
mr-px margin-right: 1px;
mb-px margin-bottom: 1px;
ml-px margin-left: 1px;
m-0.5 margin: 0.125rem; /* 2px */
mx-0.5 margin-left: 0.125rem; /* 2px */
margin-right: 0.125rem; /* 2px */
my-0.5 margin-top: 0.125rem; /* 2px */
margin-bottom: 0.125rem; /* 2px */
mt-0.5 margin-top: 0.125rem; /* 2px */
mr-0.5 margin-right: 0.125rem; /* 2px */
mb-0.5 margin-bottom: 0.125rem; /* 2px */
ml-0.5 margin-left: 0.125rem; /* 2px */
m-1 margin: 0.25rem; /* 4px */
mx-1 margin-left: 0.25rem; /* 4px */
margin-right: 0.25rem; /* 4px */
my-1 margin-top: 0.25rem; /* 4px */
margin-bottom: 0.25rem; /* 4px */
mt-1 margin-top: 0.25rem; /* 4px */
mr-1 margin-right: 0.25rem; /* 4px */
mb-1 margin-bottom: 0.25rem; /* 4px */
ml-1 margin-left: 0.25rem; /* 4px */
m-1.5 margin: 0.375rem; /* 6px */
mx-1.5 margin-left: 0.375rem; /* 6px */
margin-right: 0.375rem; /* 6px */
my-1.5 margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
mt-1.5 margin-top: 0.375rem; /* 6px */
mr-1.5 margin-right: 0.375rem; /* 6px */
mb-1.5 margin-bottom: 0.375rem; /* 6px */
ml-1.5 margin-left: 0.375rem; /* 6px */
m-2 margin: 0.5rem; /* 8px */
mx-2 margin-left: 0.5rem; /* 8px */
margin-right: 0.5rem; /* 8px */
my-2 margin-top: 0.5rem; /* 8px */
margin-bottom: 0.5rem; /* 8px */
mt-2 margin-top: 0.5rem; /* 8px */
mr-2 margin-right: 0.5rem; /* 8px */
mb-2 margin-bottom: 0.5rem; /* 8px */
ml-2 margin-left: 0.5rem; /* 8px */
m-2.5 margin: 0.625rem; /* 10px */
mx-2.5 margin-left: 0.625rem; /* 10px */
margin-right: 0.625rem; /* 10px */
my-2.5 margin-top: 0.625rem; /* 10px */
margin-bottom: 0.625rem; /* 10px */
mt-2.5 margin-top: 0.625rem; /* 10px */
mr-2.5 margin-right: 0.625rem; /* 10px */
mb-2.5 margin-bottom: 0.625rem; /* 10px */
ml-2.5 margin-left: 0.625rem; /* 10px */
m-3 margin: 0.75rem; /* 12px */
mx-3 margin-left: 0.75rem; /* 12px */
margin-right: 0.75rem; /* 12px */
my-3 margin-top: 0.75rem; /* 12px */
margin-bottom: 0.75rem; /* 12px */
mt-3 margin-top: 0.75rem; /* 12px */
mr-3 margin-right: 0.75rem; /* 12px */
mb-3 margin-bottom: 0.75rem; /* 12px */
ml-3 margin-left: 0.75rem; /* 12px */
m-3.5 margin: 0.875rem; /* 14px */
mx-3.5 margin-left: 0.875rem; /* 14px */
margin-right: 0.875rem; /* 14px */
my-3.5 margin-top: 0.875rem; /* 14px */
margin-bottom: 0.875rem; /* 14px */
mt-3.5 margin-top: 0.875rem; /* 14px */
mr-3.5 margin-right: 0.875rem; /* 14px */
mb-3.5 margin-bottom: 0.875rem; /* 14px */
ml-3.5 margin-left: 0.875rem; /* 14px */
m-4 margin: 1rem; /* 16px */
mx-4 margin-left: 1rem; /* 16px */
margin-right: 1rem; /* 16px */
my-4 margin-top: 1rem; /* 16px */
margin-bottom: 1rem; /* 16px */
mt-4 margin-top: 1rem; /* 16px */
mr-4 margin-right: 1rem; /* 16px */
mb-4 margin-bottom: 1rem; /* 16px */
ml-4 margin-left: 1rem; /* 16px */
m-5 margin: 1.25rem; /* 20px */
mx-5 margin-left: 1.25rem; /* 20px */
margin-right: 1.25rem; /* 20px */
my-5 margin-top: 1.25rem; /* 20px */
margin-bottom: 1.25rem; /* 20px */
mt-5 margin-top: 1.25rem; /* 20px */
mr-5 margin-right: 1.25rem; /* 20px */
mb-5 margin-bottom: 1.25rem; /* 20px */
ml-5 margin-left: 1.25rem; /* 20px */
m-6 margin: 1.5rem; /* 24px */
mx-6 margin-left: 1.5rem; /* 24px */
margin-right: 1.5rem; /* 24px */
my-6 margin-top: 1.5rem; /* 24px */
margin-bottom: 1.5rem; /* 24px */
mt-6 margin-top: 1.5rem; /* 24px */
mr-6 margin-right: 1.5rem; /* 24px */
mb-6 margin-bottom: 1.5rem; /* 24px */
ml-6 margin-left: 1.5rem; /* 24px */
m-7 margin: 1.75rem; /* 28px */
mx-7 margin-left: 1.75rem; /* 28px */
margin-right: 1.75rem; /* 28px */
my-7 margin-top: 1.75rem; /* 28px */
margin-bottom: 1.75rem; /* 28px */
mt-7 margin-top: 1.75rem; /* 28px */
mr-7 margin-right: 1.75rem; /* 28px */
mb-7 margin-bottom: 1.75rem; /* 28px */
ml-7 margin-left: 1.75rem; /* 28px */
m-8 margin: 2rem; /* 32px */
mx-8 margin-left: 2rem; /* 32px */
margin-right: 2rem; /* 32px */
my-8 margin-top: 2rem; /* 32px */
margin-bottom: 2rem; /* 32px */
mt-8 margin-top: 2rem; /* 32px */
mr-8 margin-right: 2rem; /* 32px */
mb-8 margin-bottom: 2rem; /* 32px */
ml-8 margin-left: 2rem; /* 32px */
m-9 margin: 2.25rem; /* 36px */
mx-9 margin-left: 2.25rem; /* 36px */
margin-right: 2.25rem; /* 36px */
my-9 margin-top: 2.25rem; /* 36px */
margin-bottom: 2.25rem; /* 36px */
mt-9 margin-top: 2.25rem; /* 36px */
mr-9 margin-right: 2.25rem; /* 36px */
mb-9 margin-bottom: 2.25rem; /* 36px */
ml-9 margin-left: 2.25rem; /* 36px */
m-10 margin: 2.5rem; /* 40px */
mx-10 margin-left: 2.5rem; /* 40px */
margin-right: 2.5rem; /* 40px */
my-10 margin-top: 2.5rem; /* 40px */
margin-bottom: 2.5rem; /* 40px */
mt-10 margin-top: 2.5rem; /* 40px */
mr-10 margin-right: 2.5rem; /* 40px */
mb-10 margin-bottom: 2.5rem; /* 40px */
ml-10 margin-left: 2.5rem; /* 40px */
m-11 margin: 2.75rem; /* 44px */
mx-11 margin-left: 2.75rem; /* 44px */
margin-right: 2.75rem; /* 44px */
my-11 margin-top: 2.75rem; /* 44px */
margin-bottom: 2.75rem; /* 44px */
mt-11 margin-top: 2.75rem; /* 44px */
mr-11 margin-right: 2.75rem; /* 44px */
mb-11 margin-bottom: 2.75rem; /* 44px */
ml-11 margin-left: 2.75rem; /* 44px */
m-12 margin: 3rem; /* 48px */
mx-12 margin-left: 3rem; /* 48px */
margin-right: 3rem; /* 48px */
my-12 margin-top: 3rem; /* 48px */
margin-bottom: 3rem; /* 48px */
mt-12 margin-top: 3rem; /* 48px */
mr-12 margin-right: 3rem; /* 48px */
mb-12 margin-bottom: 3rem; /* 48px */
ml-12 margin-left: 3rem; /* 48px */
m-14 margin: 3.5rem; /* 56px */
mx-14 margin-left: 3.5rem; /* 56px */
margin-right: 3.5rem; /* 56px */
my-14 margin-top: 3.5rem; /* 56px */
margin-bottom: 3.5rem; /* 56px */
mt-14 margin-top: 3.5rem; /* 56px */
mr-14 margin-right: 3.5rem; /* 56px */
mb-14 margin-bottom: 3.5rem; /* 56px */
ml-14 margin-left: 3.5rem; /* 56px */
m-16 margin: 4rem; /* 64px */
mx-16 margin-left: 4rem; /* 64px */
margin-right: 4rem; /* 64px */
my-16 margin-top: 4rem; /* 64px */
margin-bottom: 4rem; /* 64px */
mt-16 margin-top: 4rem; /* 64px */
mr-16 margin-right: 4rem; /* 64px */
mb-16 margin-bottom: 4rem; /* 64px */
ml-16 margin-left: 4rem; /* 64px */
m-20 margin: 5rem; /* 80px */
mx-20 margin-left: 5rem; /* 80px */
margin-right: 5rem; /* 80px */
my-20 margin-top: 5rem; /* 80px */
margin-bottom: 5rem; /* 80px */
mt-20 margin-top: 5rem; /* 80px */
mr-20 margin-right: 5rem; /* 80px */
mb-20 margin-bottom: 5rem; /* 80px */
ml-20 margin-left: 5rem; /* 80px */
m-24 margin: 6rem; /* 96px */
mx-24 margin-left: 6rem; /* 96px */
margin-right: 6rem; /* 96px */
my-24 margin-top: 6rem; /* 96px */
margin-bottom: 6rem; /* 96px */
mt-24 margin-top: 6rem; /* 96px */
mr-24 margin-right: 6rem; /* 96px */
mb-24 margin-bottom: 6rem; /* 96px */
ml-24 margin-left: 6rem; /* 96px */
m-28 margin: 7rem; /* 112px */
mx-28 margin-left: 7rem; /* 112px */
margin-right: 7rem; /* 112px */
my-28 margin-top: 7rem; /* 112px */
margin-bottom: 7rem; /* 112px */
mt-28 margin-top: 7rem; /* 112px */
mr-28 margin-right: 7rem; /* 112px */
mb-28 margin-bottom: 7rem; /* 112px */
ml-28 margin-left: 7rem; /* 112px */
m-32 margin: 8rem; /* 128px */
mx-32 margin-left: 8rem; /* 128px */
margin-right: 8rem; /* 128px */
my-32 margin-top: 8rem; /* 128px */
margin-bottom: 8rem; /* 128px */
mt-32 margin-top: 8rem; /* 128px */
mr-32 margin-right: 8rem; /* 128px */
mb-32 margin-bottom: 8rem; /* 128px */
ml-32 margin-left: 8rem; /* 128px */
m-36 margin: 9rem; /* 144px */
mx-36 margin-left: 9rem; /* 144px */
margin-right: 9rem; /* 144px */
my-36 margin-top: 9rem; /* 144px */
margin-bottom: 9rem; /* 144px */
mt-36 margin-top: 9rem; /* 144px */
mr-36 margin-right: 9rem; /* 144px */
mb-36 margin-bottom: 9rem; /* 144px */
ml-36 margin-left: 9rem; /* 144px */
m-40 margin: 10rem; /* 160px */
mx-40 margin-left: 10rem; /* 160px */
margin-right: 10rem; /* 160px */
my-40 margin-top: 10rem; /* 160px */
margin-bottom: 10rem; /* 160px */
mt-40 margin-top: 10rem; /* 160px */
mr-40 margin-right: 10rem; /* 160px */
mb-40 margin-bottom: 10rem; /* 160px */
ml-40 margin-left: 10rem; /* 160px */
m-44 margin: 11rem; /* 176px */
mx-44 margin-left: 11rem; /* 176px */
margin-right: 11rem; /* 176px */
my-44 margin-top: 11rem; /* 176px */
margin-bottom: 11rem; /* 176px */
mt-44 margin-top: 11rem; /* 176px */
mr-44 margin-right: 11rem; /* 176px */
mb-44 margin-bottom: 11rem; /* 176px */
ml-44 margin-left: 11rem; /* 176px */
m-48 margin: 12rem; /* 192px */
mx-48 margin-left: 12rem; /* 192px */
margin-right: 12rem; /* 192px */
my-48 margin-top: 12rem; /* 192px */
margin-bottom: 12rem; /* 192px */
mt-48 margin-top: 12rem; /* 192px */
mr-48 margin-right: 12rem; /* 192px */
mb-48 margin-bottom: 12rem; /* 192px */
ml-48 margin-left: 12rem; /* 192px */
m-52 margin: 13rem; /* 208px */
mx-52 margin-left: 13rem; /* 208px */
margin-right: 13rem; /* 208px */
my-52 margin-top: 13rem; /* 208px */
margin-bottom: 13rem; /* 208px */
mt-52 margin-top: 13rem; /* 208px */
mr-52 margin-right: 13rem; /* 208px */
mb-52 margin-bottom: 13rem; /* 208px */
ml-52 margin-left: 13rem; /* 208px */
m-56 margin: 14rem; /* 224px */
mx-56 margin-left: 14rem; /* 224px */
margin-right: 14rem; /* 224px */
my-56 margin-top: 14rem; /* 224px */
margin-bottom: 14rem; /* 224px */
mt-56 margin-top: 14rem; /* 224px */
mr-56 margin-right: 14rem; /* 224px */
mb-56 margin-bottom: 14rem; /* 224px */
ml-56 margin-left: 14rem; /* 224px */
m-60 margin: 15rem; /* 240px */
mx-60 margin-left: 15rem; /* 240px */
margin-right: 15rem; /* 240px */
my-60 margin-top: 15rem; /* 240px */
margin-bottom: 15rem; /* 240px */
mt-60 margin-top: 15rem; /* 240px */
mr-60 margin-right: 15rem; /* 240px */
mb-60 margin-bottom: 15rem; /* 240px */
ml-60 margin-left: 15rem; /* 240px */
m-64 margin: 16rem; /* 256px */
mx-64 margin-left: 16rem; /* 256px */
margin-right: 16rem; /* 256px */
my-64 margin-top: 16rem; /* 256px */
margin-bottom: 16rem; /* 256px */
mt-64 margin-top: 16rem; /* 256px */
mr-64 margin-right: 16rem; /* 256px */
mb-64 margin-bottom: 16rem; /* 256px */
ml-64 margin-left: 16rem; /* 256px */
m-72 margin: 18rem; /* 288px */
mx-72 margin-left: 18rem; /* 288px */
margin-right: 18rem; /* 288px */
my-72 margin-top: 18rem; /* 288px */
margin-bottom: 18rem; /* 288px */
mt-72 margin-top: 18rem; /* 288px */
mr-72 margin-right: 18rem; /* 288px */
mb-72 margin-bottom: 18rem; /* 288px */
ml-72 margin-left: 18rem; /* 288px */
m-80 margin: 20rem; /* 320px */
mx-80 margin-left: 20rem; /* 320px */
margin-right: 20rem; /* 320px */
my-80 margin-top: 20rem; /* 320px */
margin-bottom: 20rem; /* 320px */
mt-80 margin-top: 20rem; /* 320px */
mr-80 margin-right: 20rem; /* 320px */
mb-80 margin-bottom: 20rem; /* 320px */
ml-80 margin-left: 20rem; /* 320px */
m-96 margin: 24rem; /* 384px */
mx-96 margin-left: 24rem; /* 384px */
margin-right: 24rem; /* 384px */
my-96 margin-top: 24rem; /* 384px */
margin-bottom: 24rem; /* 384px */
mt-96 margin-top: 24rem; /* 384px */
mr-96 margin-right: 24rem; /* 384px */
mb-96 margin-bottom: 24rem; /* 384px */
ml-96 margin-left: 24rem; /* 384px */
m-auto margin: auto;
mx-auto margin-left: auto;
margin-right: auto;
my-auto margin-top: auto;
margin-bottom: auto;
mt-auto margin-top: auto;
mr-auto margin-right: auto;
mb-auto margin-bottom: auto;
ml-auto margin-left: auto;
-->
<!-- Padding Values
p-0 padding: 0px;
px-0 padding-left: 0px;
padding-right: 0px;
py-0 padding-top: 0px;
padding-bottom: 0px;
pt-0 padding-top: 0px;
pr-0 padding-right: 0px;
pb-0 padding-bottom: 0px;
pl-0 padding-left: 0px;
p-px padding: 1px;
px-px padding-left: 1px;
padding-right: 1px;
py-px padding-top: 1px;
padding-bottom: 1px;
pt-px padding-top: 1px;
pr-px padding-right: 1px;
pb-px padding-bottom: 1px;
pl-px padding-left: 1px;
p-0.5 padding: 0.125rem; /* 2px */
px-0.5 padding-left: 0.125rem; /* 2px */
padding-right: 0.125rem; /* 2px */
py-0.5 padding-top: 0.125rem; /* 2px */
padding-bottom: 0.125rem; /* 2px */
pt-0.5 padding-top: 0.125rem; /* 2px */
pr-0.5 padding-right: 0.125rem; /* 2px */
pb-0.5 padding-bottom: 0.125rem; /* 2px */
pl-0.5 padding-left: 0.125rem; /* 2px */
p-1 padding: 0.25rem; /* 4px */
px-1 padding-left: 0.25rem; /* 4px */
padding-right: 0.25rem; /* 4px */
py-1 padding-top: 0.25rem; /* 4px */
padding-bottom: 0.25rem; /* 4px */
pt-1 padding-top: 0.25rem; /* 4px */
pr-1 padding-right: 0.25rem; /* 4px */
pb-1 padding-bottom: 0.25rem; /* 4px */
pl-1 padding-left: 0.25rem; /* 4px */
p-1.5 padding: 0.375rem; /* 6px */
px-1.5 padding-left: 0.375rem; /* 6px */
padding-right: 0.375rem; /* 6px */
py-1.5 padding-top: 0.375rem; /* 6px */
padding-bottom: 0.375rem; /* 6px */
pt-1.5 padding-top: 0.375rem; /* 6px */
pr-1.5 padding-right: 0.375rem; /* 6px */
pb-1.5 padding-bottom: 0.375rem; /* 6px */
pl-1.5 padding-left: 0.375rem; /* 6px */
p-2 padding: 0.5rem; /* 8px */
px-2 padding-left: 0.5rem; /* 8px */
padding-right: 0.5rem; /* 8px */
py-2 padding-top: 0.5rem; /* 8px */
padding-bottom: 0.5rem; /* 8px */
pt-2 padding-top: 0.5rem; /* 8px */
pr-2 padding-right: 0.5rem; /* 8px */
pb-2 padding-bottom: 0.5rem; /* 8px */
pl-2 padding-left: 0.5rem; /* 8px */
p-2.5 padding: 0.625rem; /* 10px */
px-2.5 padding-left: 0.625rem; /* 10px */
padding-right: 0.625rem; /* 10px */
py-2.5 padding-top: 0.625rem; /* 10px */
padding-bottom: 0.625rem; /* 10px */
pt-2.5 padding-top: 0.625rem; /* 10px */
pr-2.5 padding-right: 0.625rem; /* 10px */
pb-2.5 padding-bottom: 0.625rem; /* 10px */
pl-2.5 padding-left: 0.625rem; /* 10px */
p-3 padding: 0.75rem; /* 12px */
px-3 padding-left: 0.75rem; /* 12px */
padding-right: 0.75rem; /* 12px */
py-3 padding-top: 0.75rem; /* 12px */
padding-bottom: 0.75rem; /* 12px */
pt-3 padding-top: 0.75rem; /* 12px */
pr-3 padding-right: 0.75rem; /* 12px */
pb-3 padding-bottom: 0.75rem; /* 12px */
pl-3 padding-left: 0.75rem; /* 12px */
p-3.5 padding: 0.875rem; /* 14px */
px-3.5 padding-left: 0.875rem; /* 14px */
padding-right: 0.875rem; /* 14px */
py-3.5 padding-top: 0.875rem; /* 14px */
padding-bottom: 0.875rem; /* 14px */
pt-3.5 padding-top: 0.875rem; /* 14px */
pr-3.5 padding-right: 0.875rem; /* 14px */
pb-3.5 padding-bottom: 0.875rem; /* 14px */
pl-3.5 padding-left: 0.875rem; /* 14px */
p-4 padding: 1rem; /* 16px */
px-4 padding-left: 1rem; /* 16px */
padding-right: 1rem; /* 16px */
py-4 padding-top: 1rem; /* 16px */
padding-bottom: 1rem; /* 16px */
pt-4 padding-top: 1rem; /* 16px */
pr-4 padding-right: 1rem; /* 16px */
pb-4 padding-bottom: 1rem; /* 16px */
pl-4 padding-left: 1rem; /* 16px */
p-5 padding: 1.25rem; /* 20px */
px-5 padding-left: 1.25rem; /* 20px */
padding-right: 1.25rem; /* 20px */
py-5 padding-top: 1.25rem; /* 20px */
padding-bottom: 1.25rem; /* 20px */
pt-5 padding-top: 1.25rem; /* 20px */
pr-5 padding-right: 1.25rem; /* 20px */
pb-5 padding-bottom: 1.25rem; /* 20px */
pl-5 padding-left: 1.25rem; /* 20px */
p-6 padding: 1.5rem; /* 24px */
px-6 padding-left: 1.5rem; /* 24px */
padding-right: 1.5rem; /* 24px */
py-6 padding-top: 1.5rem; /* 24px */
padding-bottom: 1.5rem; /* 24px */
pt-6 padding-top: 1.5rem; /* 24px */
pr-6 padding-right: 1.5rem; /* 24px */
pb-6 padding-bottom: 1.5rem; /* 24px */
pl-6 padding-left: 1.5rem; /* 24px */
p-7 padding: 1.75rem; /* 28px */
px-7 padding-left: 1.75rem; /* 28px */
padding-right: 1.75rem; /* 28px */
py-7 padding-top: 1.75rem; /* 28px */
padding-bottom: 1.75rem; /* 28px */
pt-7 padding-top: 1.75rem; /* 28px */
pr-7 padding-right: 1.75rem; /* 28px */
pb-7 padding-bottom: 1.75rem; /* 28px */
pl-7 padding-left: 1.75rem; /* 28px */
p-8 padding: 2rem; /* 32px */
px-8 padding-left: 2rem; /* 32px */
padding-right: 2rem; /* 32px */
py-8 padding-top: 2rem; /* 32px */
padding-bottom: 2rem; /* 32px */
pt-8 padding-top: 2rem; /* 32px */
pr-8 padding-right: 2rem; /* 32px */
pb-8 padding-bottom: 2rem; /* 32px */
pl-8 padding-left: 2rem; /* 32px */
p-9 padding: 2.25rem; /* 36px */
px-9 padding-left: 2.25rem; /* 36px */
padding-right: 2.25rem; /* 36px */
py-9 padding-top: 2.25rem; /* 36px */
padding-bottom: 2.25rem; /* 36px */
pt-9 padding-top: 2.25rem; /* 36px */
pr-9 padding-right: 2.25rem; /* 36px */
pb-9 padding-bottom: 2.25rem; /* 36px */
pl-9 padding-left: 2.25rem; /* 36px */
p-10 padding: 2.5rem; /* 40px */
px-10 padding-left: 2.5rem; /* 40px */
padding-right: 2.5rem; /* 40px */
py-10 padding-top: 2.5rem; /* 40px */
padding-bottom: 2.5rem; /* 40px */
pt-10 padding-top: 2.5rem; /* 40px */
pr-10 padding-right: 2.5rem; /* 40px */
pb-10 padding-bottom: 2.5rem; /* 40px */
pl-10 padding-left: 2.5rem; /* 40px */
p-11 padding: 2.75rem; /* 44px */
px-11 padding-left: 2.75rem; /* 44px */
padding-right: 2.75rem; /* 44px */
py-11 padding-top: 2.75rem; /* 44px */
padding-bottom: 2.75rem; /* 44px */
pt-11 padding-top: 2.75rem; /* 44px */
pr-11 padding-right: 2.75rem; /* 44px */
pb-11 padding-bottom: 2.75rem; /* 44px */
pl-11 padding-left: 2.75rem; /* 44px */
p-12 padding: 3rem; /* 48px */
px-12 padding-left: 3rem; /* 48px */
padding-right: 3rem; /* 48px */
py-12 padding-top: 3rem; /* 48px */
padding-bottom: 3rem; /* 48px */
pt-12 padding-top: 3rem; /* 48px */
pr-12 padding-right: 3rem; /* 48px */
pb-12 padding-bottom: 3rem; /* 48px */
pl-12 padding-left: 3rem; /* 48px */
p-14 padding: 3.5rem; /* 56px */
px-14 padding-left: 3.5rem; /* 56px */
padding-right: 3.5rem; /* 56px */
py-14 padding-top: 3.5rem; /* 56px */
padding-bottom: 3.5rem; /* 56px */
pt-14 padding-top: 3.5rem; /* 56px */
pr-14 padding-right: 3.5rem; /* 56px */
pb-14 padding-bottom: 3.5rem; /* 56px */
pl-14 padding-left: 3.5rem; /* 56px */
p-16 padding: 4rem; /* 64px */
px-16 padding-left: 4rem; /* 64px */
padding-right: 4rem; /* 64px */
py-16 padding-top: 4rem; /* 64px */
padding-bottom: 4rem; /* 64px */
pt-16 padding-top: 4rem; /* 64px */
pr-16 padding-right: 4rem; /* 64px */
pb-16 padding-bottom: 4rem; /* 64px */
pl-16 padding-left: 4rem; /* 64px */
p-20 padding: 5rem; /* 80px */
px-20 padding-left: 5rem; /* 80px */
padding-right: 5rem; /* 80px */
py-20 padding-top: 5rem; /* 80px */
padding-bottom: 5rem; /* 80px */
pt-20 padding-top: 5rem; /* 80px */
pr-20 padding-right: 5rem; /* 80px */
pb-20 padding-bottom: 5rem; /* 80px */
pl-20 padding-left: 5rem; /* 80px */
p-24 padding: 6rem; /* 96px */
px-24 padding-left: 6rem; /* 96px */
padding-right: 6rem; /* 96px */
py-24 padding-top: 6rem; /* 96px */
padding-bottom: 6rem; /* 96px */
pt-24 padding-top: 6rem; /* 96px */
pr-24 padding-right: 6rem; /* 96px */
pb-24 padding-bottom: 6rem; /* 96px */
pl-24 padding-left: 6rem; /* 96px */
p-28 padding: 7rem; /* 112px */
px-28 padding-left: 7rem; /* 112px */
padding-right: 7rem; /* 112px */
py-28 padding-top: 7rem; /* 112px */
padding-bottom: 7rem; /* 112px */
pt-28 padding-top: 7rem; /* 112px */
pr-28 padding-right: 7rem; /* 112px */
pb-28 padding-bottom: 7rem; /* 112px */
pl-28 padding-left: 7rem; /* 112px */
p-32 padding: 8rem; /* 128px */
px-32 padding-left: 8rem; /* 128px */
padding-right: 8rem; /* 128px */
py-32 padding-top: 8rem; /* 128px */
padding-bottom: 8rem; /* 128px */
pt-32 padding-top: 8rem; /* 128px */
pr-32 padding-right: 8rem; /* 128px */
pb-32 padding-bottom: 8rem; /* 128px */
pl-32 padding-left: 8rem; /* 128px */
p-36 padding: 9rem; /* 144px */
px-36 padding-left: 9rem; /* 144px */
padding-right: 9rem; /* 144px */
py-36 padding-top: 9rem; /* 144px */
padding-bottom: 9rem; /* 144px */
pt-36 padding-top: 9rem; /* 144px */
pr-36 padding-right: 9rem; /* 144px */
pb-36 padding-bottom: 9rem; /* 144px */
pl-36 padding-left: 9rem; /* 144px */
p-40 padding: 10rem; /* 160px */
px-40 padding-left: 10rem; /* 160px */
padding-right: 10rem; /* 160px */
py-40 padding-top: 10rem; /* 160px */
padding-bottom: 10rem; /* 160px */
pt-40 padding-top: 10rem; /* 160px */
pr-40 padding-right: 10rem; /* 160px */
pb-40 padding-bottom: 10rem; /* 160px */
pl-40 padding-left: 10rem; /* 160px */
p-44 padding: 11rem; /* 176px */
px-44 padding-left: 11rem; /* 176px */
padding-right: 11rem; /* 176px */
py-44 padding-top: 11rem; /* 176px */
padding-bottom: 11rem; /* 176px */
pt-44 padding-top: 11rem; /* 176px */
pr-44 padding-right: 11rem; /* 176px */
pb-44 padding-bottom: 11rem; /* 176px */
pl-44 padding-left: 11rem; /* 176px */
p-48 padding: 12rem; /* 192px */
px-48 padding-left: 12rem; /* 192px */
padding-right: 12rem; /* 192px */
py-48 padding-top: 12rem; /* 192px */
padding-bottom: 12rem; /* 192px */
pt-48 padding-top: 12rem; /* 192px */
pr-48 padding-right: 12rem; /* 192px */
pb-48 padding-bottom: 12rem; /* 192px */
pl-48 padding-left: 12rem; /* 192px */
p-52 padding: 13rem; /* 208px */
px-52 padding-left: 13rem; /* 208px */
padding-right: 13rem; /* 208px */
py-52 padding-top: 13rem; /* 208px */
padding-bottom: 13rem; /* 208px */
pt-52 padding-top: 13rem; /* 208px */
pr-52 padding-right: 13rem; /* 208px */
pb-52 padding-bottom: 13rem; /* 208px */
pl-52 padding-left: 13rem; /* 208px */
p-56 padding: 14rem; /* 224px */
px-56 padding-left: 14rem; /* 224px */
padding-right: 14rem; /* 224px */
py-56 padding-top: 14rem; /* 224px */
padding-bottom: 14rem; /* 224px */
pt-56 padding-top: 14rem; /* 224px */
pr-56 padding-right: 14rem; /* 224px */
pb-56 padding-bottom: 14rem; /* 224px */
pl-56 padding-left: 14rem; /* 224px */
p-60 padding: 15rem; /* 240px */
px-60 padding-left: 15rem; /* 240px */
padding-right: 15rem; /* 240px */
py-60 padding-top: 15rem; /* 240px */
padding-bottom: 15rem; /* 240px */
pt-60 padding-top: 15rem; /* 240px */
pr-60 padding-right: 15rem; /* 240px */
pb-60 padding-bottom: 15rem; /* 240px */
pl-60 padding-left: 15rem; /* 240px */
p-64 padding: 16rem; /* 256px */
px-64 padding-left: 16rem; /* 256px */
padding-right: 16rem; /* 256px */
py-64 padding-top: 16rem; /* 256px */
padding-bottom: 16rem; /* 256px */
pt-64 padding-top: 16rem; /* 256px */
pr-64 padding-right: 16rem; /* 256px */
pb-64 padding-bottom: 16rem; /* 256px */
pl-64 padding-left: 16rem; /* 256px */
p-72 padding: 18rem; /* 288px */
px-72 padding-left: 18rem; /* 288px */
padding-right: 18rem; /* 288px */
py-72 padding-top: 18rem; /* 288px */
padding-bottom: 18rem; /* 288px */
pt-72 padding-top: 18rem; /* 288px */
pr-72 padding-right: 18rem; /* 288px */
pb-72 padding-bottom: 18rem; /* 288px */
pl-72 padding-left: 18rem; /* 288px */
p-80 padding: 20rem; /* 320px */
px-80 padding-left: 20rem; /* 320px */
padding-right: 20rem; /* 320px */
py-80 padding-top: 20rem; /* 320px */
padding-bottom: 20rem; /* 320px */
pt-80 padding-top: 20rem; /* 320px */
pr-80 padding-right: 20rem; /* 320px */
pb-80 padding-bottom: 20rem; /* 320px */
pl-80 padding-left: 20rem; /* 320px */
p-96 padding: 24rem; /* 384px */
px-96 padding-left: 24rem; /* 384px */
padding-right: 24rem; /* 384px */
py-96 padding-top: 24rem; /* 384px */
padding-bottom: 24rem; /* 384px */
pt-96 padding-top: 24rem; /* 384px */
pr-96 padding-right: 24rem; /* 384px */
pb-96 padding-bottom: 24rem; /* 384px */
pl-96 padding-left: 24rem; /* 384px */
-->
<!-- Space Between X/Y
space-x-0 > * + * margin-left: 0px;
space-y-0 > * + * margin-top: 0px;
space-x-0.5 > * + * margin-left: 0.125rem; /* 2px */
space-y-0.5 > * + * margin-top: 0.125rem; /* 2px */
space-x-1 > * + * margin-left: 0.25rem; /* 4px */
space-y-1 > * + * margin-top: 0.25rem; /* 4px */
space-x-1.5 > * + * margin-left: 0.375rem; /* 6px */
space-y-1.5 > * + * margin-top: 0.375rem; /* 6px */
space-x-2 > * + * margin-left: 0.5rem; /* 8px */
space-y-2 > * + * margin-top: 0.5rem; /* 8px */
space-x-2.5 > * + * margin-left: 0.625rem; /* 10px */
space-y-2.5 > * + * margin-top: 0.625rem; /* 10px */
space-x-3 > * + * margin-left: 0.75rem; /* 12px */
space-y-3 > * + * margin-top: 0.75rem; /* 12px */
space-x-3.5 > * + * margin-left: 0.875rem; /* 14px */
space-y-3.5 > * + * margin-top: 0.875rem; /* 14px */
space-x-4 > * + * margin-left: 1rem; /* 16px */
space-y-4 > * + * margin-top: 1rem; /* 16px */
space-x-5 > * + * margin-left: 1.25rem; /* 20px */
space-y-5 > * + * margin-top: 1.25rem; /* 20px */
space-x-6 > * + * margin-left: 1.5rem; /* 24px */
space-y-6 > * + * margin-top: 1.5rem; /* 24px */
space-x-7 > * + * margin-left: 1.75rem; /* 28px */
space-y-7 > * + * margin-top: 1.75rem; /* 28px */
space-x-8 > * + * margin-left: 2rem; /* 32px */
space-y-8 > * + * margin-top: 2rem; /* 32px */
space-x-9 > * + * margin-left: 2.25rem; /* 36px */
space-y-9 > * + * margin-top: 2.25rem; /* 36px */
space-x-10 > * + * margin-left: 2.5rem; /* 40px */
space-y-10 > * + * margin-top: 2.5rem; /* 40px */
space-x-11 > * + * margin-left: 2.75rem; /* 44px */
space-y-11 > * + * margin-top: 2.75rem; /* 44px */
space-x-12 > * + * margin-left: 3rem; /* 48px */
space-y-12 > * + * margin-top: 3rem; /* 48px */
space-x-14 > * + * margin-left: 3.5rem; /* 56px */
space-y-14 > * + * margin-top: 3.5rem; /* 56px */
space-x-16 > * + * margin-left: 4rem; /* 64px */
space-y-16 > * + * margin-top: 4rem; /* 64px */
space-x-20 > * + * margin-left: 5rem; /* 80px */
space-y-20 > * + * margin-top: 5rem; /* 80px */
space-x-24 > * + * margin-left: 6rem; /* 96px */
space-y-24 > * + * margin-top: 6rem; /* 96px */
space-x-28 > * + * margin-left: 7rem; /* 112px */
space-y-28 > * + * margin-top: 7rem; /* 112px */
space-x-32 > * + * margin-left: 8rem; /* 128px */
space-y-32 > * + * margin-top: 8rem; /* 128px */
space-x-36 > * + * margin-left: 9rem; /* 144px */
space-y-36 > * + * margin-top: 9rem; /* 144px */
space-x-40 > * + * margin-left: 10rem; /* 160px */
space-y-40 > * + * margin-top: 10rem; /* 160px */
space-x-44 > * + * margin-left: 11rem; /* 176px */
space-y-44 > * + * margin-top: 11rem; /* 176px */
space-x-48 > * + * margin-left: 12rem; /* 192px */
space-y-48 > * + * margin-top: 12rem; /* 192px */
space-x-52 > * + * margin-left: 13rem; /* 208px */
space-y-52 > * + * margin-top: 13rem; /* 208px */
space-x-56 > * + * margin-left: 14rem; /* 224px */
space-y-56 > * + * margin-top: 14rem; /* 224px */
space-x-60 > * + * margin-left: 15rem; /* 240px */
space-y-60 > * + * margin-top: 15rem; /* 240px */
space-x-64 > * + * margin-left: 16rem; /* 256px */
space-y-64 > * + * margin-top: 16rem; /* 256px */
space-x-72 > * + * margin-left: 18rem; /* 288px */
space-y-72 > * + * margin-top: 18rem; /* 288px */
space-x-80 > * + * margin-left: 20rem; /* 320px */
space-y-80 > * + * margin-top: 20rem; /* 320px */
space-x-96 > * + * margin-left: 24rem; /* 384px */
space-y-96 > * + * margin-top: 24rem; /* 384px */
space-x-px > * + * margin-left: 1px;
space-y-px > * + * margin-top: 1px;
space-y-reverse > * + * --tw-space-y-reverse: 1;
space-x-reverse > * + * --tw-space-x-reverse: 1;
-->
排版
<!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;
-->
尺寸
<!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>Sizing</title>
</head>
<body>
<!-- Width -->
<div class="bg-black text-white my-2 w-0">w-0</div>
<div class="bg-black text-white my-2 w-1">w-1</div>
<div class="bg-black text-white my-2 w-1.5">w-1.5</div>
<div class="bg-black text-white my-2 w-2">w-2</div>
<div class="bg-black text-white my-2 w-3">w-3</div>
<div class="bg-black text-white my-2 w-5">w-5</div>
<div class="bg-black text-white my-2 w-6">w-6</div>
<div class="bg-black text-white my-2 w-7">w-7</div>
<div class="bg-black text-white my-2 w-8">w-8</div>
<div class="bg-black text-white my-2 w-9">w-9</div>
<div class="bg-black text-white my-2 w-10">w-10</div>
<div class="bg-black text-white my-2 w-11">w-11</div>
<div class="bg-black text-white my-2 w-12">w-12</div>
<!-- By 2 -->
<div class="bg-black text-white my-2 w-14">w-14</div>
<div class="bg-black text-white my-2 w-16">w-16</div>
<!-- By 4 -->
<div class="bg-black text-white my-2 w-20">w-20</div>
<div class="bg-black text-white my-2 w-24">w-24</div>
<div class="bg-black text-white my-2 w-28">w-28</div>
<div class="bg-black text-white my-2 w-32">w-32</div>
<div>...</div>
<div class="bg-black text-white my-2 w-36">w-36</div>
<!-- By 8 -->
<div class="bg-black text-white my-2 w-64">w-64</div>
<!-- By 16 -->
<div class="bg-black text-white my-2 w-80">w-80</div>
<div class="bg-black text-white my-2 w-96">w-96</div>
<div class="bg-black text-white my-2 w-auto">Auto</div>
<!-- Percentages -->
<div class="bg-green-500 text-white my-2 w-1/2">w-1/2</div>
<div class="bg-green-500 text-white my-2 w-1/3">w-1/3</div>
<div class="bg-green-500 text-white my-2 w-2/3">w-2/3</div>
<div class="bg-green-500 text-white my-2 w-1/4">w-1/4</div>
<div class="bg-green-500 text-white my-2 w-2/4">w-2/4</div>
<div class="bg-green-500 text-white my-2 w-3/4">w-3/4</div>
<div class="bg-green-500 text-white my-2 w-1/5">w-1/5</div>
<!-- Width of the viewport -->
<div class="bg-purple-500 text-white my-2 w-screen">w-screen</div>
<!-- 100% of container -->
<div class="bg-zinc-500 text-white my-2 w-full">w-full</div>
<!-- min/max content -->
<div class="bg-emerald-500 text-white my-2 w-min">w-min</div>
<div class="bg-emerald-500 text-white my-2 w-max">w-max</div>
<!-- Arbitrary Width -->
<div class="bg-red-500 text-white my-2 w-[300px]">300px</div>
<!-- Max Width -->
<div class="bg-gray-100 max-w-lg mx-auto">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum
perferendis incidunt nihil ullam repellendus praesentium consectetur et
sed distinctio, magni iusto quos repellat officiis cum dolore aliquid
minus esse pariatur.
</div>
<!-- Height (Most of the same options as widths) -->
<div class="flex items-end">
<div class="bg-orange-500 w-20 h-24">h-24</div>
<div class="bg-orange-500 w-20 h-32">h-32</div>
<div class="bg-orange-500 w-20 h-40">h-40</div>
<div class="bg-orange-500 w-20 h-48">h-48</div>
<div class="bg-orange-500 w-20 h-64">h-64</div>
<div class="bg-orange-500 w-20 h-80">h-80</div>
</div>
<!-- Min Height -->
<div class="h-48 bg-red-200">
<div class="h-24 bg-red-600 min-h-full">Tailwind is awesome</div>
</div>
<!-- Max Height -->
<div class="h-24 bg-orange-200">
<div class="h-48 bg-orange-500 max-h-full">Tailwind is awesome</div>
</div>
<!-- Full screen height -->
<div class="h-screen bg-blue-300">Hello</div>
</body>
</html>
<!--
Width Sizes
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
w-full width: 100%;
w-screen width: 100vw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content; -->
<!--
Min Width Sizes
min-w-0 min-width: 0px;
min-w-full min-width: 100%;
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;
-->
<!--
Max Width Sizes
max-w-0 max-width: 0rem; /* 0px */
max-w-none max-width: none;
max-w-xs max-width: 20rem; /* 320px */
max-w-sm max-width: 24rem; /* 384px */
max-w-md max-width: 28rem; /* 448px */
max-w-lg max-width: 32rem; /* 512px */
max-w-xl max-width: 36rem; /* 576px */
max-w-2xl max-width: 42rem; /* 672px */
max-w-3xl max-width: 48rem; /* 768px */
max-w-4xl max-width: 56rem; /* 896px */
max-w-5xl max-width: 64rem; /* 1024px */
max-w-6xl max-width: 72rem; /* 1152px */
max-w-7xl max-width: 80rem; /* 1280px */
max-w-full max-width: 100%;
max-w-min max-width: min-content;
max-w-max max-width: max-content;
max-w-fit max-width: fit-content;
max-w-prose max-width: 65ch;
max-w-screen-sm max-width: 640px;
max-w-screen-md max-width: 768px;
max-w-screen-lg max-width: 1024px;
max-w-screen-xl max-width: 1280px;
max-w-screen-2xl max-width: 1536px;
-->
<!--
Height Sizes
h-0 height: 0px;
h-px height: 1px;
h-0.5 height: 0.125rem; /* 2px */
h-1 height: 0.25rem; /* 4px */
h-1.5 height: 0.375rem; /* 6px */
h-2 height: 0.5rem; /* 8px */
h-2.5 height: 0.625rem; /* 10px */
h-3 height: 0.75rem; /* 12px */
h-3.5 height: 0.875rem; /* 14px */
h-4 height: 1rem; /* 16px */
h-5 height: 1.25rem; /* 20px */
h-6 height: 1.5rem; /* 24px */
h-7 height: 1.75rem; /* 28px */
h-8 height: 2rem; /* 32px */
h-9 height: 2.25rem; /* 36px */
h-10 height: 2.5rem; /* 40px */
h-11 height: 2.75rem; /* 44px */
h-12 height: 3rem; /* 48px */
h-14 height: 3.5rem; /* 56px */
h-16 height: 4rem; /* 64px */
h-20 height: 5rem; /* 80px */
h-24 height: 6rem; /* 96px */
h-28 height: 7rem; /* 112px */
h-32 height: 8rem; /* 128px */
h-36 height: 9rem; /* 144px */
h-40 height: 10rem; /* 160px */
h-44 height: 11rem; /* 176px */
h-48 height: 12rem; /* 192px */
h-52 height: 13rem; /* 208px */
h-56 height: 14rem; /* 224px */
h-60 height: 15rem; /* 240px */
h-64 height: 16rem; /* 256px */
h-72 height: 18rem; /* 288px */
h-80 height: 20rem; /* 320px */
h-96 height: 24rem; /* 384px */
h-auto height: auto;
h-1/2 height: 50%;
h-1/3 height: 33.333333%;
h-2/3 height: 66.666667%;
h-1/4 height: 25%;
h-2/4 height: 50%;
h-3/4 height: 75%;
h-1/5 height: 20%;
h-2/5 height: 40%;
h-3/5 height: 60%;
h-4/5 height: 80%;
h-1/6 height: 16.666667%;
h-2/6 height: 33.333333%;
h-3/6 height: 50%;
h-4/6 height: 66.666667%;
h-5/6 height: 83.333333%;
h-full height: 100%;
h-screen height: 100vh;
h-min height: min-content;
h-max height: max-content;
h-fit height: fit-content;
-->
<!--
Min Height Sizes
min-h-0 min-height: 0px;
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;
-->
<!--
Max Height Sizes
max-h-0 max-height: 0px;
max-h-px max-height: 1px;
max-h-0.5 max-height: 0.125rem; /* 2px */
max-h-1 max-height: 0.25rem; /* 4px */
max-h-1.5 max-height: 0.375rem; /* 6px */
max-h-2 max-height: 0.5rem; /* 8px */
max-h-2.5 max-height: 0.625rem; /* 10px */
max-h-3 max-height: 0.75rem; /* 12px */
max-h-3.5 max-height: 0.875rem; /* 14px */
max-h-4 max-height: 1rem; /* 16px */
max-h-5 max-height: 1.25rem; /* 20px */
max-h-6 max-height: 1.5rem; /* 24px */
max-h-7 max-height: 1.75rem; /* 28px */
max-h-8 max-height: 2rem; /* 32px */
max-h-9 max-height: 2.25rem; /* 36px */
max-h-10 max-height: 2.5rem; /* 40px */
max-h-11 max-height: 2.75rem; /* 44px */
max-h-12 max-height: 3rem; /* 48px */
max-h-14 max-height: 3.5rem; /* 56px */
max-h-16 max-height: 4rem; /* 64px */
max-h-20 max-height: 5rem; /* 80px */
max-h-24 max-height: 6rem; /* 96px */
max-h-28 max-height: 7rem; /* 112px */
max-h-32 max-height: 8rem; /* 128px */
max-h-36 max-height: 9rem; /* 144px */
max-h-40 max-height: 10rem; /* 160px */
max-h-44 max-height: 11rem; /* 176px */
max-h-48 max-height: 12rem; /* 192px */
max-h-52 max-height: 13rem; /* 208px */
max-h-56 max-height: 14rem; /* 224px */
max-h-60 max-height: 15rem; /* 240px */
max-h-64 max-height: 16rem; /* 256px */
max-h-72 max-height: 18rem; /* 288px */
max-h-80 max-height: 20rem; /* 320px */
max-h-96 max-height: 24rem; /* 384px */
max-h-full max-height: 100%;
max-h-screen max-height: 100vh;
max-h-min max-height: min-content;
max-h-max max-height: max-content;
max-h-fit max-height: fit-content;
-->
布局位置
<!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>TailwindCSS</title>
</head>
<body>
<!-- Positioning -->
<div class="relative w-1/2 h-12 bg-red-200">
<p>Relative parent</p>
<div class="absolute bottom-0 right-0 bg-red-500">
<p>Absolute child</p>
</div>
</div>
<!-- Top left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute left-0 top-0 h-16 w-16 bg-yellow-300">01</div>
</div>
<!-- Top right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute top-0 right-0 h-16 w-16 bg-yellow-300">03</div>
</div>
<!-- Bottom left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 left-0 h-16 w-16 bg-yellow-300">07</div>
</div>
<!-- Bottom right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 right-0 h-16 w-16 bg-yellow-300">09</div>
</div>
<!-- Span top edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 top-0 h-16 bg-yellow-300">02</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 left-0 w-16 bg-yellow-300">04</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 right-0 w-16 bg-yellow-300">06</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 bottom-0 h-16 bg-yellow-300">08</div>
</div>
<!-- Display Classes -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
<span class="inline">This is display inline and will wrap normally</span
>sapiente ut rerum esse ullam provident, fugit
<span class="inline-block"
>This is display inline-block and will not extend beyond it's
parent</span
>eos quam
<span class="block"
>This is display block and will move to it's own line</span
>
reprehenderit est hic aut unde sequi, officia, ipsa amet doloribus
ratione<span class="hidden"
>This is display none and will not display at all</span
>
ad.
</div>
<!-- Z-Index -->
<div class="relative h-36">
<div class="absolute left-10 w-24 h-24 bg-blue-200 z-40">1</div>
<div class="absolute left-20 w-24 h-24 bg-blue-300">2</div>
<div class="absolute left-40 w-24 h-24 bg-blue-400 z-10">3</div>
<div class="absolute left-60 w-24 h-24 bg-blue-500 z-20">4</div>
<div class="absolute left-80 w-24 h-24 bg-blue-600">5</div>
</div>
<!-- Floats -->
<div class="w-1/2">
<img class="h-48 w-48 float-right" src="/assets/img/img1.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam
voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex
iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae,
ratione doloribus?
</p>
</div>
</body>
</html>
<!-- Position Classes
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
-->
<!-- Display Classes
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
-->
<!-- Z-Index
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-auto z-index: auto;
-->
<!-- Float
float-right float: right;
float-left float: left;
float-none float: none;
-->
背景阴影
<!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>Backgrounds & Shadows</title>
</head>
<body>
<!-- Background Classes -->
<div
class="h-64 w-72 bg-blue-500 bg-cover bg-no-repeat bg-center"
style="background-image: url('../assets/img/img1.jpg')"
></div>
<!-- Gradients -->
<div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div
class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
></div>
<!-- Shadows -->
<div class="w-96 mt-6 ml-4 p-3 shadow-md">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-2xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-inner">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Shadow Colors -->
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-blue-500/50">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-red-500/100">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Mix Blend -->
<div class="flex justify-center -space-x-24">
<div class="mix-blend-multiply bg-blue-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="mix-blend-multiply bg-pink-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
</div>
</body>
</html>
<!-- Background Size
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;
-->
<!-- Background Repeat
bg-repeat background-repeat: repeat;
bg-no-repeat background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;
-->
<!-- Background Position
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;
-->
<!-- Background Attachment
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;
-->
<!--
Shadows
shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none box-shadow: 0 0 #0000;
-->
边框
<!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>Borders</title>
</head>
<body>
<!-- Border Width & Colors -->
<div class="w-96 m-3 p-5 border">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-2 border-blue-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-4 border-red-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-x-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-x-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-y-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-r-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-l-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-b-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 border-t-2 border-zinc-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<!-- Border Radius -->
<div class="w-96 m-3 p-5 bg-gray-300 rounded">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-2xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-3xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-full">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<!-- Specific Sides -->
<div class="w-96 m-3 p-5 bg-gray-300 rounded-t-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<div class="w-96 m-3 p-5 bg-gray-300 rounded-b-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur
reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus
dolores.
</div>
<!-- Outline -->
<button class="outline outline-offset-2 outline-1">Button 1</button>
<button class="outline outline-offset-2 outline-2">Button 2</button>
<button class="outline outline-offset-2 outline-4">Button 3</button>
</body>
</html>
<!-- Border Widths
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border border-width: 1px;
border-x-0 border-left-width: 0px;
border-right-width: 0px;
border-x-2 border-left-width: 2px;
border-right-width: 2px;
border-x-4 border-left-width: 4px;
border-right-width: 4px;
border-x-8 border-left-width: 8px;
border-right-width: 8px;
border-x border-left-width: 1px;
border-right-width: 1px;
border-y-0 border-top-width: 0px;
border-bottom-width: 0px;
border-y-2 border-top-width: 2px;
border-bottom-width: 2px;
border-y-4 border-top-width: 4px;
border-bottom-width: 4px;
border-y-8 border-top-width: 8px;
border-bottom-width: 8px;
border-y border-top-width: 1px;
border-bottom-width: 1px;
border-t-0 border-top-width: 0px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-t border-top-width: 1px;
border-r-0 border-right-width: 0px;
border-r-2 border-right-width: 2px;
border-r-4 border-right-width: 4px;
border-r-8 border-right-width: 8px;
border-r border-right-width: 1px;
border-b-0 border-bottom-width: 0px;
border-b-2 border-bottom-width: 2px;
border-b-4 border-bottom-width: 4px;
border-b-8 border-bottom-width: 8px;
border-b border-bottom-width: 1px;
border-l-0 border-left-width: 0px;
border-l-2 border-left-width: 2px;
border-l-4 border-left-width: 4px;
border-l-8 border-left-width: 8px;
border-l border-left-width: 1px;
-->
<!-- Border Radius
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
rounded-full border-radius: 9999px;
-->
<!-- Outline
outline-0 outline-width: 0px;
outline-1 outline-width: 1px;
outline-2 outline-width: 2px;
outline-4 outline-width: 4px;
outline-8 outline-width: 8px;
-->
过滤器
<!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>Filters</title>
</head>
<body>
<!-- Blur -->
<div class="blur-none">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
harum?
</div>
<div class="blur-sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
harum?
</div>
<div class="blur-lg">
<img class="w-48" src="/assets/img/img1.jpg" alt="" />
</div>
<div class="blur-2xl">
<img class="w-48" src="/assets/img/img1.jpg" alt="" />
</div>
<!-- Brightness -->
<div class="brightness-50">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-100">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-150">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-200">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<!-- Contrast -->
<div class="contrast-50">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-100">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-150">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-200">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<!-- Grayscale -->
<div class="grayscale">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Invert -->
<div class="invert">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Sepia -->
<div class="sepia">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Hue Rotate -->
<div class="hue-rotate-15">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-90">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-180">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-60">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Saturate -->
<div class="saturate-50">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-100">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-150">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-200">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
</body>
</html>
<!-- Blur
blur-none filter: blur(0);
blur-sm filter: blur(4px);
blur filter: blur(8px);
blur-md filter: blur(12px);
blur-lg filter: blur(16px);
blur-xl filter: blur(24px);
blur-2xl filter: blur(40px);
blur-3xl filter: blur(64px);
-->
<!-- Brightness
brightness-0 filter: brightness(0);
brightness-50 filter: brightness(.5);
brightness-75 filter: brightness(.75);
brightness-90 filter: brightness(.9);
brightness-95 filter: brightness(.95);
brightness-100 filter: brightness(1);
brightness-105 filter: brightness(1.05);
brightness-110 filter: brightness(1.1);
brightness-125 filter: brightness(1.25);
brightness-150 filter: brightness(1.5);
brightness-200 filter: brightness(2);
-->
<!-- Contrast
contrast-0 filter: contrast(0);
contrast-50 filter: contrast(.5);
contrast-75 filter: contrast(.75);
contrast-100 filter: contrast(1);
contrast-125 filter: contrast(1.25);
contrast-150 filter: contrast(1.5);
contrast-200 filter: contrast(2);
-->
<!-- Hue Rotate
hue-rotate-0 filter: hue-rotate(0deg);
hue-rotate-15 filter: hue-rotate(15deg);
hue-rotate-30 filter: hue-rotate(30deg);
hue-rotate-60 filter: hue-rotate(60deg);
hue-rotate-90 filter: hue-rotate(90deg);
hue-rotate-180 filter: hue-rotate(180deg);
-->
互动
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>Interactivity</title>
</head>
<body>
<a href="#item">Scroll To Item</a>
<!-- Hover State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 hover:bg-orange-500 hover:text-black"
>
Submit
</button>
<!-- Focus State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 focus:bg-green-500 focus:text-black"
>
Submit
</button>
<!-- Active State Styling -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 active:bg-yellow-500 active:text-black"
>
Submit
</button>
<br>
<!-- Styling based on parent state -->
<!-- When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group-hover to style the target element: -->
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow-lg space-y-3 hover:bg-sky-500">
<div class="flex items-center">
<h3 class="group-hover:text-white">Card Title</h3>
</div>
<p class="group-hover:text-white">This is some card text</p>
</a>
<br>
<!-- Pseudo Classes -->
<ul>
<li class="even:bg-green-200 odd:bg-blue-200">Item 1</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 2</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 3</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 4</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 5</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 6</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 7</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 8</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 9</li>
<li class="even:bg-green-200 odd:bg-blue-200">Item 10</li>
</ul>
<br />
<!-- Appearance -->
<!-- Use appearance-none to reset any browser specific styling on an element. This utility is often used when creating custom form components. -->
<select>
<option>Yes</option>
<option>No</option>
</select>
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
</select>
<br />
<!-- Cursor -->
<button
type="button"
class="bg-black text-white py-3 px-5 rounded-lg m-3 cursor-pointer"
>
Submit
</button>
<button
type="button"
class="bg-black text-yellow-500 py-3 px-5 rounded-lg m-3 cursor-progress"
>
Loading...
</button>
<button
type="button"
disabled
class="bg-black text-red-200 py-3 px-5 rounded-lg m-3 cursor-not-allowed"
>
Confirm
</button>
<br />
<!-- Resize -->
<textarea class="border border-black rounded resize"></textarea>
<!-- User Select -->
<div class="select-none">Lorem ipsum dolor sit amet.</div>
<div class="select-text">Lorem ipsum dolor sit amet.</div>
<div class="select-all">Lorem ipsum dolor sit amet.</div>
<div class="select-auto">Lorem ipsum dolor sit amet.</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse id eveniet
quidem explicabo et molestiae rerum libero rem aperiam ad in fugiat, atque
excepturi vel enim, suscipit iure inventore natus provident deserunt?
Dolorum nihil fugiat sapiente odio nulla reiciendis qui repudiandae
doloremque eos, voluptatem iste tenetur ipsam doloribus aperiam deleniti
laboriosam consectetur in debitis quae a similique tempora eum ratione?
Consequatur possimus dolor quidem! Iure, laborum doloribus. Recusandae
odio, doloremque dolorum inventore, quaerat libero, quasi ad sunt aliquam
dolor nihil possimus minima debitis ab perferendis in culpa nesciunt
repellat consequuntur provident excepturi. Quod illo sequi sint, neque
porro animi, delectus non sapiente amet fugit ea, dolor debitis ipsum ut
temporibus officia nisi? Voluptas ex reprehenderit, itaque fugiat cumque
quasi vero, non excepturi exercitationem dignissimos qui quis nemo quia
delectus mollitia assumenda corrupti, ut incidunt quas ducimus aperiam
explicabo minus? Corporis, modi. Unde eos laudantium delectus amet enim
blanditiis culpa quasi quaerat, temporibus labore? Unde reprehenderit quod
officiis odit animi voluptatibus deleniti aspernatur inventore quam ex
saepe ea, laborum aliquam blanditiis odio corrupti aperiam molestiae id
placeat qui! Perferendis nisi nesciunt assumenda, quos omnis error itaque
laudantium inventore quasi ipsa laboriosam praesentium, minus modi soluta
asperiores illum molestiae alias aliquid quia incidunt accusamus eaque
quae. Veritatis ea provident aperiam architecto! Impedit sunt blanditiis,
molestiae sequi reprehenderit in sapiente quos id! Maiores, similique a
harum alias commodi, ullam esse nesciunt aliquam assumenda voluptatibus
dolores, aperiam minus ut. Doloribus ipsam at ex quasi mollitia unde totam
perferendis nobis obcaecati aperiam doloremque dignissimos dolores harum
nam debitis officia, qui cum minus commodi corrupti odit, excepturi esse
quibusdam numquam? Quos facilis eius eos error exercitationem. Cum, illo
dolore. Accusamus voluptatibus odio vel repellendus eum iste corrupti
voluptatem reiciendis molestias dolore, id quis expedita ipsam vero totam
fugiat a minus eaque deserunt aspernatur vitae. Ea eveniet quae
perspiciatis aliquid expedita optio voluptates reiciendis, molestias cum,
obcaecati pariatur officiis blanditiis dignissimos nesciunt! Cum atque
alias doloribus nam libero error quibusdam, minus nisi, enim accusantium
est unde dolor distinctio esse labore? Iure expedita sed consequatur
dolorem totam adipisci modi asperiores architecto dolorum mollitia
excepturi numquam id quibusdam vitae itaque distinctio dolore labore et
doloremque cumque sint, soluta ullam. Soluta beatae pariatur quas esse
iure et nulla, perspiciatis, obcaecati sunt temporibus atque est
asperiores, laboriosam odio rem veniam delectus corrupti fugiat fugit
dicta? Eveniet modi sit facilis inventore voluptate et laborum
consequuntur ad ex, eius possimus vero delectus vitae accusamus recusandae
voluptatem cumque iusto at eligendi ut repellat deleniti? Neque ducimus
numquam accusamus dicta laboriosam vel quis debitis molestias iure,
mollitia facere natus blanditiis officia deserunt amet provident ratione
odio sapiente cum sint. Impedit, voluptate distinctio quaerat ratione
asperiores voluptatem dignissimos labore maiores saepe ex cum facere
numquam quos reiciendis iste rerum quae blanditiis voluptates consequatur,
nemo mollitia ipsum hic, esse suscipit? Dolor officia, ducimus
reprehenderit iste voluptate qui minima odit a unde quo amet distinctio
expedita. Voluptates optio fugiat vel eos quae fuga corporis explicabo
magnam voluptatum repudiandae nesciunt odit, minus soluta neque!
Distinctio est sunt eligendi blanditiis, sit ut ratione, et consequatur
iusto atque sint neque sed, tenetur ullam quo recusandae veniam quisquam
hic nostrum deleniti architecto! Voluptate voluptates sint velit, magnam
in distinctio. Harum eaque vero voluptate velit suscipit commodi quae est
neque expedita iste aspernatur porro modi, animi quo, quisquam, placeat
praesentium rem omnis? Nobis, quia dolores, cupiditate hic quibusdam aut
officiis maxime laborum tenetur illo quam reiciendis magni obcaecati
dolorem explicabo nisi? Incidunt qui praesentium recusandae aliquam,
asperiores suscipit deleniti magnam perferendis similique, voluptatum
excepturi molestias maiores provident velit eius quis quisquam id iure.
Delectus ab molestiae similique, minus vitae repellendus dolorem doloribus
aliquam nemo suscipit dicta, at facere nihil. Expedita laborum, officiis
neque accusantium laudantium rerum illum temporibus sequi ut modi, libero
magni! Esse voluptatem asperiores excepturi fugiat provident doloribus
neque consequuntur laboriosam amet voluptates? Veniam quaerat fugiat
voluptas exercitationem adipisci. Voluptate, qui repellat totam tenetur a
facere assumenda provident ipsum in quis eum atque ipsa quidem omnis,
sunt, pariatur optio ullam porro sint illo? Quod debitis eligendi deleniti
in ex suscipit optio animi dignissimos eaque quae, accusantium, nobis
veniam velit officia. Praesentium sunt aut minus corrupti, qui tempora
tenetur mollitia harum, voluptatum quibusdam obcaecati dolorum eum saepe
beatae velit magnam, possimus quaerat ut amet. Illum consectetur, eum
laboriosam assumenda, saepe iure aliquam nesciunt et cum, quis dolore?
Totam numquam consequatur incidunt quod magni perferendis sit delectus
tempora animi, ipsum facere natus corporis quam quaerat recusandae cumque,
quasi sed fugit, aliquam necessitatibus nesciunt? Sequi reprehenderit
molestias magnam fugiat ab perferendis iusto harum et odit sint illum
molestiae amet quam quibusdam minima delectus ipsa consequatur,
perspiciatis quod necessitatibus veritatis nesciunt, excepturi voluptates
ea? Minima repellendus delectus earum fugit obcaecati error eveniet
possimus, totam vel voluptates perspiciatis quaerat non modi? Vero culpa
laborum, accusantium at consequatur explicabo, labore error debitis illum
quibusdam totam mollitia, tempore recusandae sed maiores nihil ex qui
dolorem? Facilis beatae fuga sunt aut nesciunt ipsum, similique sapiente,
quia non voluptates laborum earum voluptate explicabo atque officiis
pariatur consequuntur tenetur. Nobis doloribus odio harum laudantium sed
exercitationem atque ratione, laboriosam soluta provident eum itaque, quae
voluptas dicta obcaecati, nihil distinctio quos impedit delectus corrupti
deserunt! Odit facilis laboriosam veniam reprehenderit eos, maiores animi
obcaecati laudantium tempore? Ex ducimus eaque commodi molestiae debitis
culpa repellat voluptatem ea deleniti nesciunt unde dolore, earum nihil
cum quos laboriosam magni illo iure aperiam quidem itaque! Quod minus nemo
recusandae mollitia ipsam qui delectus odio id voluptatem esse natus
corrupti fugit obcaecati, voluptate quidem doloremque modi, optio, quam
quaerat provident eveniet repellat laborum dolorum sequi. Quos mollitia
et, voluptatum pariatur iste nisi velit voluptatem eos! Natus similique
possimus ea vel! Magnam adipisci necessitatibus vitae amet iste. Modi
omnis repellat molestiae, eum officia iusto perferendis quis numquam harum
voluptatum ut iure totam neque assumenda provident? Impedit, officiis
laboriosam! Recusandae quo sapiente porro vel minima eum. Commodi totam
consequatur neque aperiam doloribus. Odit adipisci repellat ducimus,
numquam incidunt iste repellendus officia iusto eligendi voluptatem
pariatur, porro facilis reiciendis id tempore. Obcaecati eos assumenda
animi et totam aliquam cupiditate ea.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur
adipisci mollitia odio aspernatur, expedita repellendus nisi aut, dolorem
corporis ipsam dolor sed ducimus atque tenetur officiis saepe in quaerat
enim doloremque alias iure! Nemo, quos veniam accusamus quae quisquam
tempora fugit. Debitis repellendus totam ex? Et voluptatum sunt maxime
cupiditate! Vero earum perferendis esse temporibus amet nesciunt
distinctio aliquid voluptates sequi? Hic iste tempora accusamus,
architecto animi reiciendis fugit rerum dolorum quisquam pariatur sint nam
eligendi placeat magni harum non nihil quas voluptatibus. Exercitationem
quae natus perspiciatis vitae, dolorum modi libero commodi quam
voluptatibus minus eaque, numquam dolor itaque, fuga tempora nobis!
Similique aut consequatur vitae, inventore repellendus ad possimus natus
distinctio ratione nam consequuntur unde id ipsum, maxime eius dicta odit?
Repellendus accusantium dolorem facilis distinctio quos? Cupiditate sed
totam harum? Quaerat autem assumenda optio, doloremque aperiam molestias
ullam eveniet, quod temporibus rerum eligendi iste distinctio fuga,
praesentium asperiores consequuntur debitis hic! Corrupti sapiente ipsum
quas libero! Error voluptates ad molestias dolorem doloremque omnis quasi
asperiores delectus voluptatem ullam? Adipisci sequi natus distinctio,
totam enim doloribus cupiditate eum delectus inventore obcaecati
aspernatur quod itaque dolor. Nesciunt, soluta voluptatem optio suscipit
consectetur ipsam enim voluptate corrupti quaerat. Quis minima itaque
doloribus quod eveniet reprehenderit error facilis. Facere quos, eos
reiciendis quae, perspiciatis in fugiat dolore recusandae laudantium,
aliquid atque consequuntur? Laborum quo, perspiciatis odit excepturi
ratione in quam iste consequuntur facere, sunt voluptas corrupti hic
dolorum debitis! Voluptates aut rem fuga beatae explicabo velit maiores
accusamus accusantium consequatur? Eveniet, blanditiis quam autem ea
numquam accusamus. Odit quidem explicabo, maxime vero molestiae facere
incidunt omnis. A id, voluptatem distinctio dolor veniam pariatur maxime
eaque minima commodi nostrum! Nulla nisi voluptas rerum ducimus officia
voluptatum repellat veniam velit non error mollitia facere tenetur, sequi
ut illo totam eius omnis quam quisquam sit quia sunt ea? Molestias nobis
rem molestiae odit veritatis illum, quidem nihil! Officiis eaque autem
veniam magni magnam quisquam tempora quo quod culpa odit, velit error
aliquid dolores aliquam et, ad nostrum neque exercitationem voluptate
delectus, ipsa explicabo! Dignissimos explicabo consectetur voluptates
necessitatibus tenetur vel unde fugiat laboriosam eum? Voluptates quisquam
sequi amet minus nostrum assumenda. Omnis quos maxime, ipsam rerum tempora
unde cupiditate deserunt veniam asperiores, saepe illum eveniet!
Distinctio inventore quae officia aliquam tempora accusantium modi!
Officiis facere deleniti corrupti doloremque nam asperiores excepturi sint
voluptates. Officia ut autem ipsam? Ipsum fugit ea voluptates sed, officia
expedita vel saepe assumenda ipsam minus tempore numquam aliquid impedit
reprehenderit similique commodi illum perferendis ipsa reiciendis cumque.
Ipsam explicabo assumenda consectetur, adipisci perspiciatis obcaecati non
provident iusto praesentium debitis? Eligendi cum natus hic optio
corporis, distinctio aliquid iusto ratione iste neque sint totam magni
eveniet adipisci quibusdam, atque aspernatur rem? Itaque inventore
expedita aut nemo aperiam delectus quisquam rem tenetur mollitia
doloremque dolores ad neque molestiae necessitatibus sit, dignissimos
ipsam at. Voluptas quis exercitationem nam non, voluptatem eos nulla iure
consequatur, esse ut ipsa ab necessitatibus expedita, tempore odio
voluptate deserunt ea corrupti nemo est consequuntur magni quaerat
recusandae ipsam! Porro aperiam totam possimus, eius, libero iusto, quo ex
quisquam voluptatum expedita voluptate error. Et facere cum ratione?
Consequuntur aut recusandae et quod maxime deleniti autem at rem ex
inventore saepe doloremque consequatur ratione, iusto amet fugiat
repellendus praesentium nostrum. Repudiandae optio temporibus laboriosam
autem. Magni, ab, neque sunt itaque quam eos accusantium exercitationem
dolorum blanditiis dignissimos iure! Autem perspiciatis ad quidem rem
deserunt numquam consequatur omnis in, eligendi aperiam magni odio modi
sequi, laborum eos cupiditate velit beatae deleniti dolor cum recusandae
ipsam voluptas quam asperiores. Dolorum officiis iste maiores quae, iusto
laboriosam quis neque nemo atque perspiciatis explicabo quasi distinctio
odio at eos corrupti aliquid fuga omnis voluptatibus quidem, reprehenderit
consequatur ex culpa ab. Repellat, odit ipsum. Eos, fugit, magnam ea,
itaque ipsum doloremque facere harum pariatur architecto quas fuga esse
quos autem sunt dolorem? Minima vitae enim et quia quaerat ad esse
inventore. Cumque earum laboriosam officiis, assumenda totam culpa
incidunt. Qui ex molestiae voluptates eius recusandae praesentium magnam
esse dicta. Accusamus enim rerum tempore odit, quasi placeat! Voluptas
consequatur dicta dolor veniam dignissimos modi molestiae quos labore
tempora architecto! Veniam animi nostrum aliquam cum at dolorum eveniet
tempore explicabo eligendi, modi enim quia earum quasi officiis. Quas,
exercitationem laudantium fugit perferendis at veritatis sapiente itaque
praesentium ullam ea voluptates numquam, quam velit officia sunt vel quia
pariatur asperiores porro est explicabo? Libero deleniti nisi inventore.
Quisquam aut saepe fugiat illum eius laboriosam magni illo blanditiis
vitae explicabo quia quas sapiente quis beatae, iste vero quaerat
perferendis atque nobis unde! Recusandae nihil aut officiis amet quos
ducimus quo, porro unde exercitationem perspiciatis blanditiis dicta magni
nemo illum voluptatibus placeat laboriosam, cum alias distinctio!
Voluptatibus eaque recusandae ad modi voluptate odio praesentium eum rem
quae quia. Repellendus voluptatum illum, asperiores debitis saepe ipsa
dolorum? Non obcaecati ut qui quos voluptatum ducimus saepe. Velit dolor
est dolores iure architecto alias explicabo quae, veniam incidunt eos,
quod quidem recusandae saepe placeat enim! Maxime provident quos,
reprehenderit aut molestias nemo nam nesciunt atque error in sapiente,
necessitatibus quo inventore vitae, esse corrupti minus. Laboriosam non
deleniti doloremque ullam veritatis quod reprehenderit veniam, ipsum unde,
ea molestias beatae exercitationem aut incidunt. Sed consequuntur
molestiae iste tempora voluptate veritatis tenetur cumque voluptates iure
eum labore at, vitae magni delectus maiores eaque quasi voluptatibus
praesentium perspiciatis amet minus illum. Corporis pariatur, voluptas
illum cumque maxime consequuntur vero dolor veritatis dicta. Sed sunt
laudantium aperiam error quidem obcaecati, quaerat totam repellendus ipsam
voluptas aspernatur veniam, expedita deleniti repellat ea perferendis at
doloribus commodi dolores dicta, sequi quos cupiditate? Fugit quibusdam
neque pariatur! Nostrum vel deleniti est dolor sapiente reiciendis quo
inventore unde consequatur esse non consectetur, facere ea laboriosam ex
modi illo accusamus repellat labore sint ullam harum eligendi. Asperiores,
porro eaque eum assumenda ratione culpa esse ab cupiditate dolores!
Dolorem explicabo ea minima numquam cum et veniam quos accusamus quod
laudantium animi, doloremque a cumque exercitationem, quis maiores facere!
At odio amet saepe esse cupiditate. Veritatis, sequi! Ipsa sunt saepe
eaque suscipit nisi voluptatem. Et.
</p>
<div id="item">Item</div>
</body>
</html>
<!-- Cursor
cursor-auto cursor: auto;
cursor-default cursor: default;
cursor-pointer cursor: pointer;
cursor-wait cursor: wait;
cursor-text cursor: text;
cursor-move cursor: move;
cursor-help cursor: help;
cursor-not-allowed cursor: not-allowed;
cursor-none cursor: none;
cursor-context-menu cursor: context-menu;
cursor-progress cursor: progress;
cursor-cell cursor: cell;
cursor-crosshair cursor: crosshair;
cursor-vertical-text cursor: vertical-text;
cursor-alias cursor: alias;
cursor-copy cursor: copy;
cursor-no-drop cursor: no-drop;
cursor-grab cursor: grab;
cursor-grabbing cursor: grabbing;
cursor-all-scroll cursor: all-scroll;
cursor-col-resize cursor: col-resize;
cursor-row-resize cursor: row-resize;
cursor-n-resize cursor: n-resize;
cursor-e-resize cursor: e-resize;
cursor-s-resize cursor: s-resize;
cursor-w-resize cursor: w-resize;
cursor-ne-resize cursor: ne-resize;
cursor-nw-resize cursor: nw-resize;
cursor-se-resize cursor: se-resize;
cursor-sw-resize cursor: sw-resize;
cursor-ew-resize cursor: ew-resize;
cursor-ns-resize cursor: ns-resize;
cursor-nesw-resize cursor: nesw-resize;
cursor-nwse-resize cursor: nwse-resize;
cursor-zoom-in cursor: zoom-in;
cursor-zoom-out cursor: zoom-out;
-->
断点
<!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>Breakpoints & Media Queries</title>
</head>
<!-- Tailwind is mobile-first -->
<body
class="bg-black sm:bg-green-800 md:bg-blue-800 lg:bg-yellow-800 xl:bg-purple-800 2xl:bg-orange-800"
>
<h1 class="text-white text-xl md:text-3xl xl:text-5xl">
Tailwind is awesome
</h1>
<script>
function showBrowserWidth() {
const width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
document.querySelector('h1').innerHTML = `Width: ${width}`
}
window.onload = showBrowserWidth
window.onresize = showBrowserWidth
</script>
</body>
</html>
<!-- Breakpoint Classes
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
-->
列
<!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>Columns</title>
</head>
<body>
<div class="columns-2 gap-8">
<img class="w-full" src="../assets/img/img1.jpg" />
<img class="w-full" src="../assets/img/img2.jpg" />
<img class="w-full break-after-column" src="../assets/img/img3.jpg" />
<img class="w-full" src="../assets/img/img4.jpg" />
</div>
<div class="columns-3 gap-24">
<img class="w-full" src="../assets/img/img3.jpg" />
<img class="w-full break-before-column" src="../assets/img/img4.jpg" />
<img class="w-full" src="../assets/img/img5.jpg" />
<img class="w-full" src="../assets/img/img6.jpg" />
<img class="w-full" src="../assets/img/img7.jpg" />
</div>
<div class="columns-3xs">
<!-- Video Aspect Ratio -->
<img class="w-full aspect-video" src="../assets/img/img8.jpg" />
<!-- Square Aspect Ratio -->
<img class="w-full aspect-square" src="../assets/img/img9.jpg" />
<img class="w-full break" src="../assets/img/img1.jpg" />
<img class="w-full" src="../assets/img/img2.jpg" />
</div>
</body>
</html>
<!-- Column Classes
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */
-->
<!-- Break After
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
break-after-avoid-page break-after: avoid-page;
break-after-page break-after: page;
break-after-left break-after: left;
break-after-right break-after: right;
break-after-column break-after: column;
-->
<!-- Break Before
reak-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;
-->
flex布局
<!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>Flex</title>
</head>
<body>
<!-- Flex and alignment -->
<div
class="flex flex-wrap h-72 w-100 bg-gray-100 justify-around items-center"
>
<div class="p-10 border border-blue-600 bg-blue-100">01</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="self-start p-10 border border-blue-600 bg-blue-100">03</div>
<div class="self-end p-10 border border-blue-600 bg-blue-100">04</div>
</div>
<!-- Flex Column, Gap and Order -->
<div
class="flex flex-col gap-4 w-100 bg-gray-200 justify-around items-center"
>
<div class="order-4 p-10 border border-blue-600 bg-blue-100">01</div>
<div class="order-1 p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
</div>
<!-- Grow and shrink -->
<div class="flex w-100 bg-gray-300">
<!-- flex-none: Prevent item from growing or shrinking -->
<div class="w-64 flex-none p-10 border border-blue-600 bg-blue-100">
01
</div>
<!-- flex-initial: Allow item to shrink but not grow, taking into account its initial size -->
<div class="w-64 flex-initial p-10 border border-blue-600 bg-blue-100">
02
</div>
<!-- flex-auto: Allow item to grow and shrink, taking into account its initial size -->
<div class="w-64 flex-auto p-10 border border-blue-600 bg-blue-100">
03
</div>
<!-- flex-1: Allow item to grow and shrink as needed, ignoring its initial size -->
<div class="w-64 flex-1 p-10 border border-blue-600 bg-blue-100">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="p-10 border border-blue-600 bg-blue-100">07</div>
</div>
</body>
</html>
<!-- Justify Content
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
justify-center justify-content: center;
justify-between justify-content: space-between;
justify-around justify-content: space-around;
justify-evenly justify-content: space-evenly;
-->
<!--
items-start align-items: flex-start;
items-end align-items: flex-end;
items-center align-items: center;
items-baseline align-items: baseline;
items-stretch align-items: stretch;
-->
<!-- Flex Direction
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;
-->
<!--
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;
-->
<!-- Flex Properties
flex-none flex: none;
Prevent item from growing or shrinking
flex-initial flex: 0 1 auto;
Allow item to shrink but not grow, taking into account its initial size
flex-auto flex: 1 1 auto;
Allow item to grow and shrink, taking into account its initial size
flex-1 flex: 1 1 0%;
Allow item to grow and shrink as needed, ignoring its initial size
-->
grid布局
<!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>Grid</title>
</head>
<body>
<!-- Grid cols and rows -->
<div class="grid grid-cols-3 grid-rows-4 gap-4 w-100 bg-gray-100">
<div class="p-10 border border-blue-600 bg-blue-100">01</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="p-10 border border-blue-600 bg-blue-100">07</div>
<div class="p-10 border border-blue-600 bg-blue-100">08</div>
<div class="p-10 border border-blue-600 bg-blue-100">09</div>
</div>
<!-- Col and row span -->
<div class="grid grid-cols-3 gap-4 w-100 bg-gray-100">
<div
class="col-span-2 row-span-2 p-10 border border-blue-600 bg-blue-100"
>
01
</div>
<div class="p-10 border border-blue-600 bg-blue-100">02</div>
<div class="p-10 border border-blue-600 bg-blue-100">03</div>
<div class="p-10 border border-blue-600 bg-blue-100">04</div>
<div class="p-10 border border-blue-600 bg-blue-100">05</div>
<div class="p-10 border border-blue-600 bg-blue-100">06</div>
<div class="col-span-3 p-10 border border-blue-600 bg-blue-100">07</div>
<div class="p-10 border border-blue-600 bg-blue-100">08</div>
<div class="col-span-2 p-10 border border-blue-600 bg-blue-100">09</div>
</div>
</body>
</html>
<!--
Grid Template Columns
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
-->
<!-- Grid Template Rows
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
-->
转换过渡
<!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>
<script>
tailwind.config = {
theme: {
extend: {
transitionDuration: {
0: '0ms',
2000: '2000ms',
},
},
},
}
</script>
<title>Transform & Transition</title>
</head>
<body>
<!-- No Transition -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded hover:bg-blue-700"
>
Click me
</button>
<!-- Transition -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded transition-colors duration-700 hover:bg-blue-700"
>
Click me
</button>
<!-- Transition & Transform -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded transition ease-in-out delay-150 duration-2000 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500"
>
Click me
</button>
<!-- Transform & Transition -->
<img
src="../assets/img/img1.jpg"
alt=""
class="hover:transform hover:rotate-180 hover:scale-75 hover:skew-x-12 transition"
/>
</body>
</html>
<!-- Transition Property
transition-none
transition-property: none;
transition-all
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow,
transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-colors
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-opacity
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-shadow
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-transform transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
-->
<!--
Duration
duration-75 transition-duration: 75ms;
duration-100 transition-duration: 100ms;
duration-150 transition-duration: 150ms;
duration-200 transition-duration: 200ms;
duration-300 transition-duration: 300ms;
duration-500 transition-duration: 500ms;
duration-700 transition-duration: 700ms;
duration-1000 transition-duration: 1000ms;
-->
<!-- Timing Function
ease-linear transition-timing-function: linear;
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-->
<!-- Delay
delay-75 transition-delay: 75ms;
delay-100 transition-delay: 100ms;
delay-150 transition-delay: 150ms;
delay-200 transition-delay: 200ms;
delay-300 transition-delay: 300ms;
delay-500 transition-delay: 500ms;
delay-700 transition-delay: 700ms;
delay-1000 transition-delay: 1000ms;
-->
<!-- TRANSFORMS -->
<!-- Scale
scale-0 transform: scale(0);
scale-x-0 transform: scaleX(0);
scale-y-0 transform: scaleY(0);
scale-50 transform: scale(.5);
scale-x-50 transform: scaleX(.5);
scale-y-50 transform: scaleY(.5);
scale-75 transform: scale(.75);
scale-x-75 transform: scaleX(.75);
scale-y-75 transform: scaleY(.75);
scale-90 transform: scale(.9);
scale-x-90 transform: scaleX(.9);
scale-y-90 transform: scaleY(.9);
scale-95 transform: scale(.95);
scale-x-95 transform: scaleX(.95);
scale-y-95 transform: scaleY(.95);
scale-100 transform: scale(1);
scale-x-100 transform: scaleX(1);
scale-y-100 transform: scaleY(1);
scale-105 transform: scale(1.05);
scale-x-105 transform: scaleX(1.05);
scale-y-105 transform: scaleY(1.05);
scale-110 transform: scale(1.1);
scale-x-110 transform: scaleX(1.1);
scale-y-110 transform: scaleY(1.1);
scale-125 transform: scale(1.25);
scale-x-125 transform: scaleX(1.25);
scale-y-125 transform: scaleY(1.25);
scale-150 transform: scale(1.5);
scale-x-150 transform: scaleX(1.5);
scale-y-150 transform: scaleY(1.5);
-->
<!-- Rotate
rotate-0 transform: rotate(0deg);
rotate-1 transform: rotate(1deg);
rotate-2 transform: rotate(2deg);
rotate-3 transform: rotate(3deg);
rotate-6 transform: rotate(6deg);
rotate-12 transform: rotate(12deg);
rotate-45 transform: rotate(45deg);
rotate-90 transform: rotate(90deg);
rotate-180 transform: rotate(180deg);
-->
<!-- Translate
translate-x-0 transform: translateX(0px);
translate-y-0 transform: translateY(0px);
translate-x-px transform: translateX(1px);
translate-y-px transform: translateY(1px);
translate-x-0.5 transform: translateX(0.125rem);
translate-y-0.5 transform: translateY(0.125rem);
translate-x-1 transform: translateX(0.25rem);
translate-y-1 transform: translateY(0.25rem);
translate-x-1.5 transform: translateX(0.375rem);
translate-y-1.5 transform: translateY(0.375rem);
translate-x-2 transform: translateX(0.5rem);
translate-y-2 transform: translateY(0.5rem);
translate-x-2.5 transform: translateX(0.625rem);
translate-y-2.5 transform: translateY(0.625rem);
translate-x-3 transform: translateX(0.75rem);
translate-y-3 transform: translateY(0.75rem);
translate-x-3.5 transform: translateX(0.875rem);
translate-y-3.5 transform: translateY(0.875rem);
translate-x-4 transform: translateX(1rem);
translate-y-4 transform: translateY(1rem);
translate-x-5 transform: translateX(1.25rem);
translate-y-5 transform: translateY(1.25rem);
translate-x-6 transform: translateX(1.5rem);
translate-y-6 transform: translateY(1.5rem);
translate-x-7 transform: translateX(1.75rem);
translate-y-7 transform: translateY(1.75rem);
translate-x-8 transform: translateX(2rem);
translate-y-8 transform: translateY(2rem);
translate-x-9 transform: translateX(2.25rem);
translate-y-9 transform: translateY(2.25rem);
translate-x-10 transform: translateX(2.5rem);
translate-y-10 transform: translateY(2.5rem);
translate-x-11 transform: translateX(2.75rem);
translate-y-11 transform: translateY(2.75rem);
translate-x-12 transform: translateX(3rem);
translate-y-12 transform: translateY(3rem);
translate-x-14 transform: translateX(3.5rem);
translate-y-14 transform: translateY(3.5rem);
translate-x-16 transform: translateX(4rem);
translate-y-16 transform: translateY(4rem);
translate-x-20 transform: translateX(5rem);
translate-y-20 transform: translateY(5rem);
translate-x-24 transform: translateX(6rem);
translate-y-24 transform: translateY(6rem);
translate-x-28 transform: translateX(7rem);
translate-y-28 transform: translateY(7rem);
translate-x-32 transform: translateX(8rem);
translate-y-32 transform: translateY(8rem);
translate-x-36 transform: translateX(9rem);
translate-y-36 transform: translateY(9rem);
translate-x-40 transform: translateX(10rem);
translate-y-40 transform: translateY(10rem);
translate-x-44 transform: translateX(11rem);
translate-y-44 transform: translateY(11rem);
translate-x-48 transform: translateX(12rem);
translate-y-48 transform: translateY(12rem);
translate-x-52 transform: translateX(13rem);
translate-y-52 transform: translateY(13rem);
translate-x-56 transform: translateX(14rem);
translate-y-56 transform: translateY(14rem);
translate-x-60 transform: translateX(15rem);
translate-y-60 transform: translateY(15rem);
translate-x-64 transform: translateX(16rem);
translate-y-64 transform: translateY(16rem);
translate-x-72 transform: translateX(18rem);
translate-y-72 transform: translateY(18rem);
translate-x-80 transform: translateX(20rem);
translate-y-80 transform: translateY(20rem);
translate-x-96 transform: translateX(24rem);
translate-y-96 transform: translateY(24rem);
translate-x-1/2 transform: translateX(50%);
translate-x-1/3 transform: translateX(33.333333%);
translate-x-2/3 transform: translateX(66.666667%);
translate-x-1/4 transform: translateX(25%);
translate-x-2/4 transform: translateX(50%);
translate-x-3/4 transform: translateX(75%);
translate-x-full transform: translateX(100%);
translate-y-1/2 transform: translateY(50%);
translate-y-1/3 transform: translateY(33.333333%);
translate-y-2/3 transform: translateY(66.666667%);
translate-y-1/4 transform: translateY(25%);
translate-y-2/4 transform: translateY(50%);
translate-y-3/4 transform: translateY(75%);
translate-y-full transform: translateY(100%);
-->
<!-- Skew
skew-x-0 transform: skewX(0deg);
skew-y-0 transform: skewY(0deg);
skew-x-1 transform: skewX(1deg);
skew-y-1 transform: skewY(1deg);
skew-x-2 transform: skewX(2deg);
skew-y-2 transform: skewY(2deg);
skew-x-3 transform: skewX(3deg);
skew-y-3 transform: skewY(3deg);
skew-x-6 transform: skewX(6deg);
skew-y-6 transform: skewY(6deg);
skew-x-12 transform: skewX(12deg);
skew-y-12 transform: skewY(12deg);
-->
<!-- Transform Origin
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;
-->
动画
定制
<!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>
<script>
tailwind.config = {
theme: {
screens: {
sm: '550px',
md: '800px',
lg: '1200px',
xl: '1440px',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
colors: {
primary: '#ff5733',
secondary: '#fffc33',
},
spacing: {
6: '2.5rem',
128: '32rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}
</script>
<title>Customization</title>
</head>
<body
class="bg-black sm:bg-green-800 md:bg-blue-800 lg:bg-yellow-800 xl:bg-purple-800 2xl:bg-orange-800"
>
<div
class="border-secondary border p-6 mb-128 max-w-sm mx-auto rounded-4xl"
>
<h1 class="text-primary text-xl"></h1>
</div>
<script>
function showBrowserWidth() {
const width = window.innerWidth
document.querySelector('h1').innerHTML = `Width: ${width}`
}
window.onload = showBrowserWidth
window.onresize = showBrowserWidth
</script>
</body>
</html>
<!-- Breakpoint Classes
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
-->
暗模式
<!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>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<style>
.toggle-checkbox:checked {
right: 0;
border-color: #68d391;
}
.toggle-checkbox:checked + .toggle-label {
background: #68d391;
}
</style>
<title>Dark Mode</title>
</head>
<body>
<div
class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-6 py-8 shadow xl"
>
<h3 class="text-slate-900 dark:text-white font-medium tracking-tight">
Lorem ipsum dolor sit.
</h3>
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
placeat earum a exercitationem? Minima corrupti ad magni aut suscipit
nulla voluptatem atque vitae fugit at.
</p>
</div>
<div
class="relative inline-block w-10 mr-2 ml-6 mt-6 align-middle select-none transition duration-200 ease-in"
>
<input
type="checkbox"
name="toggle"
id="toggle"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
/>
<label
for="toggle"
class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
></label>
</div>
<script>
document.getElementById('toggle').addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
})
</script>
</body>
</html>
<!-- Credit for toggle button style
https://tailwindcomponents.com/component/toggle-switch
-->