What is Tailwind CSS and how to use it?

In this ever-changing industry, we are here again with a new blog on a very popular and useful topic for you and that is Tailwind CSS. It is about time we learned what is Tailwind CSS and how to use it. Also, let’s know about why it’s getting popular and how it is different from other CSS frameworks. So, this is going to be the topic of this article and let’s get started.

Prerequisites- Check if you should read this blog

Before we discuss what and how of Tailwind CSS here are few things you need to know before getting started

• HTML: Intermediate knowledge of it would be good enough.
• CSS: Here I am not referring to the basic CSS styling, you need to know and you have to be actually good at making layouts simply by using flexbox or with a grid and this layout needs to be responsive because only then you can actually use this framework to its full potential.
• JavaScript: It’s not recommended or a must have thing but it will be good if you know this.

Are you a beginner and don’t have any prior knowledge of HTML, CSS, and JavaScript? Don’t fret, you have still enough time to learn them all along with Tailwind CSS. All you need to do is to take up our Web Premium course.

What is Tailwind CSS: An Introduction

Tailwind CSS is as told in its documentation is a utility-first CSS framework. With this it means that it doesn’t have those predesigned elements and components. All you get with tailwind CSS is a bunch of classes which you can use in combination to create a beautiful UI.

How its different from Traditional CSS Frameworks

Let’s take Bootstrap as an example.

If you know bootstrap then you know it actually gives you extra styling whether you need it or not. Say I want to use container class for simply giving a fixed width structure but bootstrap adds more styling to it by giving additional padding and margin for which I never added any classes or asked it to do.

Same thing for the components as well we add for the functionality but we also get the styling. Say I want to make a button but am I the one who is designing that button or it’s the bootstrap. Because we only added two classes btn and another for the background but if I want to change anything then I have to write additional CSS.

A New Approach

Let me just say it out loud I never liked the bootstrap styling the only thing I ever liked about bootstrap was its grid system and components. And once I learned JavaScript the only thing ever used since then was bootstrap-grid.css because yes making a website responsive is easy with it.

So if you are like me or say you want to create layout by yourself and want to style them without getting any existing style from the framework but by using classes from a framework then try using Tailwind CSS 🙂

Let’s meet with other useful HTML & CSS frameworks that are still in use for creating responsive websites and applications.

Tailwind CSS doesn’t have these inbuilt pre styled components. It will give you the classes and you can style it yourselves for example the container in the tailwind just gives you a width no padding and no margin. Now I know many people will disagree with me I think tailwind is good.

Look I am not trying to say Bootstrap is bad or anything what I am trying to say is there is a more interactive way to style your UI.

Let’s install Tailwind CSS

With this method you won’t get any error believe me! If you were following any youtuber and they didn’t get the error but you are getting then it is simply because they are not telling everything. So let’s begin.

Prerequisites

You need node installed on your system and it should be the latest version. If you are unsure of the version then open command prompt and type node-v to check the version.

I would recommend using VS Code simply because it comes with an in-built terminal and you will not need to open command prompt especially to compile anything.

Now create a folder where you want your project to be 

Now in the address tab click and write delete everything, write cmd and hit enter.

Once you do command prompt window will appear now simply write code . and hit enter again.

This is a shortcut from the command prompt to open VS Code. 

Now we need to create a package.json file to do that 

• Open a new terminal from the terminal menu at the top in VS Code.
• Write: npm init -y 
• This will instantly create a package.json file with all the info.

So we have Node.js VS Code and package.json its time to install tailwind. For more understanding, you can also read the installation for tailwind CSS. Anyways let’s continue. 

Now we are going to install three things here 

• Tailwind CSS
• Post CSS
• Autoprefixer

Let’s begin installing these: in the terminal continue with the commands given below.

npm install -D tailwindCSS@latest postCSS@latest autoprefixer@latest

*it will take some time to install all these

After the installation we need a configuration file to do following things:

• To write our own CSS
• To change the tailwinds default CSS styling
• To add more styling to already existing classes by using some predefined functions.

To create tailwind CSS configuration file in terminal, write the given code:

npx tailwindCSS init

*this file should be in the root folder

Now we need to create the folder structure and write some code to compile the tailwind into a regular CSS file so that browsers can easily understand it.

Create a src folder: inside this folder create a style.css and link this

/* ./your-CSS-folder/styles.CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

Create a dist folder: inside this folder all your project files will be stored like HTML, JavaScript and CSS file (the compiled one).

If you did everything right it should look like this.

Go to the package.json file and in script remove whatever there is, here we are going to create run command of our own to compile the tailwind CSS.

In scripts create a run command as follows. 

"build": "tailwind build src/styles.CSS -o dist/styles.CSS"

Now build is the command we will use to compile. Though you can use anything but I chose build since its more relevant here. After this we need to specify what we are building hence tailwind build.

Now we give the location of the source and location to generate the output file -o is for the output.

We are done now setting up tailwind is complete; it only needs to get compiled. So now, go to the terminal and use command npm run build this will compile everything and will place it in the output CSS you chosen in package.json file.

The empty style.css inside dist folder will look like this if you followed every step correctly.

Now you might think that linking any other framework is a lot easier than this. See! we are doing all this so that we can get the ability to manipulate the tailwind according to our will. Yes we can link the cdn in the header and move on but doing that has severe disadvantages. 

Here is the starter template you’ll need after installing and compiling for the html file

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/path/to/tailwind.CSS" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

Baking some buttons with Tailwind

<button class="bg-red-500 text-white font-bold rounded py-2 px-4">Click Here </button>

Now say you want a hover effect on the button and of your choice you can do it like this. 

<button class="bg-red-500 text-white font-bold rounded py-2 px-4 hover:bg-red-700">Click Here </button>

Did you notice the difference between a traditional CSS framework and Tailwind?

Here we are the one styling that button with the set of classes and using pseudo classes in this fairly easy as well. In simpler words you need to add class for doing everything and that class will only apply a simple CSS property nothing extra.

See how easy it is to work with.

If you want to change say existing classes or any CSS property to them yeah you can do that and you won’t need SASS to achieve that. Here you go.

For example add padding to the default class of container.

• Open tailwind.config.js 
• Inside theme create an object of the same class and style the way you want

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    container: {
      center: true,
      padding: '100px',
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Note: Don’t forget to run the compile command again before checking for preview.

Now say you want to create your custom class for a button like bootstrap has you can do so by 

• Open styles.css in src folder
• Below the existing create your class and style as you would normally

.old-btn {
    background-color: #cf0b0b;
    font-weight: bold;
    border-radius: 5px;
    padding: 20px 30px;
}

But you can style the elements in a new approach you can call the existing tailwind classes in the same stylesheet like 

/* tailwinds approach */
 
.btn {
    @apply bg-red-500 text-white font-bold rounded py-2 px-4;
}
 
.btn:hover {
    @apply bg-red-800;
}

Meaning you can use the existing Tailwind classes in the style.css while making your own CSS class how cool is that huh.

This pretty much the basics and here are few tips to help you along the way when building a UI with Tailwind.

Tailwind CSS Cheat Sheet

At Tailwind Components you can find a cheat sheet that actually lists every class tailwind has to offer. I would recommend checking that out once.

Tailwind CSS UI

Tailwind also offers the best UI components but they are paid but still here are some of the best libraries or websites that offer pre built tailwind blocks. And the best part about them is first they all are responsive and secondly you don’t have to add or install anything. 

• Tailblocks
• Meraki Ui
• Tailwind Kit
• Tailwind Toolbox
• Tailwind Components

Using these libraries you will be able to make a nice looking admin panel or a complete website UI.

Get ready to learn Tailwind CSS with us!

Become a part of our web design training by enrolling yourself in our professional web design courses which are covering every nut and bolt of Tailwind CSS. Let’s have a live meeting. Just contact us and schedule your demo session with our concern instructor.