Tailwind CSS from Zero to Hero - Up and Running (Part 1 of 4) 🚀
Tags: tailwindcss, html, css, tutorial
Published: 2021-05-06 11:49:38

[Check out the next articles in the series >](#next-articles-in-the-series)

Welcome to the complete Tailwind CSS guide you need to build high-quality frontend webpages. In this entire series of articles, we will be covering every single topic needed in order to master the complete workflow of Tailwind.

Starting from absolutely nothing you will get to know all about it, including why you should use it, what features does it offers and what are the benefits over other frameworks.

And don’t worry there will be examples, clear explanations, and details you need to know about each topic covered. Not only that, we will be focussing on some lesser-known features which are useful for real-life applications.

So who is ready to dive into the world of Tailwind? Let’s start with the most common question you might have now.

### What is Tailwind CSS?

> [**Tailwind**](https://tailwindcss.com/) is a _utility-first_ CSS framework that lets you add styles to your web pages without writing a single line of custom CSS code.

Let’s dissect the two important things I wrote above:

1.  _‘Utility-first’_ means that instead of regular and old-fashioned framework classes, it works on low-level utilities which are essential to style any HTML element you wish. These may include styles like `padding`, `display`, `width`, `height` etc.

2. _‘Without writing a single line of custom CSS code’_ means that well...you are getting rid of those long CSS code blocks you need to write just to style one element according to the design provided to you. Tailwind handles this all.


So instead of pre-built components, it provides utility classes. That’s what makes it different from others. Adam Wathan, the creator of Tailwind, writes how a utility class is approached in [this article](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/).


### But why Tailwind?  


I get it. There are many CSS frameworks and libraries like Bootstrap, Bulma, Foundation, etc. which are really popular and used widely. You might feel, “Why do I need to learn about yet another CSS framework? What’s the use? How will it benefit me?”  And my answer is, “While it may not be the perfect solution to your style needs, it does have the following features that you should reflect on and try…”:

1. **You use only what you need**: most of its competitors give you too many unnecessary classes, straight at your face. That becomes a lot to digest especially when you are working on some large-scale projects. With Tailwind you choose what styles you need to apply, code it and there it reflects immediately. 


2. **You don’t need to code custom CSS**: well, in most cases you don’t need to override base classes. Until you have a very complex design system with tons of the custom element, you will be using the in-built styles provided by this framework as it always gives you low-level utility classes. 


3. **It even removes the not-used CSS code!** Thanks to PurgeCSS (we will talk about this next), when you run its commands, it will automatically remove every CSS code we aren’t using in our project. The output of the final bundle we get is clean without any heavy load, thereby improving CSS load time and thus the overall load time of the page. 


4. **Really easy to customize, if you like**: of course, there are times when what’s provided isn’t enough. You are free to change its config file, add your own mix, and deliver on what your design lead said! It’s just a matter of adding some objects to its JSON file and there you have it! 


5. **Built-in responsive classes**: no need to write those tricky media queries. With Tailwind, you plug in the responsive powers directly in your HTML. Everything changes magically once you have applied the breakpoints.


6. **Awesome auto-complete support**: if you are working on the popular VS Code tool to write code, you can install the [Tailwind CSS IntelliSense extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) which provides you autocomplete suggestions, linting, class definitions, etc. So if you forget what `padding` size to apply, just start typing and see the difference. 


7. Support for **dark mode**, new CSS features like **Grids**, and even their own **[component library](https://tailwindui.com/components?utm_source=tailwindcss&utm_medium=navigation)**. Need I say more?



### The PurgeCSS Effect   


Tailwind CSS is blessed with Purge. [PurgeCSS](http://purgecss.com) is a tool to remove unused CSS from your CSS file. You can easily integrate it with your Tailwind project.   

While optimizing for production (more about production in Part 4 of this series), when you use Purge, it will check for all of the unused classes in your HTML code. You just add any file extension that includes a markup code like _.html_, _.jsx_, _.vue_, etc. to the config object and then run the Purge command. You can see your output build files are much optimized and use only the classes they need.  

Don’t worry, we will get to know all about this towards the end of the article series.

Now you know what all it has to offer and why it just might be the next CSS framework for your web app. 

Part 1 of this article series will cover how to get started with Tailwind and make a quick webpage section. Just the barebones you need to have the confidence in writing the code.

Here’s a quick rundown of the entire process we will go through:

- [Installation](#installation) 
- [Basic concepts](#basic-concepts)  
- [Browser support](#browser-support)  
- [A quick demo](#a-quick-demo)  
- [Conclusion](#conclusion)  
- [What’s next?](#whats-next)


### Installation   

Pssst...wait. I have to tell you that there is no such thing as running some `npm` commands for now. We will be scratching only the upper layer of simply pulling the CDN for the current demo. 

The main goal right now is not to start with a heavy workflow but to understand the basic concepts.  

With that, you can open up your _index.html_ file, write the initial HTML code and then add the following:

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
This pulls in the latest configuration build via CDN so that you can use the base classes on the go. 

Okay, looks like this really quick installation is done! Can we move on with what we are about to build? Not yet. First, let’s clear out some basic concepts.

### Basic concepts

Tailwind comes with a good amount of [utility classes](https://tailwindcss.com/docs/utility-first) that you should know. Let’s take a look at the most common ones with an example.

If you were to make this small box which is aligned to the center of the webpage you will need to write the following CSS (the exact numbers will vary):

![Box image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sxjk3ehsbvzbqbnf7bf.png)


```css
div {
  width: 200px;
  height: 200px;
  display: block;
  background: white;
  border-radius: .5rem;
  box-shadow: 3px 0px 14px -1px rgba(0,0,0,0.16);
  margin: 0 auto;
}
```

But the same style can be done with Tailwind CSS as:

```html
<div class="min-h-screen bg-gray-200 flex flex-col justify-center">
    <div class="sm:mx-auto">
        <div class="bg-white shadow-lg p-20 rounded-lg" />
    </div>
</div>
```

At first glance this might be a bit uneasy for you to comprehend what is written but allow me to explain each entity here:

- There are three `div` elements we need to create that element from scratch. The first one provides the whole container a minimum height of `100vh` so that now we can use the power of [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to align the entire element to the center of the screen. 

- The second `div` has some responsive alignment class which can be realized when you change the width of the viewport (see the live demo link to this code below).

- Finally, we have the actual square element with all the style properties. 

Let’s now understand what utility classes are being used.

1. `min-h-screen`: this equals `min-height: 100vh;` in CSS. 

2. `bg-gray-200`: this gives the webpage `body` element a background color of light gray or `rgba(229, 231, 235, 1)` to be specific.

3. `flex flex-col justify-center`: these are all the Flexbox styles. It tells Tailwind to use `display: flex;` use `flex-direction` like `column` and then justify the content to center.

4. `sm:mx-auto`: every time you see a prefix applied to a Tailwind property, you can be sure that it’s either using a responsive design feature or some state prefixes like hover, focus, and other states. Here on the small viewports, we want the horizontal margin (i.e. left and right margins) of our container to be `auto`.

5. `bg-white shadow-lg p-20 rounded-lg`: all of these corresponds to how the box we made actually ‘looks’. Starting from making its color white to adding a large shadow, adding padding of `5rem`, and then rounding off the corners.

Now from where I got to know that `p-20` equals `padding: 5rem;`? Well, all of these are very well documented on [their official documentation](https://tailwindcss.com/docs). It's good to know that _Tailwind sizes are based on the multiplications of `0.25rem` units._

If you like then you can try to play with this code I wrote above [here](https://play.tailwindcss.com/7nFzsDaoz3).

### Browser support

It is really important to know which browsers Tailwind supports and how to manage vendor prefixes if any so that a wide array of browsers and systems are supported.

As of the time of writing this article, Tailwind CSS supports the latest stable versions of Chrome, Firefox, Edge, and Safari. But if you are the old IE guy and need support for that (in any case) then the latest (v2.0) version of Tailwind isn’t for you. You have to [downgrade to v.1.9](https://blog.tailwindcss.com/tailwindcss-1-9#upgrading) for that.

For those who are not using the Tailwind CLI tool (which adds all the vendor prefixes automatically), you can use [Autoprefixer](https://github.com/postcss/autoprefixer).


### A quick demo

Time to put some things into practice as we make the following button with Tailwind CSS. Let’s try making this one:

![Final button output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y0dvb4tc5zxv75zhd9z.png)

1️⃣ **Padding:** first, we use the `<button>` HTML element, add the label and give it proper padding values. Now, this might be something different from what we usually do in proper CSS. No need to add custom height and width values or use `display: block;`  We are simply using the padding values both on the `x` and `y` axes. 

The button is rectangular and thus we can give it more `x` padding value than `y`. In the language of Tailwind, it is `px-8 py-4` respectively. 

> `px-8` equals `padding-left: 2rem; padding-right: 2rem;` 
> `py-4` equals `padding-top: 1rem; padding-bottom: 1rem;` 

```html 
<button class="py-4 px-8">Join now</button>
```


2️⃣ **Background:** this button has a blue background and Tailwind comes with a lot of [different color shades](https://tailwindcss.com/docs/customizing-colors) for one prominent color. For us `bg-blue-500` suits as it gives us the `500` color shade of the blue color. [Here is the entire list of background colors to choose from](https://tailwindcss.com/docs/background-color#class-reference). 

The higher the shade number, the darker the color gets and vice-versa.

> `bg-blue-500` equals `background-color: rgba(99, 102, 241, 1);`

OUTPUT:

![Button with padding and background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isxs8cs1fki9fane777r.png)


3️⃣ **Rounded corners:** here we can either use `rounded-xl` or `rounded-lg` classes which simply means ‘extra-large rounded corners’ or ‘large rounded corners’. The first one fits well and thus `xl` seems a good choice.

> `rounded-xl` equals `border-radius: 0.75rem;`

```html
<button class="py-4 px-8 bg-blue-500 rounded-xl">Join now</button>
```

OUTPUT:

![Button with rounder corners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2vp4wg516svqgsyarfn.png)


4️⃣ **Text color, transform, and weight:** the black text on a blue background calls for contrast issues. So we have to change it to white. For text colors, you can simply say `text-white`. As for making it uppercase, it’s simply the `uppercase` utility class. Easy!


The `font-weight` is not the regular one or full-blown bold. Hence `font-semibold` is the way to go!

> `text-white` equals `color: rgba(255, 255, 255, 1);`
> `uppercase` equals `text-transform: uppercase;`
> `font-semibold` equals `font-weight: 600;`

```html
<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold">Join now</button>
```

OUTPUT:

![Button with text transforms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dapsjmqnubrhqup48ly.png)

5️⃣ **Shadows:** the final step is to add some shadows around our button. The `shadow-lg` class gives us the appropriate shadow values we need for our button. It’s not entirely big and not very small.

> `shadow-lg` equals:
`box-shadow: --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);`

```html
<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>
```

FINAL OUTPUT: 

![Final button output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y0dvb4tc5zxv75zhd9z.png)


And there you go! You just styled a button without coding any CSS! The best part? You never left your HTML document and it was way quick and easy to make such elements.

Here’s the entire code with responsive utility classes included just like we did it in the box above:

```html
<div class="min-h-screen flex flex-col justify-center">   
    <div class="sm:mx-auto">
        <button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>
    </div>
</div> 
```

### Conclusion

In this article, you were introduced to what Tailwind is, how it provides you with its special utility classes, its features, and how you can make a custom button element without ever leaving the HTML file.

It was all about kickstart your Tailwind journey as a complete beginner. I hope I was able to give you a quick glimpse of the topic.

### What’s next?

In the next tutorial of the Tailwind CSS from Zero to Hero series, we will look into how the utility-first approach really works and how Tailwind uses it to make more dynamic and functional elements. Stay tuned!

---

Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆

---

## The [#DevHumour](https://twitter.com/search?q=%23devhumour&src=typed_query) Corner 😂

![Dev Humour Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c83yfqnclnyv7op7o9zo.jpeg)

---

## Some of my previous articles

- [Create powerful and flexible forms with React Hook Form. 🪝](https://dev.to/vaibhavkhulbe/create-powerful-and-flexible-forms-with-react-hook-form-1cd1)
- [Create smoking Hot toast notifications in React with React Hot Toast. 🔥](https://dev.to/vaibhavkhulbe/create-smoking-hot-toast-notifications-in-react-with-react-hot-toast-30p8)
- [5 really cool web technologies to know! 🤩](https://dev.to/vaibhavkhulbe/5-really-cool-web-technologies-to-know-2maj)

---

## Find me on

| [Twitter 🐦](https://twitter.com/vaibhav_khulbe)  | [Instagram 📸](https://instagram.com/vaibhavkhulbe143/)   | [LinkedIn 👨🏻‍💻](https://www.linkedin.com/in/vaibhav-khulbe/)  | [Everywhere else 🌐](https://about.me/vaibhav_khulbe)
|---|---|---|---

---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

---

### Next articles in the series

- [Tailwind CSS from Zero to Hero - The Utility-First Workflow (Part 2 of 4)](https://daily.dev/blog/tailwind-css-the-utility-first-workflow)
- [Tailwind CSS from Zero to Hero - Responsiveness and Custom Utilities (Part 3 of 4)](https://daily.dev/blog/tailwind-css-the-utility-first-workflow)
- [Tailwind CSS from Zero to Hero - Extracting Components and Setting up for Production (Part 4 of 4)](https://daily.dev/blog/tailwind-css-from-zero-to-hero-extracting-components-and-setting-up-for-production-part-4-of-4)
- [Tailwind CSS from Zero to Hero - Dark Mode, JIT & More!](https://daily.dev/blog/tailwind-css-from-zero-to-hero-dark-mode-jit-more-bonus)