Tailwind CSS has taken quite a rapid growth in the last few months... Surely many of us find CSS to be hard and confusing on times. But wait, what about a backend developer? The same happened with me, I am a backend developer and I find it difficult to use CSS for making responsive websites...

Recently I came across a CSS framework called Tailwind CSS.

Trust me, once you use this, you will forget what CSS used to be like.

Getting Started

Let's get started by installing Tailwind CSS.
Follow the steps below -

Create a new project. Let's name the fonder tailwind_css.
Run npx tailwindcss init in the folder.

This will be good if you are making static websites and don't want node_modules/ in your project listing.

The command above will create the file tailwind.config.js.

Now let's say you have your project files in the sub-folder home.

So, this shall be the project listing...

Now edit the home/index.html codes like this to use tailwindcss perfectly.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Run the following command.

npx tailwindcss -i ./home/tailwind.input.css -o ./home/tailwind.css --watch

Now open the file in browser and you will see the responsive UI with only class names as inputs.

Using the new and better CSS!

Getting Started