How to Use Tailwind CSS: A Practical Beginner’s Tutorial
Tailwind CSS is a utility-first framework that lets you style interfaces directly in your HTML. Instead of writing custom CSS, you compose small classes like flex, p-4, and text-blue-600. This guide shows the fastest way to set it up and use it in a real project.
1. Install and Configure Tailwind
Create a project and install Tailwind via npm. For Tailwind v3, run npm install -D tailwindcss and npx tailwindcss init. Then open tailwind.config.js and add your template paths to the content array, such as "./src/**/*.{html,js}".
2. Add Tailwind to Your CSS
Create a CSS file and import the three core layers:
@tailwind base;@tailwind components;@tailwind utilities;
Run the Tailwind CLI to scan your files and generate the final stylesheet, or add it to your build tool like Vite, Next.js, or PostCSS.
3. Use Utility Classes in HTML
Apply classes directly to elements. For example, a card might use bg-white p-6 rounded-lg shadow-md.
Responsive and State Variants
Add responsive prefixes like md:flex and state variants like hover:bg-blue-700. Tailwind only includes classes you actually use in production.
4. Reuse Styles with @apply
For repeated patterns, create component classes in CSS with @apply. This keeps markup cleaner while preserving Tailwind’s utility system.
Tailwind CSS speeds up development once you learn its class names. Start small, use the docs, and build a consistent design system without leaving your HTML.
