What we can do with Tailwindcss

1. What is it?

Tailwindcss is a utility-first CSS framework that can be composed to build any design, directly in our markup.
It means that there’s no pre-built component, the library is a collection of css utility class which helps us write css faster and don’t have to worry about naming the class.

You can find details installation guide here, it’s very easy to set up.
https://tailwindcss.com/docs/installation
You also want to have “Tailwind CSS Intellisense” extension in your IDEA to enhance your experience.
And, the developers of Tailwind also recommend to use PostCSS exclusively as preprocessor to avoid additional build step. https://tailwindcss.com/docs/using-with-preprocessors
The post is using React and Vscode for making examples.

2. What we can do with it?

① Basic CSS class
In a traditional way, we will write css for a div with classname “container” like below.

<div className="container"></div>
// in css file
.container {
 width: 100%,
 background-color: #fff,
 display: flex,
 justify-content: center
}

This is how we do it with tailwind.

<div className="w-full bg-black flex justify-center"></div>

All the tailwind class collection start here, from layout section menu.
https://tailwindcss.com/docs/container
The class naming is easy for guessing, together with tailwind intellisense, there’ll be suggestion along side, writting this will be a peace of cake.
We can also hover on the classname to see it’s actual css.

suggestion while typing

tool-tips for a glance of actual css

② Customize color
Tailwind comes with a huge color pallete, sometimes we don’t even need that much and we want a set of color for your own application. Here’s what we can do.

tailwind.config

In the tailwind.config file, extend the theme with our own color set and whatever name we want it to be and Tailwind will set up the utility class base on this color.
For example, we want to set background color as “primary” color, write bg-primary , or to set the text color to “somethingelse” color, write text-somethingelse .
As said earlier, Tailwind has a whole pallete for every color and we can even override this.

an example pallet

Take this emerald color, for instance, if we want to change any shade, add below code to the color extend part in tailwind.config .

emerald: {
 50: "#c8ffe5",
 100: "something",
 ...
}

It’s not just color, we can actually have customize set of other styles (display, width, height, fonts, …) and the way to do it is similar.

③ Custom classname using @apply and @layer
This is probably not something we use al the time, but it’s worth mentioning.
I have a class like below in css file:

.menu_item {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 48px;
 width: 48px;
 border-radius: 50px;
 background-color: gray;
 color: green;
}
.menu_item:hover {
 border-radius: 20px;
 background-color: green;
 color: gray;
}

Now, using Tailwind would be like this:

@layer components {
 .menu_item: {
  @apply relative flex item-center justify-center h-12 w-12 
         bg-gray hover:bg-green text-green hover:text-gray 
         rounded-3x1 hover:rounded-x1;
 }
}

Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are a base, components, and utilities.

Notice the hover: ? In Tailwind, we can write psudo class (hover, focus, … even screen breakpoint) right in our classname.

④ Change child element style when parent element state change with group
If we have a tooltip and we want that to appear when you hover something. It’s impossible to do with just normal css, but Tailwind makes it super easy.
Just add group utility to the parent and add group- with the state variants (hover, focus,…) and write the new utility class we want to apply when parent is interacted.

<div className="menu_item group">
 Dashboards
 <span className="hidden group-hover:block">tooltips</span>
</div>

⑤ Dark mode

It becomes more and more popular for website to have the ability to switch between normal and dark mode, so it’s something that would probably want to see when searching for a css library.

There are 2 options for this in Tailwind:

First one is media strategy: enable darkmode in tailwind.config file as media and on every single element that we want to change on darkmode, add variant dark: before the style we want to apply.

With this approach, you website or application will change accordingly to the operating system’s prefers-color-scheme.

<div className="bg-white dark:bg-gray-800">
  <h1 className="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p className="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>
// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

Second one is to use the class strategy: enable darkmode in tailwind.config file as class and on every single element that we want to change on darkmode, add variant dark: before the style we want to apply.

With this approach, it will look for the parent element with dark class and apply dark variant to all the children. By this, you can store your prefers-color-scheme in local storage and add a switch to manually switch between dark and normal mode.

const [enableDark, setEnableDark] = useState(false)
<div className={enableDark ? dark : ''}>
 <div className="bg-white dark:bg-gray-800">
   <h1 className="text-gray-900 dark:text-white">Dark mode is here!</h1>
   <p className="text-gray-600 dark:text-gray-300">
     Lorem ipsum...
   </p>
 </div>
</div>
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

3. Conclusion

Everything in this article can be found in the official documents of Tailwind, but the purpose of this is to give you a big picture of what you can do with Tailwind and how easy it is to start with.

Documentation - Tailwind CSS

Like any other CSS library, nothing can replace the original CSS, their mission is to make it easier and help the process of doing css faster. It’s your decision whether it’s a suitable one for your application or not.