Important Tailwind Concepts - Blackbox Learning Docs

Utility First

Instead of writing CSS:

.btn{
background:red;
padding:10px;
}

Use:

<button class="bg-red-500 px-4 py-2">
Button
</button>

Mobile First

Tailwind follows Mobile First Design.

text-sm md:text-xl

Meaning:

Mobile → Small Text
Tablet/Desktop → Large Text

Arbitrary Values

Custom values inside brackets.

w-[350px]
h-[600px]
bg-[#1a1a1a]

State Modifiers

hover:
focus:
active:
disabled:

Example:

<input class="
border
focus:border-blue-500
">

Component Building Example

<div class="
max-w-sm
bg-white
rounded-xl
shadow-lg
p-6
hover:scale-105
transition
duration-300
">

<h2 class="text-2xl font-bold mb-2">
Tailwind Card
</h2>

<p class="text-gray-600">
Simple Card Example
</p>

</div>