How to Style the HR Element with Tailwind CSS
An HTML <hr/> tag creates a horizontal ruler/line to separate sections of your webpage. In order to style a <hr> element, we can use border-* utility classes provided by Tailwind CSS. Utilities in terms of size…
How to Create Product Cards with Tailwind CSS
The example below shows you how to create a modern product card with Tailwind CSS. It contains a product image, product name, offers and warranties, prices and promotions, a button to add to the shopping cart,…
How to Create Triangles with Tailwind CSS (4 Examples)
This practical article walks you through four examples of creating triangles with Tailwind CSS. Example 1: Triangle Left Screenshot: The code: Example 2: Triangle Up It closely resembles a cone. Screenshot: The code: Example 3: Triangle…
Tailwind CSS: Expand a Text Input on Focus (without Javascript)
The example below shows you how to create an animated text field that can expand its width on focus (and shrink when losing focus). We’ll achieve this thing with only Tailwind CSS. No Javascript code is…
Tailwind CSS: How to Disable Resizing of Textarea
In Tailwind CSS, you can prevent a <textarea> from being resized by using the resize-none utility class. When the textarea is unresizable, the resizer icon will disappear as well. Example: Screenshot: Further reading: Using Tailwind CSS…
Tailwind CSS: How to Disable Text Selection
In Tailwind CSS, you can prevent text from being selected by using the select-none utility class. Example: The code: Further reading: Using Tailwind CSS with Font Awesome Icons: A Deep Dive Tailwind CSS: Create a Responsive…
Tailwind CSS: How to Create a Vertical Divider Line
The example below shows you how to create a vertical line that splits a web page into two equal parts. Screenshot: The code: Further reading: Using Tailwind CSS with Font Awesome Icons: A Deep Dive Tailwind…
Using Tailwind CSS with Font Awesome Icons: A Deep Dive
Tailwind CSS is a popular CSS framework that can help you style your website without leaving your HTML code. Font Awesome is one of the most used icon kits ever. Using them together can improve the…
Tailwind CSS: Create a Responsive Top Navigation Menu
This succinct, practical article walks you through a complete example of creating a responsive top navigation menu with Tailwind CSS and a little vanilla Javascript (just a few lines of Javascript code). Without any further ado,…
How to Create Pill Buttons with Tailwind CSS
This concise, straightforward article shows you how to create pill buttons with Tailwind CSS. The most important point here is to use rounded-full utility classes to create rounded corners like pills. Screenshot: The code: Further reading:…
Tailwind CSS: How to Create a Stepper
When building modern websites, there may be cases where users have to complete several steps in a process (registration and authentication process, ordering and payment process, etc). To increase visibility and improve user experience, adding a…
Using :not() selector in Tailwind CSS (2022)
In CSS, you can use the :not() pseudo-class to style elements that do NOT match one or multiple specified elements/selectors. In Tailwind CSS 3.1 (released in June 2022) and newer, you can do the equivalent thing…
