Tailwind CSS Tutorial - Getting Started

Tailwind CSS

Utility-first CSS framework. Style elements with class names.

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold">Hello</h1>
    <p class="mt-2">Tailwind is awesome</p>
</div>

Responsive

<div class="w-full md:w-1/2 lg:w-1/3">
    Responsive width
</div>

Summary

  • Use utility classes directly in HTML
  • Responsive with sm:, md:, lg:, xl: prefixes
← Regex Tutorial - Patterns and Sass Tutorial - Getting Starte β†’