4 useful snippets for tailwindcss
Tags: tailwindcss, css, webdev, html
Published: 2019-09-20 12:20:56

---
title: 4 useful snippets for tailwindcss
published: true
description: Use this 4 snippets to speed up your development process with tailwindcss
tags: tailwindcss, css, webdev, html
cover_image: https://i.imgur.com/E03fhj2.png
canonical_url: https://maurogarcia.dev/maurogarcia.dev/posts/4-useful-snippets-for-tailwindcss/
---
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](https://tailwindcss.com/docs/responsive-design/).

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
![3 column responsive grid](https://i.imgur.com/6G99al3.gif)
```html
<!-- 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 column grid](https://i.imgur.com/UTd9nQ2.gif)

## 2- Three column cards grid
![3 column cards grid](https://i.imgur.com/Ux9Quer.gif)
```html
<!-- 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-cover`utility 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](https://tailwindcss.com/docs/object-position/#app) utilities

# 3- Colorful notes
{% codepen https://codepen.io/maurogarcia0209/pen/VwZGKZE %}
```html
<!-- 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
{% codepen https://codepen.io/maurogarcia0209/pen/XWrPjgE %}
```html
<!-- 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?