Min-Width, Max-Width, Min-Height, and Max-Height in Tailwind CSS
In Tailwind CSS, you can set the minimum width of an element by using the following utilities: min-w-0 min-w-full min-w-min min-w-max min-w-fit To set the maximum width for an element, use max-w-{value}. Value can be 0,…
Tailwind CSS: Styling Hover, Active, and Visited Links
In Tailwind CSS, you can style links differently based on what state they are in (hover, active, and visited) by using the following pseudo-class modifiers: hover: used for a link when the user mouse is over…
Tailwind CSS: How to Create a Responsive Layout
This succinct, practical article 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…
How to Add a Drop Shadow to a PNG Image
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…
How to Create Semi Circles in Tailwind CSS
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: Align a child element to the bottom of its parent
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
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
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
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
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…
Tailwind CSS: Styling the First Letter of Content
In Tailwind CSS, you can apply special styles for the first letter of content by combining the first-letter modifier with other text utility classes, like this: A complete example This example makes the first letter of…
Tailwind CSS: Removing the Outline of a Text Input on Focus
On Chrome and some web browsers, when an input element or a textarea is focused, you’ll see a blue border around that element. In Tailwind CSS, you can remove it by using the focus modifier and…
