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
and then go to tailwind_dev folder
cd tailwind_dev
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
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
4. Make public and src folder
now its time to make two folder
in you'r terminal type
mkdir public
and
mkdir src
5. Make css file
first with
cd src
enter to you'r src folder and with
touch style.css
make you'r css file.
6. Make html file
then type
cd ../public
in you'r terminal to enter public folder and type
touch index.html
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;
save you'r changes !
8. Change package.json for install basics
open you'r package.json file
and replace
"test": "echo \"Error: no test specified\" && exit 1"
with
"build-css": "tailwindcss build -i ./src/style.css -o ./public/style.css"
9. Npm run
it's almost done, just type
npm run build-css
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">
Be happy!
Top comments (9)
"build-css": "tailwindcss build src/style.css -o public/style.css"
Correction:
"build-css": "tailwindcss build -i ./src/style.css -o ./public/style.css"
what dose '-i' do?
-i referred as a input
-o referred as a output
it's true, but I think -i is not necessary. I'll fix it. thank you!
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😉
Hey Mohammad,
It's a good article.
Thanks.
thank you♥️
Thank you for this tutorial :) I came to know about tailwindcss right now, I will check it out soon.
nice♥️😊