How to setup a project using tailwindcss for beginners
Hi there! With [tailwindcss](https://tailwindcss.com/) you can rapidly build modern websites without ever leaving your HTML.
Hi there! With tailwindcss you can rapidly build modern websites without ever leaving your HTML.
to start a project using tailwind follow me!
- 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
- 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
- Make public and src folder
now its time to make two folder in you'r terminal type
mkdir public
and
mkdir src
- 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
- 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"
- Npm run
it's almost done, just type ```bash 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:
```html
<link rel="stylesheet" href="style.css">