Intro to Tailwind CSS: Just what you need from a css library

I was always enthusiastic about UI development but was always intimidated by the kind of css prowess you need to build something which looks very clean. Converting a design provided by the UX team to a functional webpage was something very hard for me before I found this cool library.

Tailwind is a low level css library which helps you in setting up the website layout very easily without writing any custom classes. It does not dictate how certain sections of your webpage should look like. This is quite different from popular UI libraries like Bulma or Bootstrap. Both of them have a kind of strong impression of its design in the utility classes they provide. A website made using bootstrap can be identified easily. This is something useful if you just want to build something casual and don’t want to define design for the website components.

If you are working with a UX team, then you get custom designs and the look and feel of the website depends on the design provided by them. This is where Tailwind really shines above other offerings. It does not give you any kind of template to work on instead it provides those minimal utility classes which helps in building a custom design much easily without writing custom classes(which can get really messy). It is very flexible and less restrictive in this regard.

Tailwind has a really good documentation as well. These are one of best docs out there for any library. If you want to add a padding of 4px on all the 4 sides(top,bottom,left,right) , you can just go to the docs and search for it.

This will show how to use the padding class in your html. It also shows the different scales for it. Remember 1 rem is usually set to 16px which default font size in browsers.

Padding utility classes

Similarly you can find all kinds of documentation for anything you need in your html page. You can simply search for it in the tailwind docs search box.

DEMO

You can play around with Tailwind without any setup by using codepen or play.tailwind which will be demonstrated in the demo below. I will be using tailwind play for the demo. The demo shows how you can center a text both vertically and horizontally pretty easily. This was something asked in one of my Full Stack Dev interviews as an icebreaker.

1. Open tailwind play. Remove all the html code to get an empty page on the preview.
2. Add a div tag with some text

3. Lets add a background color by using the bg-purple-300 class

4. Now center the text horizontally by converting it to a flex and justify contents. You can search in the docs for justify content

Add the class as shown in below.

5. Now lets add a height to the div so that it covers the entire screen as height. This can be looked up here

6. To center vertically we need to use the align-items css class which can be looked upon in the docs to see the equivalent tailwind class to use.

7. We can even use the css class place-items to center a div. You would need to use grid instead of flex as flex is one dimensional.

This is a basic demo of how tailwind provide those crucial minimal things you need from a css library and nothing more. I really love this about tailwind and now I really enjoy the process of creating webpages. If you would like to explore more on Grids and layout do checkout this video. Grids are a great layout tool. He has done a great job in demonstrating how easy it is to use grids with Tailwind. I hope this article would serve as a good intro for anyone looking to checkout Tailwind.