Introduction to Tailwind CSS
Understand what Tailwind CSS is and why developers use utility-first CSS.
Learning approach
Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.
Tailwind Example
HTML + Tailwind CSS
<div class="p-6 bg-slate-900 text-white rounded-2xl">
<h2 class="text-2xl font-bold">
Hello Tailwind CSS
</h2>
<p class="mt-2 text-slate-300">
Build modern interfaces using utility classes.
</p>
</div>
Live Preview
Your Tailwind design will appear here.
Click Run Preview
See the lesson example here.
Test your understanding
Choose the best answer.
What is Tailwind CSS?