Tailwind css tutorial Hindi #2 tailwind css with CND setup

How we will learn it

• Setup (CND, with Node and NPM)

• Basics

• Basic Page Development

• Customizing Tailwind

• Responsive UI

• Task and Project

• Interview question

• Tailwind with React and angular

Prerequisite for Tailwind CSS

• Just Basic Understanding of HTML and CSS

Install Node.js, then Composer globally: composer global require laravel/installer. Create project with laravel new my-app (pick React kit), cd my-app, npm install && npm run dev.​

Open VS Code, run php artisan serve—your Tailwind-styled app loads at localhost:8000 with login pages ready.​

Basics

Understand folder structure: Laravel backend in app/Http, React in resources/js/Pages (like Auth/Login.tsx), Tailwind in resources/css/app.css with @tailwind base; @tailwind components; @tailwind utilities;.​

Key files: app.tsx (main React entry), tailwind.config.js for custom colors/fonts.​

Practice by editing resources/js/Pages/Dashboard.tsx—add <div className="p-8 bg-blue-100">Hello Tailwind!</div> and see live changes with npm run dev.​

Basic Page Development

Create a new page: Add route in routes/web.php (Route::inertia('/about', 'About');), make resources/js/Pages/About.tsx with Tailwind: <div className="min-h-screen bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center"><h1 className="text-4xl font-bold text-white">About Page</h1></div>.​

Inertia auto-handles navigation—no API calls needed.​

Customizing Tailwind

Edit tailwind.config.js: Add colors like theme: { extend: { colors: { primary: '#3B82F6' } } }, then use bg-primary p-6 in JSX.

​Create custom components: npx shadcn@latest add card, import <Card className="max-w-md mx-auto mt-10"> for styled boxes.​

Responsive UI

Tailwind's mobile-first: Use sm:text-lg md:text-xl lg:text-2xl for text scaling, flex flex-col md:flex-row for layouts that stack on phone but side-by-side on desktop.​

Test with browser dev tools (toggle device sizes)—add dark:bg-gray-800 dark:text-white for dark mode toggle.​

Tasks and Projects

Task 1: Style login form with input:border-2 border-gray-300 focus:border-blue-500 rounded-lg px-4 py-2.

Task 2: Build dashboard cards grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6.

Project: Todo app—add form, list with hover:bg-gray-50 transition-all, delete buttons.