Text Shadows in Tailwind CSS
Updated: Dec 15, 2023
In recent versions of Tailwind CSS, you can add drop shadows to text by using the drop-shadow-{amount} utilities (you can also use these classes for div elements to create box shadows). {amount} can be one of the following: md: Medium......
Tailwind CSS: Make a Div 100% Height & Width of the Viewport
Updated: Dec 15, 2023
In Tailwind CSS, you can make a div element fill the width and height of the viewport by using the w-screen and h-screen utilities, respectively. This is equivalent to setting the width and height of the div element to 100vw and 100vh in......
How to Zoom on Hover with Tailwind CSS (the easiest approach)
Updated: Dec 15, 2023
The easiest and quickest way to create zoom effects on hover in Tailwind CSS is to use the scale utilities (scale-*) and transition timing utilities (ease-in, ease-out, ease-in-out). The strategy here is to add a small scale in a......
Using :not() selector in Tailwind CSS
Updated: Dec 15, 2023
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 can do the equivalent thing......
Tailwind CSS: How to Create a Stepper
Updated: Dec 15, 2023
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,......
Using ::before and ::after in Tailwind CSS
Updated: Dec 15, 2023
In Tailwind CSS, you can add the ::before and ::after pseudo-selectors by using the before and after modifiers, respectively. You can use these modifiers to insert content (and style this inserted content as well) before and after an......
Tailwind CSS: How to Create a Vertical Divider Line
Updated: Dec 09, 2023
In the context of web development, a vertical divider line is a line that separates two or more sections or columns of a web page. It is used to create a visual distinction or a logical separation between different parts of the content.......
How to Create Pill Buttons with Tailwind CSS
Updated: Dec 09, 2023
Pill buttons are buttons that have a rounded shape, like a pill or a capsule. They are often used to create a modern and sleek look for websites or applications. This concise, straightforward article shows you how to create pill......
Tailwind CSS: How to Disable Text Selection
Updated: Dec 09, 2023
When developing websites, disabling text selection can protect your content, improve your design, or control your functionality. However, this can also frustrate your users, reduce your accessibility, or be bypassed by other methods.......
Tailwind CSS: How to Disable Resizing of Textarea
Updated: Dec 09, 2023
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: <body class="bg-green-200 p-20......
Tailwind CSS: Create a Floating Action Button (FAB)
Updated: Dec 09, 2023
A floating action button (FAB) is usually located in the lower right or left corner of the screen. It has a fixed position and has a larger z-index than other elements of the web page. Therefore, the floating action button always......
Tailwind CSS: How to style the Select element
Updated: Dec 09, 2023
In Tailwind CSS, you can style a <select> element in a nice way by making use of the official plugin called @tailwindcss/forms. To install the plugin, run the following command in the root directory of your project: npm i......