CSS Frameworks Complete Guide - Tailwind CSS & Bootstrap

1

Introduction to CSS Frameworks

CSS Frameworks are pre-written CSS libraries that help you build responsive, beautiful websites faster without writing CSS from scratch. They provide ready-to-use components, grid systems, and utility classes.

💡 Why Use CSS Frameworks?

CSS Frameworks save time, ensure consistency, and provide battle-tested responsive designs. Instead of writing hundreds of lines of CSS, you can use pre-built classes to style your elements instantly!

Tailwind CSS

A utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML.

Bootstrap

A component-based framework with pre-designed UI components, JavaScript plugins, and a powerful grid system.

Key Benefits:

⚡ Faster development time
📱 Built-in responsive design
🎨 Consistent styling across projects
🔧 Easy customization options
📚 Great documentation & community

2

What is Bootstrap?

Bootstrap Overview

Bootstrap is the world's most popular CSS framework, originally developed by Twitter. It provides a comprehensive collection of pre-designed components, a powerful 12-column grid system, and JavaScript plugins for interactive features.

🎯 Bootstrap Features

Components: Buttons, Cards, Modals, Navbars, Forms, and 50+ more
Grid System: 12-column responsive grid with flexbox
JavaScript: jQuery plugins for carousels, dropdowns, modals
Theming: Sass variables for easy customization
Icons: Bootstrap Icons library with 1,800+ icons

Bootstrap 5.3

Latest stable version

No jQuery

Bootstrap 5 is jQuery-free

RTL Support

Right-to-left text support

CSS Variables

Native CSS custom properties

3

Bootstrap Setup & CDN

CDN Installation (Quick Start)

The fastest way to get started with Bootstrap is using the CDN (Content Delivery Network). Just add these links to your HTML file!

                                
                                
                                
                            
index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Project</title>
    
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
          crossorigin="anonymous">
    
    <!-- Bootstrap Icons (Optional) -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" 
          rel="stylesheet">
</head>
<body>
    
    <!-- Your content here -->
    <div class="container">
        <h1 class="text-primary">Hello Bootstrap!</h1>
        <button class="btn btn-primary">Click Me</button>
    </div>

    <!-- Bootstrap JS Bundle CDN (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
            crossorigin="anonymous"></script>
</body>
</html>
                    

NPM Installation

Terminal

# Install Bootstrap via npm
npm install bootstrap

# Install Bootstrap with Popper.js
npm install bootstrap @popperjs/core

# Install Bootstrap Icons
npm install bootstrap-icons

main.js JS

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// Or import specific components
import { Modal, Tooltip } from 'bootstrap';

4

Bootstrap Components

Common Components

                                
                                
                                
                            
components.htmlHTML

<!-- Buttons -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-lg btn-primary">Large Button</button>

<!-- Card -->
<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Success!</strong> Your action was completed.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" 
                data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">Modal content here...</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Form -->
<form>
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="mb-3">
        <label class="form-label">Password</label>
        <input type="password" class="form-control">
    </div>
    <button class="btn btn-primary">Submit</button>
</form>
                    

5

Bootstrap Grid System

12-Column Grid

Bootstrap's grid system uses a series of containers, rows, and columns to layout content. It's built with flexbox and is fully responsive.

                                
                                
                                
                            
grid.htmlHTML

<!-- Basic Grid -->
<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="col">Column 3</div>
    </div>
</div>

<!-- Specific Column Sizes -->
<div class="container">
    <div class="row">
        <div class="col-4">4 columns</div>
        <div class="col-8">8 columns</div>
    </div>
</div>

<!-- Responsive Breakpoints -->
<!-- sm: ≥576px, md: ≥768px, lg: ≥992px, xl: ≥1200px, xxl: ≥1400px -->
<div class="container">
    <div class="row">
        <!-- Full width on mobile, half on medium screens -->
        <div class="col-12 col-md-6">Column 1</div>
        <div class="col-12 col-md-6">Column 2</div>
    </div>
    
    <div class="row">
        <!-- Full on mobile, third on tablet, quarter on desktop -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Item</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Item</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Item</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Item</div>
    </div>
</div>

<!-- Gutters (spacing) -->
<div class="container">
    <div class="row g-4"> <!-- g-0 to g-5 -->
        <div class="col-6">With gap</div>
        <div class="col-6">With gap</div>
    </div>
</div>

<!-- Alignment -->
<div class="row justify-content-center align-items-center">
    <div class="col-6">Centered</div>
</div>

<!-- Offset -->
<div class="row">
    <div class="col-6 offset-3">Offset by 3 columns</div>
</div>
                    

Grid Breakpoints

Breakpoint	Class Prefix	Screen Width
X-Small	col-	<576px
Small	col-sm-	≥576px
Medium	col-md-	≥768px
Large	col-lg-	≥992px
X-Large	col-xl-	≥1200px
XX-Large	col-xxl-	≥1400px

6

What is Tailwind CSS?

Tailwind CSS Overview

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML. Unlike Bootstrap, it doesn't come with pre-designed components—instead, you compose your own designs using utility classes.

🎯 Tailwind Philosophy

"Best practices don't actually work" — Tailwind encourages writing CSS utility classes directly in HTML, which might seem wrong at first, but leads to faster development, smaller CSS files, and easier maintenance!

Utility-First

Style elements with utility classes

JIT Compiler

Generate CSS on-demand

Responsive

Mobile-first breakpoint system

Dark Mode

Built-in dark mode support

Customizable

Full control via config file

Tiny Production CSS

PurgeCSS removes unused styles

7

Tailwind Setup & CDN

CDN Installation (Quick Start)

⚠️ CDN Limitations

The CDN version is great for learning and prototyping, but for production use NPM installation for better performance, customization, and smaller file sizes.

                                
                                
                                
                            
index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Project</title>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Optional: Custom Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#667eea',
                        secondary: '#764ba2',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100">
    
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
        <button class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
            Click Me
        </button>
    </div>

</body>
</html>
                    

NPM Installation (Recommended)

Terminal

# Create new project and install Tailwind
npm init -y
npm install -D tailwindcss postcss autoprefixer

# Generate config files
npx tailwindcss init -p

# This creates:
# - tailwind.config.js
# - postcss.config.js

tailwind.config.js JS

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{html,js,jsx,ts,tsx}",
        "./index.html",
    ],
    theme: {
        extend: {
            colors: {
                primary: '#667eea',
                secondary: '#764ba2',
            },
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
        },
    },
    plugins: [],
}

src/input.css CSS

/* Add Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles */
@layer components {
    .btn-primary {
        @apply px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition;
    }
}

Terminal - Build

# Build CSS (watch mode for development)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Build for production (minified)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

8

Tailwind Utility Classes

Core Utilities

                                
                                
                                
                            
utilities.htmlHTML

<!-- COLORS -->
<div class="text-blue-500">Blue text</div>
<div class="bg-red-500">Red background</div>
<div class="border-green-500">Green border</div>
<!-- Colors: gray, red, orange, yellow, green, teal, blue, indigo, purple, pink -->
<!-- Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 -->

<!-- SPACING (padding & margin) -->
<div class="p-4">Padding all sides</div>
<div class="px-4">Padding left & right</div>
<div class="py-4">Padding top & bottom</div>
<div class="pt-4 pr-2 pb-4 pl-2">Individual padding</div>
<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<!-- Sizes: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 -->

<!-- SIZING -->
<div class="w-full">Full width</div>
<div class="w-1/2">Half width</div>
<div class="w-64">256px width</div>
<div class="h-screen">Full viewport height</div>
<div class="min-h-screen">Minimum full height</div>
<div class="max-w-md">Max width medium</div>

<!-- TYPOGRAPHY -->
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (default)</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2x large</p>
<p class="text-3xl font-bold">3x large bold</p>
<p class="font-light">Light</p>
<p class="font-medium">Medium</p>
<p class="font-semibold">Semibold</p>
<p class="italic underline">Italic underline</p>
<p class="text-center">Centered text</p>
<p class="uppercase tracking-wide">Uppercase</p>

<!-- FLEXBOX -->
<div class="flex">Flex container</div>
<div class="flex items-center">Vertically centered</div>
<div class="flex justify-center">Horizontally centered</div>
<div class="flex justify-between">Space between</div>
<div class="flex flex-col">Column direction</div>
<div class="flex flex-wrap">Wrap items</div>
<div class="flex gap-4">Gap between items</div>
<div class="flex-1">Flex grow</div>

<!-- GRID -->
<div class="grid grid-cols-3 gap-4">3 column grid</div>
<div class="grid grid-cols-2 md:grid-cols-4">Responsive grid</div>
<div class="col-span-2">Span 2 columns</div>

<!-- BORDERS -->
<div class="border">1px border</div>
<div class="border-2 border-blue-500">2px blue border</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Full rounded (circle)</div>

<!-- SHADOWS -->
<div class="shadow">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>

<!-- TRANSITIONS & HOVER -->
<button class="transition duration-300 hover:bg-blue-600">
    Hover me
</button>
<div class="hover:scale-105 transition transform">Scale on hover</div>

<!-- OPACITY -->
<div class="opacity-50">50% opacity</div>
<div class="hover:opacity-100">Full on hover</div>

<!-- POSITION -->
<div class="relative">
    <div class="absolute top-0 right-0">Top right corner</div>
</div>
<div class="fixed bottom-4 right-4">Fixed position</div>
<div class="sticky top-0">Sticky header</div>
                    

Building Components

                                
                                
                                
                            
components.htmlHTML

<!-- Card Component -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-sm">
    <img src="image.jpg" class="w-full h-48 object-cover">
    <div class="p-6">
        <h3 class="text-xl font-bold text-gray-800 mb-2">Card Title</h3>
        <p class="text-gray-600 mb-4">Card description goes here.</p>
        <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg 
                        hover:bg-blue-600 transition duration-300">
            Learn More
        </button>
    </div>
</div>

<!-- Button Variants -->
<button class="px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg 
                shadow-md hover:bg-blue-600 hover:shadow-lg 
                transition duration-300 transform hover:-translate-y-1">
    Primary Button
</button>

<button class="px-6 py-3 border-2 border-blue-500 text-blue-500 font-semibold 
                rounded-lg hover:bg-blue-500 hover:text-white transition">
    Outline Button
</button>

<!-- Navbar -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <a href="#" class="text-2xl font-bold text-blue-600">Logo</a>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-gray-600 hover:text-blue-500 transition">Home</a>
                <a href="#" class="text-gray-600 hover:text-blue-500 transition">About</a>
                <a href="#" class="text-gray-600 hover:text-blue-500 transition">Contact</a>
            </div>
        </div>
    </div>
</nav>

<!-- Form Input -->
<input type="text" 
       class="w-full px-4 py-3 border border-gray-300 rounded-lg 
              focus:outline-none focus:ring-2 focus:ring-blue-500 
              focus:border-transparent transition" 
       placeholder="Enter your email">

<!-- Alert/Badge -->
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded">
    <p class="font-bold">Success!</p>
    <p>Your action was completed successfully.</p>
</div>

<span class="px-3 py-1 bg-blue-100 text-blue-600 text-sm font-semibold rounded-full">
    Badge
</span>
                    

9

Tailwind Responsive Design

Responsive Breakpoints

📱 Mobile-First Approach

Tailwind uses a mobile-first approach. Base classes apply to all screen sizes, and breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) apply styles at that breakpoint and above.

Breakpoint Reference

Breakpoint	Min Width	CSS
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)

                                
                                
                                
                            
responsive.htmlHTML

<!-- Responsive Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<!-- Responsive Text -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
    Responsive Heading
</h1>

<!-- Show/Hide at Breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>

<!-- Responsive Padding -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
    Increasing padding
</div>

<!-- Responsive Flexbox Direction -->
<div class="flex flex-col md:flex-row gap-4">
    <div>Stacked on mobile</div>
    <div>Side by side on desktop</div>
</div>

<!-- Dark Mode -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
    Supports dark mode!
</div>

<!-- Hover, Focus, Active States -->
<button class="bg-blue-500 
                hover:bg-blue-600 
                focus:ring-4 focus:ring-blue-300 
                active:bg-blue-700">
    Interactive Button
</button>

<!-- Group Hover -->
<div class="group">
    <div class="group-hover:bg-blue-500 transition">
        Changes when parent is hovered
    </div>
</div>
                    

10

React, Vue, Angular & Django

React Integration

1

Tailwind CSS with React

Create React App or Vite + Tailwind CSS setup

Terminal - React + Tailwind

# Create React app with Vite (recommended)
npm create vite@latest my-app -- --template react
cd my-app

# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Configure tailwind.config.js
# Add to content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

# Add to src/index.css
# @tailwind base; @tailwind components; @tailwind utilities;

npm run dev

                                
                                
                                
                            
Button.jsx - React ComponentJSX

// Tailwind in React Component
function Button({ children, variant = 'primary' }) {
    const baseClasses = "px-6 py-3 font-semibold rounded-lg transition duration-300";
    
    const variants = {
        primary: "bg-blue-500 text-white hover:bg-blue-600",
        secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
        outline: "border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white"
    };

    return (
        <button className={`${baseClasses} ${variants[variant]}`}>
            {children}
        </button>
    );
}

// Usage
<Button variant="primary">Click Me</Button>
<Button variant="outline">Learn More</Button>
                    

Terminal - React + Bootstrap

# Install React-Bootstrap (recommended for React)
npm install react-bootstrap bootstrap

# Import in src/main.jsx or App.jsx
import 'bootstrap/dist/css/bootstrap.min.css';

                                
                                
                                
                            
App.jsx - React-BootstrapJSX

import { Button, Card, Container, Row, Col } from 'react-bootstrap';

function App() {
    return (
        <Container>
            <Row className="g-4">
                <Col md={6}>
                    <Card>
                        <Card.Body>
                            <Card.Title>Card Title</Card.Title>
                            <Card.Text>Card content here</Card.Text>
                            <Button variant="primary">Click Me</Button>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>
    );
}
                    

Vue.js Integration

Terminal - Vue + Tailwind

# Create Vue app
npm create vue@latest my-vue-app
cd my-vue-app

# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Configure tailwind.config.js
# content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]

# Add to src/assets/main.css
# @tailwind base; @tailwind components; @tailwind utilities;

                                
                                
                                
                            
Button.vue - Vue ComponentVUE

<template>
    <button :class="buttonClasses">
        <slot />
    </button>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    variant: { type: String, default: 'primary' }
});

const buttonClasses = computed(() => {
    const base = 'px-6 py-3 font-semibold rounded-lg transition';
    const variants = {
        primary: 'bg-blue-500 text-white hover:bg-blue-600',
        secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
    };
    return `${base} ${variants[props.variant]}`;
});
</script>
                    

Terminal - Vue + Bootstrap

# Install Bootstrap-Vue-Next (for Vue 3)
npm install bootstrap bootstrap-vue-next

# In main.js
import { createApp } from 'vue'
import { createBootstrap } from 'bootstrap-vue-next'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

const app = createApp(App)
app.use(createBootstrap())
app.mount('#app')

Angular Integration

Terminal - Angular + Tailwind

# Create Angular app
ng new my-angular-app
cd my-angular-app

# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Configure tailwind.config.js
# content: ["./src/**/*.{html,ts}"]

# Add to src/styles.css
# @tailwind base; @tailwind components; @tailwind utilities;

ng serve

button.component.ts - Angular Component TS

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-button',
    template: `
        <button [ngClass]="buttonClasses">
            <ng-content></ng-content>
        </button>
    `
})
export class ButtonComponent {
    @Input() variant: 'primary' | 'secondary' = 'primary';

    get buttonClasses(): string {
        const base = 'px-6 py-3 font-semibold rounded-lg transition';
        const variants = {
            primary: 'bg-blue-500 text-white hover:bg-blue-600',
            secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
        };
        return `${base} ${variants[this.variant]}`;
    }
}

Terminal - Angular + Bootstrap

# Install ng-bootstrap (Angular-native Bootstrap)
ng add @ng-bootstrap/ng-bootstrap

# Or install Bootstrap manually
npm install bootstrap

# Add to angular.json in styles array
"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

                                
                                
                                
                            
app.component.html - ng-bootstrapHTML

<!-- Using ng-bootstrap components -->
<div class="container mt-4">
    <ngb-alert type="success">
        This is a success alert!
    </ngb-alert>
    
    <button class="btn btn-primary" 
            (click)="open(content)">
        Open Modal
    </button>
    
    <ng-template #content let-modal>
        <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal content here
        </div>
    </ng-template>
</div>
                    

Django Integration

Terminal - Django + Tailwind

# Install django-tailwind
pip install django-tailwind

# Add to INSTALLED_APPS in settings.py
INSTALLED_APPS = [
    ...
    'tailwind',
    'theme',  # Your tailwind theme app
]

# Initialize tailwind
python manage.py tailwind init

# Install dependencies
python manage.py tailwind install

# Start tailwind in development
python manage.py tailwind start

                                
                                
                                
                            
base.html - Django Template with TailwindHTML

{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Django + Tailwind{% endblock %}</title>
    
    <!-- Load Tailwind CSS -->
    {% tailwind_css %}
</head>
<body class="bg-gray-100 min-h-screen">
    
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-4">
            <a href="{% url 'home' %}" class="text-2xl font-bold text-blue-600">
                My Django App
            </a>
        </div>
    </nav>
    
    <main class="container mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </main>
    
</body>
</html>
                    

                                
                                
                                
                            
base.html - Django Template with Bootstrap CDNHTML

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Django + Bootstrap{% endblock %}</title>
    
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">My App</a>
        </div>
    </nav>
    
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
                    

Terminal - Django Crispy Forms with Bootstrap

# Install crispy-bootstrap5 for beautiful Django forms
pip install django-crispy-forms crispy-bootstrap5

# Add to settings.py
INSTALLED_APPS = [
    ...
    'crispy_forms',
    'crispy_bootstrap5',
]

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"

                                
                                
                                
                            
form_template.html - Crispy Forms UsageHTML

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4>Contact Form</h4>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button type="submit" class="btn btn-primary w-100">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
                    

✅ Framework Integration Summary

React: react-bootstrap or className with Tailwind
Vue: bootstrap-vue-next or class binding with Tailwind
Angular: ng-bootstrap or ngClass with Tailwind
Django: django-tailwind or CDN + crispy-forms

11

Bootstrap vs Tailwind

Comparison Table

Feature	Tailwind CSS	Bootstrap
Approach	Utility-first	Component-based
Learning Curve	Steeper initially	Easier to start
Customization	Highly customizable	Limited without Sass
File Size (Production)	~10-20KB (purged)	~150-200KB
Pre-built Components	None (build your own)	50+ components
JavaScript	None included	Included (modals, etc.)
Design Flexibility	Unlimited	Bootstrap "look"
Best For	Custom designs	Rapid prototyping
Documentation	Excellent	Excellent
Community	Growing fast	Largest

When to Choose Which?

Choose Tailwind When:

✓ Building custom, unique designs
✓ Working on large-scale applications
✓ You want smallest possible CSS
✓ Team prefers utility classes
✓ Design system is custom

Choose Bootstrap When:

✓ Rapid prototyping needed
✓ Standard UI is acceptable
✓ JavaScript components needed
✓ Team knows Bootstrap
✓ Admin dashboards & forms

💡 Pro Tip

You can actually use both together! Use Bootstrap components for complex JavaScript functionality (modals, carousels) and Tailwind for custom styling. Just be careful about conflicting class names.

12

Best Practices

Tailwind Best Practices

1

Extract Components

When you repeat the same utility combinations, extract them into components or use @apply in CSS

2

Use Configuration File

Define your design system (colors, fonts, spacing) in tailwind.config.js for consistency

3

Enable JIT Mode

Use Just-in-Time compilation for faster builds and arbitrary value support

4

Use Plugins

Leverage official plugins like @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio

tailwind-best-practices.css CSS

/* Extract reusable components with @apply */
@layer components {
    .btn {
        @apply px-6 py-3 font-semibold rounded-lg transition duration-300;
    }
    
    .btn-primary {
        @apply btn bg-blue-500 text-white hover:bg-blue-600;
    }
    
    .btn-secondary {
        @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-lg overflow-hidden;
    }
    
    .input {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg
               focus:outline-none focus:ring-2 focus:ring-blue-500 
               focus:border-transparent transition;
    }
}

/* Custom utilities */
@layer utilities {
    .text-gradient {
        @apply bg-gradient-to-r from-blue-500 to-purple-500 
               bg-clip-text text-transparent;
    }
}

Bootstrap Best Practices

1

Customize with Sass

Use Sass variables to customize Bootstrap instead of overriding CSS

2

Import Only What You Need

Import individual components to reduce file size instead of the full bundle

3

Use Utility Classes

Bootstrap 5 has utility classes (spacing, display, flex) - use them!

4

Don't Override Too Much

If you're overriding everything, consider Tailwind instead

custom-bootstrap.scss SCSS

// Custom Bootstrap Theme with Sass

// 1. Override variables BEFORE importing Bootstrap
$primary: #667eea;
$secondary: #764ba2;
$success: #10b981;
$danger: #ef4444;

$font-family-base: 'Inter', sans-serif;
$border-radius: 0.75rem;
$border-radius-lg: 1rem;

// 2. Import Bootstrap
@import "~bootstrap/scss/bootstrap";

// 3. Add custom styles AFTER importing
.btn {
    font-weight: 600;
    letter-spacing: 0.025em;
}

.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

selective-import.scss SCSS

// Import only what you need for smaller bundle

// Required
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

// Optional - only import what you use
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

✅ General Best Practices

✓ Always use a mobile-first approach
✓ Keep accessibility in mind (ARIA, contrast)
✓ Test on real devices, not just browser resize
✓ Use semantic HTML with framework classes
✓ Document your component patterns
✓ Keep consistency across your project
✓ Optimize for production (minify, purge unused CSS)
✓ Use version control for your config files

⚠️ Common Mistakes to Avoid

✗ Don't mix multiple CSS frameworks carelessly
✗ Don't write custom CSS when utilities exist
✗ Don't ignore responsive design
✗ Don't forget to purge unused CSS in production
✗ Don't override framework styles excessively
✗ Don't skip reading documentation

CSS Frameworks: Tailwind & Bootstrap

What You'll Learn

Introduction to CSS Frameworks

💡 Why Use CSS Frameworks?

Tailwind CSS

Bootstrap

What is Bootstrap?

Bootstrap Overview

🎯 Bootstrap Features

Bootstrap Setup & CDN

CDN Installation (Quick Start)

NPM Installation

Bootstrap Components

Common Components

Bootstrap Grid System

12-Column Grid

Grid Breakpoints

What is Tailwind CSS?

Tailwind CSS Overview

🎯 Tailwind Philosophy

Tailwind Setup & CDN

CDN Installation (Quick Start)

⚠️ CDN Limitations

NPM Installation (Recommended)

Tailwind Utility Classes

Core Utilities

Building Components

Tailwind Responsive Design

Responsive Breakpoints

📱 Mobile-First Approach

Breakpoint Reference

React, Vue, Angular & Django

React Integration

Tailwind CSS with React

Vue.js Integration

Angular Integration

Django Integration

✅ Framework Integration Summary

Bootstrap vs Tailwind

Comparison Table

When to Choose Which?

Choose Tailwind When:

Choose Bootstrap When:

💡 Pro Tip

Best Practices

Tailwind Best Practices

Extract Components

Use Configuration File

Enable JIT Mode

Use Plugins

Bootstrap Best Practices

Customize with Sass

Import Only What You Need

Use Utility Classes

Don't Override Too Much

✅ General Best Practices

⚠️ Common Mistakes to Avoid

🚀 You're Ready to Build!