Tailwind CSS: Create a Floating Input Label (Simplest Way)
A floating input label is a label that looks like a text placeholder when the associated input field is empty. As soon as you enter something into the input field, the label will move upwards. The…
Tailwind CSS: Create an Animated & Closable Side Menu
The example below shows you how to create an animated and closeable side navigation menu with Tailwind CSS and a little vanilla Javascript (just a few lines). Our side navigation works well on both large screens…
Text Overflow in Tailwind CSS (with Examples)
In Tailwind CSS, you can specify how hidden overflow text should be signaled to users by using the following utility classes: truncate: Truncate the overflow content and automatically add an ellipsis (…) as needed text-ellipsis: Display…
Tailwind CSS: How to Center a Fixed Element
This short and straight-to-the-point article shows you a couple of different ways to center an element whose position is set to fixed in Tailwind CSS. Using position and translating utilities 1. To center a fixed element…
Tailwind CSS: How to set font size with an arbitrary value
Tailwind CSS provides utility classes for setting the font size of text with fixed values: text-xs, text-sm, text-base, text-lg, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, and text-9xl. However, you can use an arbitrary font size…
Tailwind CSS: How to Create a Hoverable Dropdown Menu
This concise article shows you how to create a hover dropdown menu with Tailwind CSS. No Javascript code is required. A dropdown menu is a toggleable menu that allows the user to select an option or…
Tailwind CSS: How to Create a Black-and-White Image
In Tailwind CSS, you can create a black-and-white image from a full-color image by adding the grayscale utility class to its parent (a <div> element is nice). To remove this effect dynamically (hover, active, etc), use…
How to Rotate an Element in Tailwind CSS
In Tailwind CSS, you can rotate an element by using rotate-{value} utility classes. At the time of writing, there are nine preset utility classes: rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12 rotate-45 rotate-90 rotate-180 However, you can…
Tailwind CSS: Use a Checkbox to Show/Hide an Element
This concise and straightforward article shows you how to check/uncheck a checkbox to show/hide another element. We’ll only use Tailwind CSS to get things done. No Javascript is required. What is the point? Tailwind CSS offers…
Tailwind CSS: Style an element that has no content
In Tailwind CSS, you can apply some styles for elements that have no content by using the empty modifier (a modifier is just a prefix for a utility class). Example This example displays some boxes. Boxes…
Tailwind CSS: Create a horizontal line with text in the middle
This concise article walks you through a couple of examples of creating horizontal lines with text in the middle. We’ll use the latest version of Tailwind CSS to style things. Example 1: Using Divs with a…
CSS: How to Center an Element with Fixed Position
There might be cases where you want to center an element whose position is fixed (e.g., you need to implement a modal dialog or a floating button, etc). 1. If you need to center the fixed…