Tailwind CSS
UI Development

Everything you need to know about Tailwind CSS

CSS is undoubtedly the aesthetical soul of your application which is the first thing the user’s eye is bound to catch. While it seems easy to learn about the styling arena of web development, if not done right it can make or break your application’s purpose. It is a human tendency to be drawn towards aesthetically pleasing websites. However, as the size of your application increases the size of your style files might also increase. This could lead to confusion in the later stages of application development. As a solution to the above issue CSS should be managed in such a way that leads to minimum havoc as and when the size of the files increases. We can do it efficiently by making use of Tailwind CSS.

Brief History:

  • Tailwind v1.0
    It was the first stable release of family. The first alpha was released on November 1st, 2017. It’s been adopted by tech giants like Mozilla and Algolia and used to build new startups like RightMessage and PingPing.
  • Tailwind v1.1
    The successive upgrade to v1.1 included new screenreader visibility utilities, new utilities for setting the placeholder color on form elements, new variants for first-child, last-child, nth-child(odd) and nth-child(even)
  • Tailwind 1.2
    It is the current stable version being used extensively due to added support for CSS grid, transitions and transforms.

How to use it?

There are two ways to include Tailwind CSS in your project:-

  • Install it via npm
  1. Run the following via the command prompt:

    #  Using npm

    $ npm install tailwindcss

    # Using yarn

    $ yarn add tailwindcss
  2. Add Tailwind to your CSS
    @tailwind directive is used to plugin Tailwind’s default components, base and utility styles into the CSS as follows:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

    If your application is  using postcss-import (or any tool that internally uses it, for example, Webpacker for Rails), use our imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";

     

  3. Create your Tailwind config file (optional)
    If you do not want to carry out this step you can always use the default config file provided by the framework.
  4. Process your CSS with Tailwind
    Using Tailwind CLI:-For small scale projects or just trying your hands on Tailwind, you can use Tailwind CLI to process your CSS:

    $ npx tailwindcss build styles.css -o output.css

    -Using Tailwind with PostCSS
    For most applications, you would want to add Tailwind in your build chain as a PostCSS plugin.

    Usually, it means adding it as a plugin in the postcss.config.js file:

    module.exports = {
      plugins: [
        // ...
        require('tailwindcss'),
        require('autoprefixer'),
        // ...
      ]
    }
  • Using Tailwind via Cdn
    This approach is not preferable as many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process. Some of them are as follows:-
    1. You can’t customize Tailwind’s default theme
    2. Directives like @apply, @variants, etc.
    3. You can’t enable features like group-hover
    4. You can’t install third-party plugins to avoid all of the above issues, it is recommended to install it via npm. 

Why use Tailwindcss?

After knowing how to use it, the next question that arises into the mind is ‘Why to use it?’. The main reason why we must plan to shift onto Tailwindcss for styling is that it reduces your CSS code by making use of utility classes. It can reduce an ample amount of CSS code. Even if we want to create components and give custom styling to them we can do so by simply making use of the utility classes provided to us by this framework.

In addition to the above, it has numerous other benefits which are listed below.

Advantages of Tailwind CSS:-

  1. Utility-based approach
    As discussed above usage of utility classes to provide styles reduces the size of our stylesheets. The best part is this framework does not explicitly gives us the components but instead, it provided us some classes which we can use to style our custom components.
  2. UI responsiveness intact

    By default this framework uses a mobile-first approach, the utility classes available here can be applied at different breakpoints conditionally, thus giving us the freedom to build complex responsive layouts with ease.
    To add a utility but only have it take effect at a certain breakpoint, all we need to do is prefix the utility with the breakpoint name, followed by the : character:-

    <!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
    <img class="w-16 md:w-32 lg:w-48" src="...">

  3. Targeting pseudo-elements
    Styling the elements on hover, focus, etc can be done by adding relevant pseudo-class as a prefix with the utilities. For example, if we want to add style on the focus of an input element we can do by simply prefixing the utility classes with focus:

    <input class="bg-gray-200 focus:bg-white border-transparent focus:border-blue-400 ..." placeholder="Focus me">

  4. Promotes reusability of component styles
    There might be combinations of various utility classes that we will be using at multiple places in our project, this is where we can make use of the @apply directive to pull common utility patterns. Let us say we have a button, we can use @apply directive to use common utility patterns:-

    <button class="btn-blue">
           Button
    </button>
    <style>
    .btn-blue {
          @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }
    .btn-blue:hover {
          @apply bg-blue-700;
    }
    </style>

    However, the above approach might not be feasible in case we have large HTML that is being used at multiple times. In such cases, we should create a template with the HTML markup that is supposed to be re-used and use relevant utility classes to style them.
    Also, always add custom component classes before your utilities.

  5. Customizable
    The underlying benefit is that it is a highly customizable framework. Even though this comes with a default configuration file, it’s quite easy to override the default tailwind.config.js. We can practically override the theme very easily adjusting the fonts, spacings, colors, etc.

Disadvantages of using Tailwind CSS:

Given the above benefits of using Tailwind the only downside to it I feel is that it might get a little confusing for the users at first. It might take them some time to get used to the concept of using utility classes and control their urge to override the HTML styles as we do in bootstrap. Also, since it is still evolving the users might sometimes find it difficult to keep up with the newser changes that they can incorporate going further.

How is Tailwind different from Bootstrap?
After going through so much about Tailwind CSS, one question that might be arising in our minds is what is the difference between the OG Bootstrap framework and this? Well, Tailwind is quite different from Bootstrap as it does not have a UI kit. It has no pre-built UI components or any default theme. It has a collection of predesigned widgets that can aid the process of website building for you but it doesn’t impose any design-related constraints. It provides us with ready-to-use classes to create custom styling for our components hence, making the overall coding environment neater and smarter.

Tailwind, if used efficiently, can greatly benefit us if our application is large in size as it will allow us to enhance and provide compact styling. It will make it easier for us to make complex components responsive. Who knows it might revolutionize the way we work with CSS in the future.

About The Author