DEV Community

loading...
Cover image for How to setup a project using tailwindcss for beginners

How to setup a project using tailwindcss for beginners

mohammadhassani profile image mohammad hassani ・2 min read

Hi there!
With tailwindcss you can rapidly build modern websites without ever leaving your HTML.

to start a project using tailwind follow me!

1. Make a folder

if you use linux OS just open you'r terminal and type:

mkdir tailwind_dev
Enter fullscreen mode Exit fullscreen mode

and then go to tailwind_dev folder

cd tailwind_dev
Enter fullscreen mode Exit fullscreen mode

2. Make package.json file

to make package.json file you need npm ;
if you don't have npm just follow this link.
after that,in you'r terminal type

npm init -y
Enter fullscreen mode Exit fullscreen mode

now if you check the tailwind_dev folder; you'll see the package.json file!

3. Install tailwindcss

for install tailwind just type

npm install tailwindcss --save
Enter fullscreen mode Exit fullscreen mode

4. Make public and src folder

now its time to make two folder
in you'r terminal type

mkdir public
Enter fullscreen mode Exit fullscreen mode

and

mkdir src
Enter fullscreen mode Exit fullscreen mode

5. Make css file

first with

cd src
Enter fullscreen mode Exit fullscreen mode

enter to you'r src folder and with

touch style.css
Enter fullscreen mode Exit fullscreen mode

make you'r css file.

6. Make html file

then type

cd ../public
Enter fullscreen mode Exit fullscreen mode

in you'r terminal to enter public folder and type

touch index.html
Enter fullscreen mode Exit fullscreen mode

7. Import basics

open you'r IDE and then open you'r style.css file in src folder and write this codes to import tailwind base,components and utilities

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

save you'r changes !

8. Change package.json for install basics

open you'r package.json file

Alt Text

and replace

"test": "echo \"Error: no test specified\" && exit 1"
Enter fullscreen mode Exit fullscreen mode

with

"build-css": "tailwindcss build src/style.css -o public/style.css"
Enter fullscreen mode Exit fullscreen mode

9. Npm run

it's almost done, just type

npm run build-css
Enter fullscreen mode Exit fullscreen mode

in you'r terminal.
after that, if you check the public folder you can see the style.css that include tailwindcss class !

10. Last thing for done

just open you'r html file and make you'r project,
to link style.css to you'r html file;in head tag write this code:

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

Be happy!

Discussion (5)

pic
Editor guide
Collapse
madza profile image
Madza

Good tutorial and pretty straight forward 😉
I remember it was a bit trickier to pair it with 3rd party frameworks or compilers like Svelte a while ago😉

Collapse
sajaddp profile image
Sajad Dehshiri

Hey Mohammad,
It's a good article.
Thanks.

Collapse
mohammadhassani profile image
Collapse
gouravkhunger profile image
Gourav Khunger

Thank you for this tutorial :) I came to know about tailwindcss right now, I will check it out soon.

Collapse
mohammadhassani profile image