🚀 Cyber Security New Batch Start from 1 JunEnroll Now
Cyber Defence
CYBERDEFENCE
Development

Tailwind CSS Tutorial: Utility-First CSS Framework Complete Guide 2026

Complete Tailwind CSS tutorial in 2026. Learn utility-first CSS from scratch — installation, configuration, responsive design, dark mode, and building beautiful UIs with Tailwind with practical examples.

Amit Kumar
Amit KumarEthical Hacker & Founder
4 min read
Tailwind CSS Tutorial: Utility-First CSS Framework Complete Guide 2026 Tailwind CSS modern web development ka sabse popular CSS framework hai. Yeh complete tutorial aapko utility-first CSS concepts se lekar building production-ready UIs tak sab kuch cover karega with practical examples. ## Tailwind CSS Kya Hai Tailwind CSS ek utility-first CSS framework hai jo pre-built utility classes provide karta hai. Instead of writing custom CSS, aap HTML mein directly classes add karke styling karte ho. Traditional CSS mein: .button { background-color: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: all 0.2s; } Tailwind CSS mein: ## Tailwind CSS Installation Tutorial ### 1. CDN se Quick Start (Learning ke liye) ### 2. npm se Project Setup (Production ke liye) New project mein install karein: npm install -D tailwindcss postcss autoprefixer Tailwind config initialize karein: npx tailwindcss init -p Configuration (tailwind.config.js): module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"], theme: { extend: { colors: { primary: '#00e5ff', secondary: '#1f6bff', dark: '#0a0a1a' }, fontFamily: { heading: ['Rajdhani', 'sans-serif'], body: ['Inter', 'sans-serif'] }, }, }, plugins: [], } CSS Setup (src/index.css): @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-dark text-gray-100; } } @layer components { .btn-primary { @apply bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-all; } .card { @apply bg-white/5 border border-white/10 rounded-2xl p-6; } } ## Tailwind CSS Utility Classes Tutorial ### Spacing Margin:
margin all sides
margin horizontal
margin vertical
individual sides
Padding - Same pattern:
padding all sides
padding horizontal
padding vertical
Values: 0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, etc. Or use arbitrary: p-[20px], m-[2rem] ### Colors aur Backgrounds Text colors:

White text

Gray text

Blue text

Custom color

Background colors:
White background
Dark background
Blue background
Custom (defined in config)
Opacity:
50% opacity black
10% opacity white
### Typography Font size:

Extra small

Small

Base (16px)

Large

Extra large

Responsive

Font weight:

Light (300)

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

Text alignment:

Left aligned

Center aligned

Right aligned

### Layout: Flexbox Flex container:
display flex
flex-direction column
allow wrapping
Justify content:
items at start
items centered
space between
space around
space evenly
Align items:
align at start
vertically centered
align at end
stretch to fill
Gap:
gap 16px
different gaps
Flex grow/shrink:
grow to fill
grow + shrink
50% basis
### Layout: Grid Grid container:
display grid
1 column
2 columns
3 columns
4 columns
Responsive grid:
Gap:
gap 16px
responsive gaps
Span:
span 2 columns
span full width
### Borders aur Shadows Border width:
default border
2px border
4px border
Border radius:
default rounded
medium radius
large radius
extra large radius
2xl radius
fully rounded
Shadow:
default shadow
medium shadow
large shadow
extra large shadow
colored shadow
## Tailwind CSS Responsive Design Tutorial Breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px Mobile first approach:
Responsive typography:

Responsive Heading

Responsive spacing:
Content with responsive padding
Responsive visibility:
Hide on md and larger
## Tailwind CSS Dark Mode Tutorial tailwind.config.js: module.exports = { darkMode: 'class', // or 'media' for auto dark mode } Dark mode toggle: Dark mode styles:

Content adapts to dark mode

## Tailwind CSS Components Tutorial ### Cards Basic Card:
Card image

Card Title

Card description text goes here.

Hover Effects Card:
Card
### Buttons Primary Button: Outline Button: Ghost Button: ### Forms Input Field:
Textarea: ## Tailwind CSS with Next.js Tutorial Next.js project mein Tailwind add karein: npx create-next-app@latest my-project --tailwind Existing project mein add karein: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ## Cyber Defence Tailwind CSS Course Cyber Defence mein Tailwind CSS ka complete training available hai jo modern UI building aur responsive design techniques cover karta hai. Hands-on projects ke saath practical learning. ## FAQs ### Kya Tailwind CSS fast hai? Haan, Tailwind CSS production build mein unused styles remove karta hai (purging) jo final CSS file ko very small banata hai. Plus, caching ke liye excellent hai kyunki class names change nahi hote. ### Kya Tailwind CSS class names hard hai remember karna? Start mein thoda challenging lag sakta hai, but documentation excellent hai aur VS Code Tailwind extension autocomplete deta hai jo bohot helpful hai. ### Custom CSS aur Tailwind CSS mein kya choose karein? Complex animations, CSS variables, aur highly custom designs ke liye custom CSS use karein. Rapid UI development aur utility-based styling ke liye Tailwind best hai. Aksar combination best results deta hai.

Talk to a Cyber Defence Expert

Get a free consultation on cybersecurity, training and certifications. Our team responds within 10 minutes during business hours.

WhatsApp Us Now75175 72000