Tailwind is an easily customizable CSS framework for maintainable and scalable responsive web development. The building blocks of Tailwind is a large set of primitive utility classes which works like Lego to build UI components.

Other common CSS frameworks are bundled with many predefined component styles like button, nav, tabs etc., which we may need to override in our CSS. Unlike bootstrap, Tailwind does not provide any predefined component. Tailwind provides style properties in low-level utility classes. This approach is usually called Utility-first or Functional or Atomic. Each single purpose utility class is basically intended to apply one style rule.

We may be using more classes than usual in html, but it makes the html self explanatory and predictable. We do not need to check either the style or inspector to diagnose the behaviour.

Installation

The best way is to install the Tailwind npm package

Step 1 - Install Tailwind via npm

npm install tailwindcss

Step 2 - Add Tailwind to your CSS

Add the Tailwind's base, component and utility styles into CSS using the @tailwind directive.

/* style.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 3 - Generate the CSS

npx tailwindcss build style.css -o output.css

Usage

Tailwind CSS file can also be used from a CDN or download the whole CSS and include in the html; then it will not be possible to customize or extend the default style. The best way is to install the Tailwind npm package as above.

Custom html design can be created using the Tailwind utility classes as below. The example shows a sample button style. It also shows the usage of pseudo class variant 'hover'. Pseudo classes like 'hover' and 'focus' followed with a : can be used as prefix with required property classes.

<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">
  		Button
	</button>

The default classes for padding, margin, width, font-size etc. have their property values defined as rem values in the default style. Below image shows the padding property definitions for the padding utility classes.

Also note that these classes can be customized to any property value or new classes can be added using the config file.

Responsive variants

Responsive variants are also used similar to pseudo class variants in the format ':', which makes it easy to rapidly develop pages without writing custom media queries.

Eg: md:p-20, lg:p-30

Grid system

Tailwind provides a set of default width classes for creating common columns in divisions of 2, 3, 4, 5, 6 and 12. The default classes looks like w-1/2, w-2/5, w-7/12 etc.

There are also a set of width classes like w-0, w-3, w-64 etc., which provides values from 0 to 16rem.

Separating style definition from html

Instead of adding the classes in html, we can apply them in our custom CSS. For this, Tailwind provides the @apply directive to apply any utility or other classes into your custom CSS blocks. To separate the functional classes from html, we can make use of the @apply directive. Below is an example to make reusable class.

// html file
<button class="btn btn-blue">
  Button
</button>


// style.css

@tailwind base;
@tailwind components;
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-600;
  }
@tailwind utilities;

In the above example, the custom styles are added above the tailwind utilities, which helps to override those custom styles by adding tailwind utility classes in html.

Customizing

To build custom designs, we may often need to override the default tailwindcss property values to suit our custom design. For example, the colors in our design may not be there in Tailwind default colors. Other styles like font styles, border radius, shadow etc. also may require customization. Tailwind is a PostCSS plugin and configured using Javascript.

Tailwind uses the tailwind.config.js file to apply the users property values to the CSS. The config file is generated using the below command.

npx tailwindcss init

A default config file without any values is generated as below

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Adding our custom style property values in theme{} overrides all the default values. If we need the default values and add some more, we add the same inside variants{}. Below is an example to override the default colors and add an extra screen size.

theme: {
    colors: {
        red: {
        100: '#FF6E43',
        200: '#fd8b6a'
      },
    }
    extend: {
        screen: {
	'mobile': {'max': '767px'},
        }
    },
  },

Conclusion

In contrary to writing inline styles, Utility-first approach is like a powerful API to the CSS which helps random web development, easily customizable and responsive friendly. The use of large set of classes may look bloated, but on the other hand it takes away the complexity from custom CSS. This powerful tool definitely overweighs the illusion of 'Separation of concern'.