Tailwind tips to help your development

Have you ever felt overwhelmed by writing custom CSS for every new project? Tailwind CSS is here to change that. As a utility-first CSS framework, Tailwind empowers developers to build custom user interfaces without the hassle of starting from scratch.

Tailwind is straightforward to use and has comprehensive documentation, but reading through it all might take some time.

So, let's explore some hidden gems tailwind has to offer:

1. Space Between

Tailwind Docs: Space BetweenExternal Link

space-x-* and space-y-* utilities are a simple way of allowing you to add uniform spacing in a container's children, horizontally or vertically. They creates space between elements just like grid or flex but without the need of using them.

For example if we have 2 pieces of text and a title, and want to add an even space around them, we just have to add space-y-4 in the parent container.

<div className="px-4 space-y-4">
  <h4 className="font-semibold text-foreground">Space, the final frontier</h4>
  <p className="text-foreground">
    Space is utterly silent because it lacks an atmosphere to carry sound, creating a profound
    silence for astronauts on spacewalks. Despite its emptiness, space has a unique smell;
    astronauts describe it as similar to seared steak or welding fumes, hinting at cosmic
    particles that might evoke these scents.
  </p>
  <p className="text-foreground">
    Time itself behaves differently in space due to the bending of space-time around massive
    objects like planets and stars, affecting how time passes relative to Earth.
  </p>
</div>

2. Scroll Snap Type

Tailwind Docs: Scroll Snap AlignExternal Link

This utility ensures that as our users scroll through content, the view snaps directly to a specific point or element.

To implement this, simply apply snap-x or snap-y to your container and then, use snap-center, snap-start, or snap-end on the children to control their snap position.

It is useful for creating carousels, galleries, or simply enhancing the user scroll experience.

import Image from "next/image";

<div className="py-2 flex snap-x items-center gap-4 overflow-x-scroll rounded-md">
  <div className="w-80 shrink-0 snap-center rounded-full">
    <Image alt="arquitecture" src="blogposts/tailwind/tailwind-tips-and-tricks/arquitecture.webp" />
  </div>
  <div className="w-80 shrink-0 snap-center rounded-full">
    <Image alt="forest" src="blogposts/tailwind/tailwind-tips-and-tricks/forest.webp" />
  </div>
  <div className="w-80 shrink-0 snap-center rounded-full">
    <Image alt="hamburguer" src="blogposts/tailwind/tailwind-tips-and-tricks/hamburguer.webp" />
  </div>
  <div className="w-80 shrink-0 snap-center rounded-full">
    <Image alt="beach" src="blogposts/tailwind/tailwind-tips-and-tricks/beach.webp" />
  </div>
</div>

3. Divide Width

Tailwind Docs: Divide WidthExternal Link

Sometimes, items in a list or elements in a button group seem to merge into one another. Tailwind's divide-width makes your life easier when dealing with styling borders widths between different elements, by effortlessly adding stylish separators between your elements.

Imagine we have a group of buttons and we want each to stand out on its own by adding a subtle line between them. An example could be button groups like this:

<nav className="grid grid-cols-3 divide-x divide-blue-200 overflow-hidden rounded-md">
  <button className="p-2 hover:bg-accent">Home</button>
  <button className="p-2 hover:bg-accent">About</button>
  <button className="p-2 hover:bg-accent">Login</button>
</nav>

4. Size

Tailwind Docs: SizeExternal Link

This utility sets the width and height at the same time. It is useful if you need a square or circle shape.

<div className="grid grid-cols-3 gap-2">
  <div className="size-20 rounded-md bg-indigo-500 text-center">size-20</div>
  <div className="size-28 rounded-md bg-indigo-500 text-center">size-28</div>
  <div className="size-36 rounded-md bg-indigo-500 text-center">size-36</div>
</div>

We can also us size-full to help set an element's width and height to be 100% of the parent container's width and height.

<div className="h-12 w-full">
  <div className="size-full rounded-md bg-indigo-500 text-center">size-full</div>
</div>

5. Line Clamp

Tailwind Docs: Line ClampExternal Link

Line clamp is especially useful if we have a wall of text and just want to show a specific number of lines at a time and add some ellipsis at the end.

<div className="line-clamp-2">
  Bees communicate with each other through a dance called the "waggle dance." They use this
  dance to tell fellow bees about the direction and distance of flowers where they can find
  nectar and pollen. Bees have an excellent sense of direction and can find their way back to
  their hive from up to 13 kilometers (8 miles) away. Bees play a crucial role in pollinating
  plants, including many crops that humans rely on for food. It's estimated that one-third of
  the food we consume each day relies on pollination mainly by bees.
</div>

6. Truncate

Tailwind Docs: TruncateExternal Link

Similar to Line clamp, truncate prevents text from wrapping and truncates the overflowing text with an ellipsis if needed.

<div className="truncate">
  A bee colony consists of one queen, many workers (females), and, during certain periods,
  drones (males). The queen can lay up to 2,000 eggs per day during the breeding season.
  Bees produce honey from the nectar of flowers. A single bee will produce only about 1/12
  teaspoon of honey in its lifetime, but a hive can produce up to 65 pounds of honey per year.
</div>

7. Accent Color

Tailwind Docs: Accent ColorExternal Link

If want to style default browser colors of inputs like checkboxes we can style them by using Accent colors.

If you ever wanted to quickly brand your checkboxes, radio buttons, or any input elements with your signature colors. Tailwind's accent-color utility allows us to style our form elements without brand palette, instantly aligning them with your design theme.

<div className="flex h-12 w-32 items-center justify-center gap-2 rounded-md">
  <input className="h-10 w-10 accent-violet-400" type="checkbox" />
  <input name="tailwind" className="h-10 w-10 accent-violet-400" type="radio" />
  <input name="tailwind" className="h-10 w-10 accent-violet-400" type="radio" />
</div>

8. Caret Color

Tailwind Docs: Caret ColorExternal Link

The blinking caret in a text field might seem insignificant, but it's another opportunity to showcase our brand. With Tailwind's caret-color utility, we can change the caret to any color in the Tailwind palette, ensuring even the smallest details match your style.

This subtle touch can make your text inputs feel more integrated with the rest of your UI.

<div className="rounded-md">
  <textarea
    rows={2}
    className="w-full p-2 focus:outline focus:outline-violet-800 caret-violet-800 rounded-md border"
    placeholder="123"
  />
</div>

9. Gradient Color Stops

Gradients if you are not familiar are colors that fade into different colors. They can be used for creating beautiful backgrounds, text, or even border gradients.

You can direct your gradient (to-r, to-l, etc.), choose your starting (from-{color}), middle (via-{color}), and end colors (to-{color}). Add percentages to these classes with vibrant or subtle transitions. Here's a snippet to get you started:

<div className="rounded-md">
  <div className="h-12 w-full rounded-md bg-gradient-to-r from-indigo-300 from-30% via-blue-300 via-60% to-violet-300 to-90%"></div>
</div>

10. Animations

Tailwind Docs: AnimationExternal Link

Whether it's a loading spinner, a pulsating notification, or a bouncing button, Tailwind comes packed with easy-to-use animation utilities such as animate-spin, animate-pulse, animate-bounce and animate-ping, turning static elements into dynamic elements. Here's how you can use them:

import { BellRing } from "lucide-react";

<span className="relative flex h-12 w-12">
  <span className="absolute right-0 top-0 h-3 w-3 animate-ping rounded-full bg-red-400 opacity-75"></span>
  <span className="sr-only">Notifications</span>
  <BellRing className="h-12 w-12" />
</span>

11. Screen Readers

Tailwind Docs: Screen ReadersExternal Link

This utility helps hiding elements visually from the screen but keeping them accessible to screen readers This ensures your icons and controls speak, even when they're out of sight.

This is especially useful for icon-only buttons or links, where the visual cue is clear for sighted users but would be missed by those using screen readers. By adding sr-only to your text labels, you ensure your site is more inclusive and accessible to everyone. Here's an example:

import { CircleUserRound, Home, UploadCloud } from "lucide-react";

<div className="flex w-full items-center justify-between overflow-hidden rounded-md border">
  <button className="p-2 hover:bg-accent">
    <Home className="h-6 w-6" />
    <span className="sr-only">Home</span>
  </button>
  <div className="flex gap-4">
    <button className="p-2 hover:bg-accent">
      <CircleUserRound className="h-6 w-6" />
      <span className="sr-only">Profile</span>
    </button>
    <button className="p-2 hover:bg-accent">
      <UploadCloud className="h-6 w-6" />
      <span className="sr-only">Upload</span>
    </button>
  </div>
</div>