Overview

To create rich user interfaces and experiences, CSS frameworks are used extensively. There are a number of reasons for this; firstly, it is easier to build structured layouts as most modern CSS frameworks provide tooling. Secondly, it helps in rapid prototyping and allows us to change the experience in a very agile manner.

But with so many frameworks to choose from, selecting the best fit depends on the level of flexibility you are looking for. In this review, we will be looking at tailwindcss, a popular CSS framework that focuses on providing the most flexibility to the developers. Tailwind does not follow a particular design system, rather it allows the developer to build their own and at the same time abstracts boiler-plate code. If you are the type of person who wants complete flexibility of the style and are not too keen on overriding defaults provided by the framework then tailwind is the way to go.

Highlights

Tailwind is a low-level framework and can almost be considered as a small utility wrapper for boilerplate stylings. It provides a set of directives to generate a CSS file that can be imported into your application. While it has many advantages and intuitive directives, setting it up in your project has quite a few steps if you want good control over what is auto-generated.

Setup

• Tailwind CSS can be imported into your simple web project (non-npm project) by including the following line in your index.html.

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet” />

• To install it in an npm project, run the command npm install tailwindcss. Simply add the below statements to a CSS file in your project and run the command npx tailwindcss input.css -o output.css to generate the CSS bundle.

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

• If you already have a project which has postcss plugins like autoprefixer. Then you can switch the @tailwind directive with the @import directive as shown below:

@import “tailwindcss/base”;
@import “tailwindcss/components”;
@import “tailwindcss/utilities”;

• Include the following in your postcss.config.js file to resolve the styles:

module.exports = { 
   plugins: [ 
      // … 
      require(‘tailwindcss’), 
      require(‘autoprefixer’), 
      // … 
   ]
}

Customization

The above-mentioned methods allow for no control over the generated CSS bundle. To take granular control you can create a tailwind-config.js in the root folder of your project or run the command npx tailwindcss init. The npx command by default would create a minimal file with no defaults. If you want to change the name of the config script, then you can run npx tailwindcss init tailwind-config.js. The same has to be propagated to the postcss config file as well, as demonstrated below:

module.exports = { 
     plugins: [ 
       require(‘tailwindcss’)(‘./tailwind-config.js’), 
     ]
}

npx tailwindcss init --full, this would generate a configuration which is an exact mirror of the tailwind default. We would suggest that you customize this only after you have completely explored all the options. You can get the default configuration file and then pick and choose what styles you would want.

Replacement for traditional CSS frameworks

While traditional CSS frameworks are useful and extensive, they come at a cost. If your application is small, then the overhead of adding the library increases your overall application size. Another drawback is framework lock-in making any refactor an empirical task. Alongside web standards, browsers are providing support for newer and better style rules. It is becoming far easier to build the layout without any such overheads.

#ui #web-development #javascript #software-development #css