Tailwind CSS: How to Create a Responsive Layout

May 16, 2022 Pennywise

This article is shows you how to create responsive and adaptive user interfaces in Tailwind CSS. Overview You can style responsive elements by using the following mobile-first breakpoint prefix system: Breakpoint Prefix Minimum width sm 640px…

How to Add a Drop Shadow to a PNG Image

May 16, 2022 Pennywise

In Tailwind CSS, you can add a drop shadow to a PNG image (the shadow will depend on the shape of the PNG’s content) by using one of the following utility classes: drop-shadow-sm drop-shadow drop-shadow-md drop-shadow-lg…

Tailwind CSS: How to Create Parallax Scrolling Effect

May 13, 2022 Pennywise

Parallax is an effect where the background content (e.g. an image) stays fixed or moves at a different speed than the foreground content while scrolling. With Tailwind CSS, we can create a parallax effect by using…

Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)

May 13, 2022 Pennywise

The example below shows you how to create skeleton loading placeholders with Tailwind CSS. The main point here is to use the animate-pulse utility class to make things shimmer. Example Preview: The code: You can modify…

Tailwind CSS: Align an element to the left/right of its parent

May 13, 2022 Pennywise

In Tailwind CSS, you can align a child element to the left or right side of its parent div by using the mr-auto or ml-auto utility class, respectively (we also add the flex utility to the…

How to Create Semi Circles in Tailwind CSS

May 13, 2022 Pennywise

With Tailwind CSS, you can create a semicircle by creating a rectangle twice as long as it’s wide, then rounding the two corners using the following utility classes: rounded-tf-full, rounded-tr -full, rounded-br-full, rounded-bl-full. Example Screenshot: The…

Tailwind CSS: Create Buttons with Text and Icons Inside

May 12, 2022 Pennywise

By using Tailwind CSS, you can easily create beautiful, professional buttons with text and icons inside. For the vast majority of use cases, we can do like so: The flex and items-center utility classes help align…

Tailwind CSS: Align a child element to the bottom of its parent

May 12, 2022 Pennywise

In Tailwind CSS, we can align a child element to the bottom of its parent div by doing the following: Add the flex and flex-col classes to the parent Add the mt-auto class to the child…

Tailwind CSS: Create a Search Field with an Icon Inside

May 12, 2022 Pennywise

This article walks you through a couple of examples that show you how to create a search input with an icon inside by using Tailwind CSS. Here’s the SVG we’ll use to display a magnifier icon…

Tailwind CSS: How to Create a Skewed Card

May 12, 2022 Pennywise

This short and straight-to-the-point article shows you how to create skewed cards in Tailwind CSS. A Quick Note To skew an element, you can use skew-x-{amount} and/or skew-y-{amount} utility classes. {amount} can be 0, 1, 2,…

Tailwind CSS: Make a Child Element Fill the Remaining Space

May 11, 2022 A Goodman

In Tailwind CSS, you can use the flex-1 or grow utility class to force a child element to fill the remaining space on the main axis of a flex container. The child element will expand as…

Text Decoration in Tailwind CSS: The Complete Guide

May 11, 2022 Pennywise

This article covers everything you need to know about text decoration in Tailwind CSS. Setting the kind of text decoration In Tailwind CSS, you can set the kind of text decoration (like underline, overline, line-through) by…

1 2 3 5