Faruk Sardar

Posted on May 20 • Originally published at singlesyntax.com

10 Tailwind CSS Classes Save Your Time

#webdev #beginners #tailwindcss #javascript

Nowadays, developers avoid vanilla CSS and move on to Tailwind CSS because it saves time while building projects.

If you are also one of the developers who use Tailwind CSS to create web apps and sites then you should know these 10 Tailwind CSS names. because it will save you a lot of time.

Before moving I move on I want to mention that I'm using Next.js for a tutorial but you can use any framework you like such as normal React, Angular, Vue.js, or others

1. Prose

The first and my favorite class is Prose and it is because prose helps me to style all the HTML elements that I receive from headless CMS at once.

Still, confused? Let me give you an example, check out below:

import React from "react";

export default function Page() {
  return (
    <main>
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum?</h1>
      <p>
        Consectetur adipisicing elit. Eveniet reprehenderit voluptatum velit
        accusamus provident rem earum, quod quia!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil neque
        deleniti eos, veritatis explicabo est modi officiis, at officia minima
        totam natus unde sed consequuntur.
      </p>
      <p>
        Corrupti optio natus aliquid eveniet odit, sit culpa possimus, cum, quos
        fuga voluptates itaque distinctio sint nostrum?
      </p>
      <p>
        Assumenda ipsum facilis doloribus laboriosam consectetur distinctio
        autem, enim odit consequuntur veniam, Commodi, officiis! Inventore?
      </p>
      <h2>Harum dolore saepe?</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>Molestias ipsum tenetur beatae</li>
        <li>quo natus, vitae quaerat</li>
        <li>sit rem enim delectus.</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quis
        aspernatur recusandae omnis architecto rem ipsam quia.
      </p>
      <blockquote>
        Laborum reiciendis, dolor ab excepturi unde alias veritatis mollitia
        blanditiis, tempora error at.
      </blockquote>
    </main>
  );
}

Without prose class

If I had to style the above HTML then it would take me a good amount of time, Because I have to style every HTML tag.

But now with the prose class name, I can style them all at once,

import React from "react";

export default function Page() {
  return (
    <main className="max-w-5xl mx-auto prose"> //Added "prose" classname
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum?</h1>
      <p>
        Consectetur adipisicing elit. Eveniet reprehenderit voluptatum velit
        accusamus provident rem earum, quod quia!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil neque
        deleniti eos, veritatis explicabo est modi officiis, at officia minima
        totam natus unde sed consequuntur.
      </p>
      <p>
        Corrupti optio natus aliquid eveniet odit, sit culpa possimus, cum, quos
        fuga voluptates itaque distinctio sint nostrum?
      </p>
      <p>
        Assumenda ipsum facilis doloribus laboriosam consectetur distinctio
        autem, enim odit consequuntur veniam, Commodi, officiis! Inventore?
      </p>
      <h2>Harum dolore saepe?</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>Molestias ipsum tenetur beatae</li>
        <li>quo natus, vitae quaerat</li>
        <li>sit rem enim delectus.</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quis
        aspernatur recusandae omnis architecto rem ipsam quia.
      </p>
      <blockquote>
        Laborum reiciendis, dolor ab excepturi unde alias veritatis mollitia
        blanditiis, tempora error at.
      </blockquote>
    </main>
  );
}

With prose class

To use the Prose class in your project first, you need to download a tailwind plugin that is @tailwindcss/typography this plugin will help us to use all the extra class names along with prose.

npm install -D @tailwindcss/typography

Once the package is downloaded successfully, you must

add the package to your tailwind.config file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [
  require("@tailwindcss/typography") //Add package here
  ],
};

Now you are all set, you can use the prose class name on the container that contains all the different kinds of HTML tags and Tailwind will style it without requiring you to style each and every HTML element one by one.

Overwriting Prose Classes

If you don't like some styles then you can overwrite them using the different prose classes, here are some classes you can use to overwrite default styling.

prose-h1:
prose-h2: (and so on)
prose-p:
prose-a:
prose-blockquote:
prose-strong:
prose-code:
prose-em:
and more...

2. Size

Now you could save on writing the number of classes for height and width if both the values are the same.

Let's say you want a div container and want to give it a height of h-20 and a width of w-20.

But now you can use size class to provide the height and width at once.

//Before
      <div>
        <Image
        src="myImage.png"
        className="w-20 h-20" //without size class
        />
      </div>

//After
      <div>
        <Image
        src="myImage.png"
        className="size-20" //with size class
        />
      </div>

Make sure to use the size class name wherever you require to add a height and width with the same values.

3. Group

If you are new to Tailwind then you may never heard of group the class,

Most of the time we need to apply styling to a children's element when a user is interacting with a parent element.

For example, changing the text color when the user is hovering over the parent container.

To use the Group class first you need to apply the group class to the parent, like this:

<div className="group">
    <h1>I hope you are having a good day</h1>
</div>

Now, make the children also change. As I showed before, turn the text color to green when you put the mouse over the parent.

<div className="group">
    <h1 className="group-hover:text-green-500">I hope you are having a good day</h1>
</div>

You can use lots of different Tailwind classes, not just for changing text color, but also to create various effects.

4. Animate

It is one of the most helpful tailwind classes that definitely saves you time while creating animation is animate class.

For those of you who don't know that tailwind also has a class name for animations.

There are a total of 5 animation classes you can use, here is the list:

animate-spin
animate-ping
animate-pulse
animate-bounce
animate- none

Each has different effects, and I'm sure you can use them in so many different ways.

5. Divide

The divide is another time saver class name and you can use this class for adding borders to children's elements.

Let's say you save multiple children in a container and you want to add border rights to all the children,

To do that you need to use divide-x and for thicker borders use divide-x-2, here is the result of this class.

 <main>
      <div className="flex m-10 divide-x"> //thin border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-x-2"> //thick border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

The good thing is that you can also able to change the border color similar to the text color,

To do that you need to use the divide-red-500 class name, instead of red you can specify any color you want that tailwind supports.

 <main>
      <div className="flex m-10 divide-x-2 divide-red-500">
        {" "}
        //Red border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-x-2 divide-blue-500">
        {" "}
        //Blue border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

You can also add borders in "y" direction by changing the class, like this:

    <main>
      <div className="flex m-10 divide-y"> //Adding border at top and bottom
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-y-2"> //more thicker border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

6. Space

Space class is very similar to the divide class name, instead of the border we get spaces between the border.

If you used gap with the combination of flex or grid class then you may know that you can add spacing with the children.

But if you want equal space between the children without using Flexbox or Gird then you can now use space class.

Here is an example of this class:

<main>
      <div className="flex m-10 space-x-6"> //Adding little space
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 space-x-12"> //Adding more space
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

Changing the class from x to y could add the spacing at the vertical position.

7. Sr-only

Sr-only has a very specific use case and you may not use it very often but I'm sure you'll get into a situation where you are required to use this class.

What the sr-only class does is, when you apply this class your content will become hidden from the screen but not from the DOM

This class will apply multiple CSS classes to make the content for the users but not for search engine bots.

A best use case of this class is on the tooltip, you can hide a label using this class and make it visible again when a user hovers over the element.

8. Accent

For changing the color of the default form elements you could use the accent-red-500 class

Just add the class name on the form tag or the individual tags according to your requirements.

Here is an example with code:

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
        <span className="">Human:</span>
        <label htmlFor="yes">
          Yes
          <input type="radio" id="yes" name="human" />
        </label>

        <label htmlFor="no">
          No
          <input type="radio" id="no" name="human" />
        </label>
      </form>
    </main>
  );
}

9. Caret

Caret has a very small use case like changing the cursor color when a user types in an input box.

Add caret class along with the color name to change the cursor, see an example I mentioned below:

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
      //caret class
        <textarea className="border border-violet-500 rounded-xl w-60 h-32 p-3 caret-violet-500 focus:outline-none"></textarea>
      </form>
    </main>
  );
}

10. Ring

Many developers hate to use borders on an element but now the tailwind team has created a solution for this.

Instead of using the border class now, you can use the ring class name, what this class name does is add a box shadow without any blur giving an illusion of a border.

I have added an example below where I use ring class on a textarea It looks like a border but it does not.

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
        <textarea className="ring ring-violet-500 rounded-xl w-60 h-32 p-3 caret-violet-500 focus:outline-none"></textarea>
      </form>
    </main>
  );
}