DEV Community

Cover image for Using the new and better CSS!
Akash Pattnaik
Akash Pattnaik

Posted on

Using the new and better CSS!

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...
Directory 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>
Enter fullscreen mode Exit fullscreen mode
  • Run the following command.
npx tailwindcss -i ./home/tailwind.input.css -o ./home/tailwind.css --watch
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)