This repository contains two different approaches to using Tailwind CSS. Learn both methods and understand when to use each one!
UsingCDN/
└── index.html
What is it? A standalone HTML file that loads Tailwind CSS directly from a CDN (Content Delivery Network).
How it works:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>Best for:
- ✅ Quick prototypes and experiments
- ✅ Static websites or landing pages
- ✅ Learning Tailwind basics without setup
- ✅ Small projects that don't need build optimization
- ✅ Beginners who want instant results
Pros:
- No installation required
- No build process
- Works instantly in any browser
- Perfect for quick testing
Cons:
- Larger file sizes (includes all Tailwind utilities)
- Slower performance on production
- No customization beyond inline config
- Can't optimize unused styles
UsingVite/
├── src/
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
│ └── assets/
├── package.json
├── vite.config.js
├── tailwind.config.js
└── index.html
What is it? A full React application with Tailwind CSS configured for production, bundled with Vite.
Tech Stack:
- React (UI library)
- Vite (build tool - super fast!)
- Tailwind CSS (with proper optimization)
- PostCSS (for CSS processing)
Best for:
- ✅ Real-world applications
- ✅ Complex projects with multiple components
- ✅ When you need performance optimization
- ✅ Professional/production environments
- ✅ Learning React + Tailwind together
Pros:
- Only includes CSS you actually use (tree-shaking)
- Fast development server (HMR - Hot Module Replacement)
- Optimized production builds
- Full customization via
tailwind.config.js - Works with component frameworks (React, Vue, etc.)
- Easier to maintain large codebases
Cons:
- Requires Node.js and npm installation
- Needs build/compile step
- More configuration files to understand
- Slightly steeper learning curve
# Just open UsingCDN/index.html in your browser
# That's it! No setup needed.# Navigate to the UsingVite folder
cd UsingVite
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5173 in your browser| Feature | CDN | Vite |
|---|---|---|
| Setup Time | Instant ⚡ | 2 minutes ⏱️ |
| File Size | Large (~150KB) | Small (~15KB) |
| Performance | Slow 🐌 | Fast 🚀 |
| Customization | Limited | Full |
| Production Ready | ❌ No | ✅ Yes |
| Learning Curve | Easy | Medium |
| Best For | Prototypes | Real Projects |
- Are just learning Tailwind for the first time
- Want to see results immediately
- Are building a simple landing page
- Don't have Node.js installed
- Want to experiment without setup
- Are building a real web application
- Want optimized, production-ready code
- Need component reusability
- Are learning React
- Care about performance and bundle size
- Tailwind CSS Docs - Complete official guide
- React Docs - React fundamentals
- Vite Docs - Fast build tool guide
- Tailwind Sandbox - Official sandbox
- Tailwind Play - Quick experiments
- CodePen - Create and share examples
- JSFiddle - Test HTML/CSS/JS online
- Tailwind UI - Premium components
- Headless UI - Unstyled components
- DaisyUI - Pre-built components
- Flowbite - Open-source component library
- Shadcn/ui - Modern component library
- Tailwind CSS Tutorial - YouTube - Various creators
- Vite & React Setup - Build process tutorials
- Dev.to Tailwind Posts - Community articles
- CSS Tricks - Advanced CSS techniques
- Web Dev by Google - Best practices
- Tailwind CSS IntelliSense - VS Code extension (auto-complete)
- Tailwind CSS Color Generator - Generate custom colors
- Pico CSS - Minimal CSS framework alternative
- Looka Logo Maker - Design inspiration
# No commands needed - just open index.html in a browser# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview- Explore CDN version first - Understand Tailwind basics
- Experiment in playgrounds - Try ideas quickly
- Move to Vite - Build a real project
- Check component libraries - Speed up development
- Optimize & deploy - Make it production-ready
- Start with simple layouts
- Use
py-4,px-4for padding before responsive sizes - Learn breakpoints:
sm:,md:,lg:,xl: - Use the Tailwind Play tool for quick testing
- Customize
tailwind.config.jsfor your brand colors - Create reusable components in React
- Use VS Code Tailwind extension for better auto-complete
- Check console for any build warnings
- Use
@applyin CSS for repeated class combinations - Extract components when you repeat the same classes
- Customize config instead of fighting Tailwind
- Mobile-first approach - Start with mobile, then
md:,lg: - Use spacing scale consistently throughout your project
Feel free to modify, experiment, and share what you learn!
- Check official docs first
- Search existing issues/solutions
- Ask in development communities
Happy coding! 🚀 Enjoy learning Tailwind CSS!
Last Updated: April 2026 Perfect for beginners to intermediate learners