10 Tailwind classes I wish I found earlier

Introduction

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without having to write custom CSS. It's a great tool for developers who want to build custom designs without having to write custom CSS. Some people say you forget about pure CSS when you start using Tailwind CSS. I totally agree with that, but I don't care about it that much. My dream was never to become a CSS expert.

If you are like me and your priority is to focus on the actual product, then Tailwind CSS is a great tool for you. Of course style sheets are important, but I don't want to spend a lot of time on them. I want to focus on the actual product and the user experience more.

The danger of using Tailwind CSS is similar to the danger of using ChatGPT. While it's a great tool, it can make you lazy. You might forget about the basics of CSS. Basics are very important, and you should never forget about them.

Key benefits of Tailwind CSS

You can build custom designs super fast.
You don't have to write custom CSS.
It's a great tool for developers who want to focus on the actual product and the user experience.
It's a nice tool for building accessible and SEO-friendly websites.
You can use the utilities in conjunction with your own custom CSS.
You can add theming to your website with ease.
Many frameworks are built on top of Tailwind CSS, so chances are you'll use it at some point.

Now that you know what Tailwind CSS is, let's talk about some of the Tailwind CSS classes that I wish I found earlier.

1. Divide

This utility class is a game changer for me. It allows you to visually divide a series of elements with a line. It's a great way to separate elements in a list or a grid.

While it's a great way to divide elements, I recently found it difficult to overcome the issue on this link issue.

Other than that, it's a great class to use.

Example

Assume you have this code:

<div class="flex justify-center rounded-xl bg-slate-100 dark:bg-gray-800">
  <a class="cursor-pointer p-4">A</a>
  <a class="cursor-pointer p-4">B</a>
  <a class="cursor-pointer p-4">C</a>
  <a class="cursor-pointer p-4">D</a>
</div>

It will render like this:

A B C D

If you want to separate the elements with a line, you can use the divide-x class:

<div class="flex justify-center divide-x divide-slate-200 rounded-xl bg-slate-100 dark:divide-slate-700 dark:bg-gray-800">
  <a class="cursor-pointer p-4">A</a>
  <a class="cursor-pointer p-4">B</a>
  <a class="cursor-pointer p-4">C</a>
  <a class="cursor-pointer p-4">D</a>
</div>

It will render like this:

A B C D

2. Scroll Snap

Scroll snap is actually very useful for building carousels or sliders. It allows you to snap to a specific element when scrolling. It's a great way to build a horizontal slider without having to write custom CSS.

For example this code (React):

<div className="flex w-full snap-x items-center gap-4 overflow-x-scroll rounded-3xl bg-white p-4 dark:bg-gray-800">
  {['🍌', '🍐', '🥭', '🍉', '🍇', '🥑'].map((fruit) => {
    return (
      <div key={fruit} className="h-auto w-72 shrink-0 snap-center rounded-full">
        <img src={`https://picsum.photos/seed/${fruit}/800/400`} />
      </div>
    );
  })}
</div>

Will render like this:

This class is very useful for building accessible websites. It allows you to hide elements from the screen, but still make them accessible to screen readers. Accessibility is very important for the web, and this class makes it easy to build accessible websites. Also, it's a great SEO tool, as it allows you to hide elements from the screen, but still make them accessible to search engines. You'll be a SEO and accessibility hero!

For example, this code:

<a href="/settings">
  <svg><!-- Imagine this is the SVG icon of a cog --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

In the above example, the sr-only class hides the text from the screen, but still makes it accessible to screen readers. The sm:not-sr-only class makes the text visible on small screens and above.

4. Accent Color

This class is very useful for adapting the UI as close to the design system as possible. It allows you to add an accent color to an element.

For example, this code:

<label> <input type="checkbox" checked /> Browser default </label>
<label> <input type="checkbox" class="accent-pink-500" checked /> Customized </label>

Will render like this:

Browser default

Customized

5. Multi-step gradients

Gradients are a great way to add depth to a design. This class allows you to create multi-step gradients with ease.

For example, this code:

<div class="h-20 w-full rounded-3xl bg-gradient-to-r from-blue-500 via-green-500 to-pink-500"></div>

Will render like this:

6. Aspect Ratio

Aspect ratio refers to the proportional relationship between the width and height of an element. This class allows you to set the aspect ratio of an element with ease. For example if you want to embed a video on your website, you can use the following code:

<div class="aspect-video w-full">
  <iframe src="https://www.youtube.com/embed/4nvewes8Inc" className="w-full h-full rounded-2xl" frameborder="0" allowfullscreen></iframe>
</div>

Which will render:

7. Animations

Yes, that's right! Tailwind CSS has a great set of classes for building animations. I find myself using Framer Motion for most of my animations, but it's nice to know that Tailwind CSS has a great set of classes for building animations.

Here are some animation examples:

<div class="flex gap-x-10">
  <div class="h-12 w-12 animate-pulse rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-red-500">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-12 w-12 animate-bounce rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-red-500">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-12 w-12 animate-spin rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-red-500">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-12 w-12 animate-ping rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-red-500">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
</div>

Will render like this:

8. Space

Spacing is very important, especially for OCD people like me. I want my spacings to be consistent and perfect. Of course, you can use the m- and p- classes to add margin and padding to an element, but Tailwind CSS has a great set of classes for building consistent spacings.

For example, this code:

<div class="space-x-4">
  <button class="h-12 w-12 rounded-full bg-blue-500 text-white">A</button>
  <button class="h-12 w-12 rounded-full bg-blue-500 text-white">B</button>
  <button class="h-12 w-12 rounded-full bg-blue-500 text-white">C</button>
  <button class="h-12 w-12 rounded-full bg-blue-500 text-white">D</button>
</div>

Will render like this:

Of course, you can use the space-y- class to add vertical spacing to a series of elements. Gap classes are also available for flex and grid containers.

9. Grid

I have been using flexbox for most of my projects for many years. It's a great tool for... well, centering things. It's also great at building responsive designs, by arranging elements in a row or a column. But, when it comes to building a grid, I find myself using the grid class in Tailwind CSS.

Here is an example:

<div class="grid grid-cols-3 gap-4">
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
  <div class="h-20 w-full rounded-2xl bg-blue-500" />
</div>

Will render like this:

10. Filters

Filters are a great way to add depth to a design. They allow you to add effects to an element, such as blur, brightness, contrast, and more.

Here are some filter examples:

<div class="flex gap-x-10">
  <div class="h-20 w-20 rounded-full bg-blue-500 to-red-500 blur-sm filter">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-20 w-20 rounded-full bg-blue-500 to-red-500 brightness-200 filter">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-20 w-20 rounded-full bg-blue-500 to-red-500 contrast-200 filter">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
  <div class="h-20 w-20 rounded-full bg-blue-500 to-red-500 grayscale filter">
    <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
  </div>
</div>

Will render like this:

My favorite filter and it's use case is the grayscale filter. I usually use it to make hover effects on images. When you hover over an image, it will turn to color.

For example, this code:

<div class="w-fit grayscale filter hover:filter-none">
  <img src="https://pngimg.com/uploads/doge_meme/small/doge_meme_PNG6.png" alt="doge" />
</div>

Will render like this: (hover over the doge)

Conclusion

These are some of the Tailwind CSS classes that I wish I found earlier.

I find myself using these classes in most of my projects, and it can save so much time. Many times, time of delivery is very important, and these classes can help you deliver solutions faster.

I hope you find these classes useful, and I hope they save you time in your projects.

If you have any questions or comments, feel free to reach out to me via email at [email protected]

Introduction

Key benefits of Tailwind CSS

1. Divide

Example

2. Scroll Snap

3. Screen-reader-only elements

4. Accent Color

5. Multi-step gradients

6. Aspect Ratio

7. Animations

8. Space

9. Grid

10. Filters

Conclusion