I decided to write this article to show you how simple is to build awesome UI components with tailwindcss. No custom CSS required.

"But what about the media queries required to make my components responsive?". Forget about media queries. tailwindcss has an amazing set of responsive utility variants.

I'm gonna show you 4 useful snippets that will help you speed up your development process while building your interfaces with tailwind.

Avoid code duplication with reusable components

There are some scenarios where you could think: "Too much duplicated code". But if you are working with any modern JS frameworks like Angular, React or Vue, you will easily reduce the duplicated code by extracting reusable components. More about this topic coming on next posts.

Responsive grids

1- Three column grid

<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="bg-yellow-500 p-4">
            Your content here...
        </div>
    </div>
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="bg-yellow-500 p-4">
            Your content here...
        </div>
    </div>
    ...
</div>

I'm using the following utilities for each grid element:

w-full will apply width: 100%
md:w-1/2 will apply width: 50% at medium screen sizes and above
lg:w-1/3 will apply width: 33,33% at large screen sizes and above

Two column grid

Let's say we only want to show 2 columns per row. In that case, there's a small change we need to do to our code. Essentially, we need to remove the lg:w-1/3 utility. In that way, each item will apply width:50% at medium screen sizes and above.

2- Three column cards grid

<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="shadow-md bg-white">
            <img class="h-48 w-full object-cover" src="https://your-image-url.jpg" alt="">
            <div class="flex flex-col p-4">
                <p class="text-lg">Your title here...</p>
                <p class="text-gray-600">Your description here...</p>
                <button class="self-end mt-4">Show more...</button>
            </div>
        </div>
    </div>
    ...
</div>

I'm using object-coverutility on images to resize the element's content to cover its container.
If you need to change your image position within it's container, checkout the Object Position utilities

3- Colorful notes

<!-- Orange note -->
<div class="bg-orange-100 text-orange-500 border-l-8 border-orange-500 p-4 mb-2">
    <p class="font-bold">Note</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>

4- Buttons

<!-- Simple button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
<!-- Outline button -->
<button class="hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mb-2">Button</button>
<!-- Simple button with icon -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
    <span>Button</span>
</button>

I'm using hover:bg-blue-700 to apply a different background color for hover state

Have you tried tailwindcss? How was your experience with it?

Blog

4 useful snippets for tailwindcss

Mauro Garcia