Tailwind Css Icon

Tailwind Css

1 week
Intermediate
Last updated: 2026-05-30

Tailwind CSS is a utility-first CSS framework that lets you build custom designs directly in your HTML using small, reusable classes. It helps create fast, responsive, and modern UI without writing much custom CSS.

Colors

Text Colors

text-red-500
text-blue-500
text-green-500

Example:

<h1 class="text-red-500">
Red Text
</h1>

Background Colors

bg-red-500
bg-blue-500
bg-green-500

Example:

<div class="bg-purple-500">
Content
</div>

Color Shades

bg-blue-100
bg-blue-300
bg-blue-500
bg-blue-700
bg-blue-900

Higher number = Darker Color

Introduction to Tailwind css

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework used to build modern, responsive, and fast websites directly inside HTML.

Instead of writing custom CSS like:

.card {
background: white;
padding: 20px;
border-radius: 10px;
}


You use utility classes directly in HTML:

<div class="bg-white p-5 rounded-xl"></div>


Why Use Tailwind CSS?

  • Faster UI Development
  • Responsive Design Easy
  • No Need To Write Large CSS Files
  • Highly Customizable
  • Professional Modern Design
  • Used By Startups & Big Companies

Installation

1. CDN Method (Best For Beginners)


<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<h1 class="text-4xl font-bold text-blue-500">
Hello Tailwind
</h1>

</body>
</html>


2. Vite + Tailwind Installation

Step 1

Create Project

npm create vite@latest my-project
cd my-project

Step 2

Install Dependencies

npm install

Step 3

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Step 4

Configure the Vite plugin

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
 plugins: [
  tailwindcss(),
 ],
})


Step 5

Import Tailwind CSS to your css file

@import "tailwindcss";


Basic Syntax

Basic Syntax

<div class="bg-black text-white p-5 rounded-lg">
Tailwind Box
</div>

Padding & Margin

Padding

p-5

All Sides

<div class="p-5">

Directional Padding

pt-5
pb-5
pl-5
pr-5
px-5
py-5

Example:

<div class="px-6 py-3">
Button
</div>

Margin

m-5

Directional:

mt-5
mb-5
ml-5
mr-5
mx-5
my-5

Example:

<div class="mt-10">
Content
</div>


Width & Height

Width

w-full
w-screen
w-1/2
w-1/3
w-64

Example:

<div class="w-1/2">
50% Width
</div>

Height

h-screen
h-full
h-64

Example:

<div class="h-screen">
Full Viewport Height
</div>


Typography

Font Size

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-4xl
text-6xl

Example:

<h1 class="text-5xl">
Heading
</h1>


Font Weight

font-thin
font-light
font-normal
font-medium
font-semibold
font-bold
font-black

Example:

<p class="font-bold">
Bold Text
</p>


Text Alignment

text-left
text-center
text-right

Example:

<h1 class="text-center">
Centered
</h1>


Flexbox

Enable Flex

flex

Example:

<div class="flex">
    <div>1</div>
    <div>2</div>
</div>

Flex Direction

flex-row
flex-col

Example:

<div class="flex flex-col">

Alignment

Horizontal

justify-start
justify-center
justify-end
justify-between
justify-around

Vertical

items-start
items-center
items-end

Example:

<div class="flex justify-center items-center h-screen">
Content
</div>


Grid

Enable Grid

grid

Columns

grid-cols-2
grid-cols-3
grid-cols-4

Example:

<div class="grid grid-cols-3 gap-5">

Gap

gap-2
gap-4
gap-6
gap-10

Example:

<div class="grid grid-cols-3 gap-4">


Responsive Design

Example:

<div class="
text-sm
md:text-lg
lg:text-3xl
">
Responsive Text
</div>


Background Image

Using CSS

<div class="bg-cover bg-center">

CSS

.hero{
background-image:url(image.jpg);
}

Tailwind Arbitrary Value

<div class="bg-[url('/img/bg.jpg')]">


Borders

Border

border
border-2
border-4

Example:

<div class="border-2">


Border Color

border-red-500
border-blue-500

Example:

<div class="border border-red-500">

Border Radius


Rounded Corners

rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full

Example:

<img class="rounded-full">


Shadows

Shadow Classes

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Example:

<div class="shadow-xl">
Card
</div>


Hover Effects

Hover Syntax

hover:

Example:

<button class="
bg-blue-500
hover:bg-red-500
">
Button
</button>

Scale on Hover

hover:scale-110

Example:

<div class="hover:scale-110">


Transitions

Smooth Animation

transition

Example:

<button class="
hover:bg-red-500
transition
duration-300
">
Button
</button>

Duration

duration-100
duration-300
duration-500
duration-700
duration-1000


Position

Position Types

relative
absolute
fixed
sticky

Example:

<div class="relative">

<div class="absolute top-0 right-0">
Badge
</div>

</div>

Position Values

top-0
left-0
right-0
bottom-0


Z Index

Controls stacking order.

z-0
z-10
z-20
z-30
z-40
z-50

Example:

<div class="z-50">


Overflow

Types

overflow-hidden
overflow-auto
overflow-scroll
overflow-x-auto
overflow-y-auto

Example:

<div class="overflow-hidden">


Opacity

Controls transparency.

opacity-0
opacity-25
opacity-50
opacity-75
opacity-100

Example:

<div class="opacity-50">


Transform

Scale

scale-50
scale-75
scale-100
scale-125

Rotate

rotate-45
rotate-90
rotate-180

Translate

translate-x-10
translate-y-10

Example:

<div class="rotate-12 scale-110">


Dark Mode

Enable Dark Mode

<html class="dark">

Example:

<div class="
bg-white
dark:bg-gray-900
text-black
dark:text-white
">
Dark Mode Card
</div>


Important Utility Classes

Container

container

Centers content automatically.

Hidden

hidden

Hide element.

Block

block

Show as block element.

Cursor

cursor-pointer
cursor-not-allowed

Select

select-none

Disable text selection.

Aspect Ratio

aspect-video
aspect-square


Important Tailwind Concepts

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>