Posted on • Edited on • Originally published atmaurogarcia.dev
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 ofresponsive 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 --><divclass="flex flex-wrap mt-2 mx-2"><!-- Item --><divclass="w-full md:w-1/2 lg:w-1/3 px-2 my-2"><divclass="bg-yellow-500 p-4"> Your content here...</div></div><!-- Item --><divclass="w-full md:w-1/2 lg:w-1/3 px-2 my-2"><divclass="bg-yellow-500 p-4"> Your content here...</div></div> ...</div>I'm using the following utilities for each grid element:
w-fullwill apply width: 100%md:w-1/2will apply width: 50% at medium screen sizes and abovelg:w-1/3will 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 thelg: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 --><divclass="flex flex-wrap mt-2 mx-2"><!-- Item --><divclass="w-full md:w-1/2 lg:w-1/3 px-2 my-2"><divclass="shadow-md bg-white"><imgclass="h-48 w-full object-cover"src="https://your-image-url.jpg"alt=""><divclass="flex flex-col p-4"><pclass="text-lg">Your title here...</p><pclass="text-gray-600">Your description here...</p><buttonclass="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 theObject Position utilities
3- Colorful notes
<!-- Orange note --><divclass="bg-orange-100 text-orange-500 border-l-8 border-orange-500 p-4 mb-2"><pclass="font-bold">Note</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p></div>4- Buttons
<!-- Simple button --><buttonclass="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button><!-- Outline button --><buttonclass="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 --><buttonclass="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"width="24"height="24"><pathclass="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-700to apply a different background color for hover state
Have you tried tailwindcss? How was your experience with it?
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
