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
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 – a long time ago) and newer, you…
Full-Screen Search Box with Tailwind CSS
The example below shows you how to create a full-screen search box with Tailwind CSS and a few lines of vanilla Javascript (it’s totally fine if you don’t have much experience with this programming language). Example…
How to Style a Pagination with Tailwind CSS
The example below creates two types of pagination bars with Tailwind CSS. The first one is in the form of rectangles, while the second one is in the form of circles. Preview: The code: Further reading:…
