Top 10 Tailwind CSS Classes to Get Started
Tailwind CSS is a utility-first CSS framework that allows developers to build custom designs directly in their HTML. If you’re new to Tailwind, diving into its extensive class library can feel overwhelming.
When I was developing LiveAPI, we had to use TailwindCSS for setting up the UI. So I had the learn Tailwind CSS and use it everywhere, through this journey I have noted down the 10 most important tailwind classes which you need to note down.
1. flex
The flex class is used to create a flex container, enabling you to control the alignment and spacing of child elements easily. Pair it with classes like justify-center and items-center for precise alignment.
Example:
<div class="flex justify-center items-center h-screen">
<p class="text-center">Hello, Tailwind!</p>
</div>
2. grid
The grid class is used to create a grid container, offering a robust way to design responsive layouts. You can pair it with grid-cols-2, grid-cols-3, and more to define the number of columns.
Example:
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-blue-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
</div>
3. p and m (Padding and Margin)
Padding (p) and margin (m) classes make spacing adjustments straightforward. For example, p-4 adds padding, and m-4 adds margin.
Example:
<div class="p-4 m-4 bg-gray-200">
<p>This box has padding and margin.</p>
</div>
4. bg (Background)
The bg class lets you set background colors. You can use predefined colors like bg-red-500 or gradients such as bg-gradient-to-r.
Example:
<div class="bg-green-500 text-white p-4">
Success message!
</div>
5. text (Typography)
The text class is essential for controlling font size, color, and alignment. For instance, text-xl makes text larger, and text-center centers it.
Example:
<h1 class="text-2xl font-bold text-center">Welcome to Tailwind</h1>
6. rounded (Border Radius)
The rounded class is used to add rounded corners to elements. You can adjust the radius with modifiers like rounded-lg or rounded-full.
Example:
<img src="avatar.jpg" class="rounded-full w-16 h-16" alt="Avatar">
7. shadow (Box Shadow)
Add depth to your design with the shadow class. You can use variants like shadow-md or shadow-lg for different intensities.
Example:
<div class="shadow-lg p-4 bg-white">
<p>Box with shadow</p>
</div>
8. h and w (Height and Width)
Control the dimensions of elements using h (height) and w (width) classes. For example, h-64 sets the height, and w-full makes the element take the full width.
Example:
<div class="h-64 w-64 bg-gray-300">
Sized box
</div>
9. flex-wrap and gap
The flex-wrap class ensures that items in a flex container wrap onto the next line when necessary. The gap class adds consistent spacing between items.
Example:
<div class="flex flex-wrap gap-4">
<div class="p-4 bg-blue-400">Item 1</div>
<div class="p-4 bg-blue-400">Item 2</div>
<div class="p-4 bg-blue-400">Item 3</div>
</div>
10. hover (Hover States)
Tailwind makes it simple to define hover states. For example, hover:bg-blue-700 changes the background color when the user hovers over an element.
Example:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Hover me
</button>
Final Thoughts
These 10 Tailwind CSS classes will give you a solid foundation to start building beautiful and responsive designs. Once you’re comfortable with these basics, you can explore more advanced utilities to fully unlock Tailwind’s potential. Happy coding!
I was inspired to take up TailwindCSS when I started working on LiveAPI. Feel free to try it out to see what I have done so far with TailwindCSS.
LiveAPI Allows you to effortlessly generate API documentations instantly, all you need to do is just connect your Git Repository and LiveAPI will generative Interactive, use-to-use documentation.
Top comments (0)