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 initin 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.htmlcodes like this to usetailwindcssperfectly.
<!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.
Top comments (0)