Intro to Tailwind CSS
In my Journey to learn Javascript, much like everyone else’s, one of the first things I learned other than what data types their are or what’s a string, was that an application is built upon three main pillars.. HTML, CSS, and Javascript. As the projects I started working grew in complexity, so did file structures. Next thing I knew I have a framework for this a library for that, and a bunch of components .So now instead of managing three files I am now looking at ten to twenty files. Over this time not only did the amount of files grow to maintain, but so did my css file which had to account for every element in the project. At first thought, one might not think having one file to style the entire project does not seem all that bad even if its a big project. In my experience the bigger the CSS file the more likely you are to have different elements on different pages share the same styling. Most of the time you do, but then you start noticing that you fix one page and then the other breaks. So this is where Tailwind CSS comes to the rescue!
So what is Tailwind CSS? It is a utility-first CSS framework. Meaning that instead of having pre-made components you have all the building blocks to make them. Even though the name incorporates CSS in it, most of the if not all of your time using Tailwind, will be outside of a CSS file. Its first stable release was November 1, 2017. Tailwind CSS allows you creators to rapidly build custom designs that do not look like a framework but 100% custom.
Some advantages of incorporating Tailwind into your project are: Minimal CSS usage. Easy to make design changes from your view files as opposed to switching back and fourth. It provides a better developer experience, do to how much less you have to do and how much easier it makes things. It takes a mobile first approach which is important because more of the time people are using their smart phones to do or view anything. Last but not least it gives and nicely ‘polished’ and ‘designed’ and feel.
Next, let’s compare Tailwind CSS and Bootstrap which is another popular CSS framework. Tailwind CSS does not come with pre-built components as opposed to Bootstrap. Usually you can go to Bootstraps website copy some code and everything looks pretty, but this is not how Tailwind works. This may seem like a disadvantage but after a while you will be able to pick out a Bootstrap website as opposed to Tailwind which aims as having a unique and custom design for all. Unfortunately Tailwind’s class system makes the code look a bit messy as compared to Bootstraps single class for an element. On a more positive note it is Easier to parse look from the code. Which means you can see exactly what style its made up of, including color and size.
After deciding if Tailwind CSS is something you would like to utilize, you probably wonder how you can actually include it in your project and start working with it. To do so there are several methods. One method could be via the command line using:
npm install tailwindcss
or
yarn add tailwindcssSecondly, you could add it to your CSS. The @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 any tool that internally uses it, such as, 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";
If you have made is this far, then its time to put this great knowledge to use! Incorporate Tailwind CSS into your project and see for yourself how useful of a tool it can be.
