DEV Community

Devr
Devr

Posted on

Tailwind Css : Getting Started

First of all what's tailwindcss actually?-
It's a utility-first Css framework in which you can directly apply css styles to elements using classes made for it.Eg:- for text looking small text-sm can be used, To make it look very big text-2xl can be used , for making a element having display flex ,only flex class can be used, and so on...,

Its not just another Css framework
Tailwind css is fully customize-able framework which gives you full freedom over design. What you want,how should website look ..,is all in your hands.

Now you have a basic idea about how tailwindcss works & what it is actually, but now I'll tell you how to get started,i.e installation & usage.

1.) First of all you'll need -

  • Nodejs installed (Npm) [To check node is installed properly enter command node -v &npm -v]

  • A code editor (VS-code is highly recommended,Other editors are Sublime-Text,Atom,etc)

2.) Now in VS-code press Ctrl+` to open a integrated terminal OR Open a terminal Manually on your machine.

3.) After a terminal is opened navigate to your project folder or make one by entering ' mkdir your-folder-name ' & then enter ' cd your-folder-name '

4.) Atlast let's install tailwindcss in your project

  • Enter commands-


npm install -D tailwindcss
npx tailwindcss init

  • In your tailwind.config.js add path to all of your template files-


module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}

  • Create a src folder where you'll write all source code & then create a input.css file , open input.css and add following code-


@tailwind base;
@tailwind components;
@tailwind utilities;

  • Create index.html(in src ) file and add some boiler-plate with link to style-sheet file-


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

  • Create dist folder in your root and in it create output.css file to produce all output css

  • And then lastly build your css using-
    npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Hurray!.., you should see your design changes in browser by opening index.html there

Thats all! you've installed tailwindcss successfully & Now can create beautiful elegant web-pages using it.

ThankYou for reading this post and if it helped you please share :)
Suggestions to improve this posts are welcomed!

Top comments (0)