Ramsalt Lab: Save time with the new CSS framework TailwindCSS

By Hansa Pandit

CSS frameworks are very popular these days. They give us a head start without having to write a lot of CSS. There is this new shiny thing that's gaining a lot of attention these days, TailwindCSS. Recently, I got a chance to try my hands on it and I am going to share a high-level overview about TailwindCSS that may help you to get started with it quickly.

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework, which provides you with low-level utility classes to build your custom websites.

I will try to explain how to get into using TailwindCSS based on my personal experience. If you want to use TailwindCSS on your next project, this will be a quick guide for you, which I wish I had when I started working with TailwindCSS, it could have saved me a lot of internet-digging time.

Why use TailwindCSS and not the good old framework, which you are already familiar with?

Every website is unique and it should have its unique styles.

What I like the most about the TailwindCSS, is that it does not give me multiple CSS properties under one class name , so I can use its classes without having to override the other stuff, which most of the other frameworks fail to do, they give you pre-styled components that force you to override the styles.

TailwindCSS comes with a lot of low-level utility classes that you just have to add into your HTML element, to style your website. By low-level, I mean that TailwindCSS goes to the very basics and provides the classes that will not affect any other CSS property.

For instance, TailwindCSS has a class called “container”, the basic use of this class should only be to control the width of the block on various breakpoints, regardless of any other property. and YES, that's exactly what this class does in the TailwindCSS. So that way you do not have to override anything.

Let's see how the most basic example of HTML and CSS with the TailwindCSS classes will look like.

< form class = "w-full" >;

  < fieldset class = "p-8 w-full mx-auto" >

  </ fieldset >

< /form >

< button class = "bg-black inline-block p-8 font-semibold text-white uppercase" >

< /button >

Below is how the above CSS will be rendered in DOM

.uppercase {
  text-transform: uppercase ;
}

.text-white {
  color: #fff ;
}

.p-8 {
  padding: 2rem ;
}

.font-semibold {
  font-weight: 600 ;
}

.inline-block {
  display: inline block ;
}

.bg-black {
  background-color: #000 ;
}

.w-full {
    width: 100% ;
}

.mx-auto {
  margin-left: auto ;
  margin-right: auto ;
}

The class names that you see in the above examples are the utility classes that come with the TailwindCSS, all you have to do is add the classes inside your HTML element and you are DONE!

This could look very tempting and appealing at first but then you start to realize there could be some problems with this approach, few of them are:

The DOM looks very crowded, this is the first thing that bothered me when I started with the TailwindCSS.
This lacks the semantic approach.
For every similar element, you have to add the same bunch of classes, which is not something you would really want to do.

Apart from the above, I personally would not like the user to have a look at all the styling in the DOM itself.

But as I mentioned, that was the most basic example and we do have tricks to fix the above problems.

Inherit the TailwindCSS way!

TailwindCSS provides us with a very cool feature to inherit its own classes using the @apply directive.

@apply is the magic word here, you can create any class name of your own choice, and within that class name, you can inherit the TailwindCSS classes. I will show you, how you can achieve that.

Below is an HTML element with the class names of my own choice.

< button class = "button button - primary" >
< /button >

And this is how your CSS will look for the above HTML.

.button {

  @apply inline-block p-8 font-semibold uppercase ; // These are the classes that come with the TailwindCSS.

}

.button - primary {

   @apply bg-black text-white ;

}

This is how the above CSS will render

.button {

    display: inline block ;

    padding: 2rem ;

    font-weight: 600 ;

    text-transform: uppercase ;

}


.button - primary {

    background-color: # 000 ;

    color: #fff ;

}

So you see, now all the button elements will have the same CSS properties, without making the DOM look too busy.

Looks better, right?

Likewise, if you want all your section titles to be the same, you can simply inherit the TailwindCSS classes, like below

.section-title {

   @apply text-title font-semibold uppercase font-semibold text-2xl text-brand-black mb-5 leading-tight ;

}

In the above code examples, I have used a naming convention that makes much more sense and still it inherits all the CSS classes that come with the TailwindCSS. So practically, I did not have to add any new CSS property or override any existing CSS. Also, if you take a closer look, you'll find that TailwindCSS has a class for almost everything.

That's very cool, right?

So now, there is one very obvious question, what if you do not want the values or colors that come with the TailwindCSS. Will you have to override the CSS? Or will you have to write your own CSS?

Answers to these questions take me to the part which happens to be one of my favorites about the TailwindCSS.

One file to rule them all - tailwind.config.js

This is the file where you can customize your entire theme, be it the theme colors or the font-family or the breakpoints, or anything that you want.

Sounds interesting, right?

For instance, what if you do not want the width or the max-width values to be in rem unit (that comes with TailwindCSS), rather you want them to be in percentage.

Any thoughts?

All you have to do is go to your tailwind.config.js file and just customize it.

How?

Let's take a ride.

// File tailwind.config.js


module.exports = {

 theme: {

   extend: {

     colors: {

       'brand-black': '# 1b1b1b',

       'light-gray': '# e4e4e8',

       'gray': '# A6A6A6',

       'text-gray': '# CCC',

       'navy': '# 060B2B',

       'theme-blue': '# 4553ad'

     },

     maxWidth: {

       '1/4': '25% ',

       '2/5': '40% ',

       '1/2': '50% ',

       '3/4': '75% ',

       '4/5': '80% ',

       '9/10': '90% ',

      },

     fontFamily: {

       'display': 'roc-grotesque, sans-serif',

     },

     fontSize: {

       'title': '1.75rem',

       '4.5xl': '2.5rem',

       '5.7xl': '3.75rem',

     },

     boxShadow: {

       'form': '0px 1px 7px rgba (23, 25, 40, 0.13549)',

       'dropdown': '0px 4px 5px # 1b1b1b'

     },

     screens: {

       'mobile': {'max': '767px'},

       'tablet': {'min': '768px'},

       'desktopScreens': {'min': '1024px'},

       'wide': {'min': '1280px'},

       'belowRetina': {'max': '1920px'},

       'retina': {'min': '1921px'},

     }

   }

 }

}

In the above code, I have customized my theme colors, max-width property, font-family, font-sizes, box-shadow, and breakpoints.

Now, let's take a look at how these values can be used in CSS.

.banner-title {

  @apply max-w-9/10 ; // This will apply max-width: 90% as we defined in tailwind.config.js

}

In the above CSS, max-w is the TailwindCSS class for max-width and 9/10 is my customized value for 90%.

In the DOM, it will render as:

.banner-title {

    max-width: 90% ;

}

Similarly, let's see one more example, this time for color.

.button - primary {

    @apply bg-brand-black text-white ; // brand-black is the color that I customized in my tailwind.config.js

}

and the next code example is how it will be rendered

.button - primary {

    background: # 1b1b1b ;

    color: #fff ;

}

This color that you defined in tailwind.config.js can be used with any property where you can apply colors. So if you want the text color to be brand-black then you will simply write:

.button - primary   {

   @apply bg-light-gray text-brand-black;   // light-gray is another color that we defined. 

}

Which in the DOM, will render as

.button - primary { 

   background: # e4e4e8 ; 

   color: # 1b1b1b ; 

}

That was quick and easy, right?

I really enjoyed using TailwindCSS, it's simple, light, highly customizable, and so easy. I hope this post could give you all that you needed to know for building your project using the TailwindCSS.

For installation and checking out the more utility classes, you can follow the official documentation .

Good luck! :)

Written by Hansa Pandit
Frontend Engineer at Ramsalt Lab

https://ramsalt.com/nb/news/save-time-new-css-framework-tailwind