Tailwind CSS Tutorial

Tailwind CSS is a CSS framework that gives you thousands of small, ready-made classes. You style a page by adding these classes straight to your HTML, instead of writing your own CSS rules.

For example, bg-cyan-500 gives a cyan background, p-4 adds padding and rounded-lg rounds the corners. You combine small classes to build any design.

Why Learn Tailwind CSS?

• It is one of the most popular ways to style modern websites and apps
• You build designs quickly without switching between HTML and CSS files
• Every spacing, colour and size comes from one consistent scale, so pages look neat
• It works with React, Next.js, Vue, Laravel and plain HTML
• Many front-end jobs and freelance projects ask for it

You should know basic HTML and CSS before you start. Tailwind classes are just a short way of writing CSS, so CSS knowledge helps you understand every class.

Try It Yourself

The examples load Tailwind from a CDN, so they run straight away in the Try it editor. Change bg-cyan-500 to bg-pink-500 and click Run.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-6">

<div class="bg-cyan-500 text-white p-6 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold">Hello, Tailwind!</h1>
  <p class="mt-2">This card is styled only with classes.</p>
</div>

</body>
</html>

What You Will Learn

• How to add Tailwind to a page, and how utility classes work
• Colours, borders, shadows and text styling
• Spacing and sizes with the Tailwind scale
• Layouts with Flexbox and Grid
• Responsive designs for phones, tablets and laptops
• Hover and focus effects, transitions and dark mode

What to Learn Next

After Tailwind, compare it with Bootstrap, another popular framework, and learn JavaScript to make your Tailwind pages interactive.