logoNavigate back to the homepage
ARCHETYPER

Tailwind

KNSI

·

 
August 1st, 2020 · 4 min read

Tailwind

Overview

To create rich user interfaces and experiences, CSS frameworks are used extensively. A couple of reasons could be attributed to this trend. Firstly, it is easier to build structured layouts as most modern CSS frameworks provide tooling for the same. Secondly, it really helps in rapid prototyping and allows us to change the experience in a very agile manner.

But with so many frameworks to choose from, which one would be the best to go with depends on the level of flexibility you are looking for. In this review we will be looking at tailwind CSS, A popular CSS framwork that focuses on providing the most flexibility to the developers. Tailwind does not follow a particular design system, rather 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 in overriding defaults provided by the framwork 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 boiler plate stylings. It provides a set of directives to generate a CSS file which 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 control over what is auto gnerated.

Setup

  • Tailwind CSS can be imported into your simple web project (non npm project) by including the following line in your index.html.
1<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  • To install it in a npm project run the command npm install tailwindcss.
1@tailwind base;
2
3@tailwind components;
4
5@tailwind utilities;

simply add the above to a CSS file in your project and run the command npx tailwindcss input.css -o output.css to generate the CSS bundle.

  • 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:
1@import "tailwindcss/base";
2
3@import "tailwindcss/components";
4
5@import "tailwindcss/utilities";

Include the following in your postcss.config.js file:

1module.exports = {
2 plugins: [
3 // ...
4 require('tailwindcss'),
5 require('autoprefixer'),
6 // ...
7 ]
8}

Customization

The above mentioned methods allows 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 demostrated below:

1module.exports = {
2 plugins: [
3 require('tailwindcss')('./tailwind-config.js'),
4 ],
5}

npx tailwindcss init --full, This would generate a configuration which is an exact mirror of the tailwind default. We would suggest you to customize 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 emperical 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 own styles without having to overwrite induvidual properties. Let us attempt to create our own button style called .btn using tailwind. we could use the @apply directive as shown below:

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

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

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

As tailwind concerns itself in 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 enables the application logic to be loosely coupled that help us from getting stuck to 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:


tailwind terminal

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

CategoryRatingsDeliberations
Ease of useAveragecross platform support has its issues which has been persistent, npx service provides a good default value, better setup defaults could be provided for novices
CommunityGoodFrequent updates, Feature requests are a common sight, few outstanding issues
Active usageGoodAround 350K downloads every week and is steadily increasing every week
VulnerabilitiesGoodNo vulnarablities seen or raised
Docs and TrainingsGoodOfficial website has detailed explanation of syntax and details of use, detailed explanation of core concepts, well maintained github repos for demo

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 definitely improving in making its users aware on 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

  • https://tailwindcss.com/docs/installation
  • https://www.npmjs.com/package/tailwindcss

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 is not impacted by any sponsorships/collaboration.

Header Photo by Jordan Ladikos on Unsplash

More articles from Unpackaged Reviews

Date-fns

Instantly solve all your date-time issues!

July 28th, 2020 · 4 min read

Chalk

Let the console show its true colors!

July 17th, 2020 · 3 min read
© 2020-2021 Unpackaged Reviews
Link to $https://twitter.com/unpakgd_reviewsLink to $https://unpackaged-reviews.medium.com