TailwindCSS: Breeze through your styles

Published in

codeburst

5 min readJul 31, 2020

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.

Tailwind in these aspects sounds the most logical successor to traditional frameworks as they allow us to bundle only the styles that we would want as elaborated in the previous section. So much so that you can extend the given styles and create your styles without having to overwrite individual properties. Let us attempt to create our button style called .btn using tailwind. we could use the @apply directive as shown below:

.btn {  
   @apply bg-black-500 text-white font-bold py-2 px-4 rounded-full;
}

This looks so much cleaner than overwriting properties (shown below), sometimes even having to add !important. Which would be a huge maintenance overhead.

.btn { 
    background-color: black !important; 
    color: white; 
    padding: 0.5rem 1rem; 
    border-radius: 9999px;
}

As tailwind concerns itself with providing small wrappers to commonly grouped styles, it enables us to create our versions of styled-components. One can also add plugins if it creates the theme that they want to use. The above declarative methods of bootstrapping the styles enable the application logic to be loosely coupled which helps prevent us from getting stuck with a particular framework.

Common Issues faced

If your preprocessor is unable to find the tailwind config file then it does not error out. No bundle is generated in this case. So if you are moving the tailwind config location, then it would be better to run the npx command in the new location and transfer the contents of the file.

While setting up or running a project with tailwind in windows, you may see the below error:

According to tailwind issues, this happens if your tailwind config file is named as tailwind.js and the npx tailwind command is trying to run it as the script instead of the tailwind CLI. this can be solved easily by renaming your config file to tailwind-config.js or anything else.

Evaluation Metrics

Conclusion

Tailwind CSS brings about an evolution to CSS frameworks by allowing developers to control what they need to bundle in their application. Although its setup may not be as simple as a single command, it is improving in making its users aware of how to make the most of it. Let us know if you want us to show you how to build a theme using Tailwind in the response section below or if you have faced any issues with tailwind and we can help you with the same. Hope you’ve received some good insight into the features of Tailwind. Happy coding!

Check out the package and some reading materials

Video review of the package

Video review of the package with interesting use cases and in-depth exploration of the features coming soon! For more related content, check out Unpackaged Reviews.

Disclosures

The content and evaluation scores mentioned in this article/review is subjective and is the personal opinion of authors at Unpackaged Reviews based on everyday usage and research on popular developer forums. They do not represent any company’s views and are not impacted by any sponsorships/collaboration.