90% of people who use Tailwind CSS don't know these 6 simple tricks

Tailwind CSS has gained popularity for its simplicity and utility-first approach to styling web interfaces. While many developers are familiar with the basics of using Tailwind CSS, there are some lesser-known tricks that can enhance productivity and streamline development workflows. In this article, we'll explore six simple yet powerful tricks that 90% of Tailwind CSS users may not be aware of.

Styling based on parent state

In Tailwind CSS, you can apply styles to a child element based on the state of its parent element, such as when the parent is hovered or focused. This is achieved using the group feature, which allows you to define a group of related elements that share common styles based on the parent's state.

Let’s see how can we use it in real example, like what’s in this image from Float UI without any javaScript code or external libraries, only Tailwind CSS.

You can watch this example live and play with the code, check it out.

Beautiful gradient background

This kind of gradient backgrounds is so trend now, it’s exists in a lot of websites today, and always looks beautiful if you implemented it in a good way, in this part we will learn how to make something like this using Tailwind CSS, we just user a Hero component from Float UI to save time.

<!-- Background -->
  <div class="absolute inset-x-0 m-auto h-80 max-w-lg bg-gradient-to-tr from-indigo-400 via-teal-900 to-[#C084FC] blur-[118px]"></div>
<!-- End -->

This is the background, check the full code with the preview to see it with the component, and let’s explain the code step by step

absolute: Positions the element absolutely, relative to its nearest positioned ancestor.
inset-x-0: Sets the left and right positions to 0, making the element span the entire width of its container.
m-auto: Centers the element horizontally by setting the left and right margins to "auto".
h-80: Sets the height of the element to 80 units. You can adjust this value as needed.
max-w-lg: Sets the maximum width of the element to a large value, restricting its width within a specific range.
bg-gradient-to-tr: Applies a gradient background to the element that transitions from one color to another diagonally from the bottom-left to the top-right corner.
from-indigo-400: Specifies the starting color of the gradient as an indigo shade with a 400 color variant.
via-teal-900: Specifies an intermediate color for the gradient, transitioning between the starting and ending colors. It uses a teal shade with a 900 color variant.
to-[#C084FC]: Specifies the ending color of the gradient as a custom hex color value, #C084FC.
blur-[118px]: Applies a blur effect to the background, making it slightly blurred. The value specifies the amount of blur to apply, in this case, 118 pixels.

By combining these classes and color values, the code creates a gradient background that starts with an indigo color, transitions through a teal color, and ends with a custom hex color. The background is also slightly blurred using the specified blur effect.

Dark Mode Styling

Tailwind CSS provides built-in support for dark mode styling, allowing you to easily create a dark theme for your application. By adding the dark class to your HTML element, you can activate dark mode and apply specific styles for dark backgrounds, text colors, and more. This enables you to provide a seamless user experience across light and dark modes without writing extensive custom CSS.

And to make it work you have to add this in your tailwind.config.js file like this:

module.exports = {
    darkMode: 'class',
    // ...
}

Here is an example from Tailwind with HTML uses dark mode:

<p class="text-slate-600 dark:text-slate-300">
    Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
</p>

Tailwind CSS Typography

The @tailwindcss/typography plugin is an official plugin for Tailwind CSS that provides a set of utility classes for styling typographic elements in your web application. It simplifies the process of creating consistent and visually appealing typography by offering predefined styles and configurations.

To get started with @tailwindcss/typography, you need to install it as a dependency in your project:

To install @tailwindcss/typography as a dependency in your project, run the following command in your terminal:

npm install @tailwindcss/typography

After installing the plugin, you need to add it to your Tailwind CSS configuration. Open your tailwind.config.js file and add require('@tailwindcss/typography') to the plugins section:

module.exports = {
    // Other Tailwind CSS configurations...
    plugins: [
        // Other plugins...
        require('@tailwindcss/typography'),
    ],
};

Once the plugin is added, you can start using the typographic utility classes in your HTML markup. The @tailwindcss/typography plugin provides classes for headings, paragraphs, lists, and more. These classes enable you to apply consistent typographic styles to your content without writing custom CSS.

For example, you can use the prose class to style your text content:

<div class="prose">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Adapting to dark mode

To make your content look great in dark mode, the Tailwind CSS typography plugin includes a hand-designed dark mode version for each default theme.

To enable it, simply add the dark:prose-invert class to the

element:

<div class="prose dark:prose-invert">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Arbitrary properties

Arbitrary properties in Tailwind CSS provide a powerful and flexible way to add custom CSS properties and values directly within your Tailwind utility classes. They allow you to extend the capabilities of Tailwind CSS beyond its predefined utility classes, giving you the freedom to apply any CSS property to your elements without leaving the comfort of the Tailwind ecosystem.

Here’s an example, and you can get a preview and play with the code out, check the demo

<ul class="[&>li:nth-child(2)]:text-3xl [&>li:nth-child(3)]:text-indigo-600">
  <li>First Item</li>
  <li>Second Item Item</li>
  <li>Third Item</li>
</ul>

Smooth images transition

To achieve smooth transitions for images using Tailwind CSS Scroll Snap Align, you can take advantage of the scroll-snap properties and the built-in utility classes provided by Tailwind. Here's a step-by-step guide to implement this:

<div class="flex snap-x snap-mandatory items-center gap-x-3 overflow-x-auto p-4">
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

The code snippet provided showcases a smooth transition effect for a collection of images within a container. The use of Tailwind CSS utility classes and scroll snap properties enables an interactive and visually appealing scrolling experience.

With the snap-x utility class applied to the container, horizontal scroll snapping is enabled. This means that when the user scrolls horizontally, the images align themselves neatly, snapping into place. This behavior gives the impression of a seamless transition between each image, creating a polished and professional appearance.

The flex utility class ensures that the container adapts its width to accommodate the images and allows them to be displayed in a row. The gap-x-3 utility class adds a small horizontal gap of size 3 between the images, providing a subtle spacing effect.

Each image is wrapped in a <div> element with the max-w-lg, flex-none, and snap-center utility classes. These classes control the maximum width of the image container, prevent it from growing or shrinking, and center it within the parent container during scrolling.

To enhance the visual presentation, the <img> tags have the rounded-lg class, which applies a rounded border to each image, giving them a softer and more elegant look.

This combination of Tailwind CSS utility classes and scroll snap properties results in a smooth and visually pleasing transition effect as users scroll through the images. It adds an element of interactivity and engagement to the image gallery, enhancing the overall user experience.
Check out the demo

If you liked this article, you can
follow me on Twitter I share about my journey and something related to web development, and building DevTools.