Make websites look awesome with magical style codes!
<div class="bg-blue-500
text-white p-6
rounded-lg shadow-lg">
Wow! So colorful!
</div>Tailwind is like a magic paintbox for websites! It has hundreds of ready-made styles that you can mix and match to create amazing designs.
Change colors, sizes, and shapes with simple codes like magic spells!
Create beautiful designs in minutes, not hours!
Combine different styles like building blocks to make something unique!
It's easy peasy! Just add special class names to your HTML tags.
Begin with a simple HTML element, like a div. It's like a plain box!
<div>
I'm a plain box!
</div><div class="bg-blue-500
text-white p-4
rounded-lg">
I'm a styled box!
</div>Add Tailwind classes to change colors, add padding, round corners, and more!
Your plain box transforms into something awesome instantly!
<div class="bg-purple-500
text-yellow-200 p-6
rounded-xl shadow-lg
border-4 border-yellow-400
rotate-2">
I'm amazing! 🎉
</div>Click the buttons to change how the box looks. See Tailwind magic in action!
Look at me! 😎
<div class="bg-blue-500 p-4 rounded-lg">
Look at me! 😎
</div>Test your Tailwind knowledge! Choose the best answer.
Want to become a style master? Check out these cool resources!
Visit the home of Tailwind for cool tools, examples, and playgrounds!
Learn all the Tailwind magic words and how to use them!
Experiment with Tailwind styles in a safe, fun environment!
See how Tailwind is made and meet the people behind it!