Introduction to Tailwind with helpful comments
See it under:
I have been asked to create a small manual for this project, so here we go:
TAILWIND CSS
- Have Folder and use good old "Git Bash Here" with MinTTy.
- Run "npm init -y".
- Run "npm i -D tailwindcss".
- Run "npx tailwindcss init".
- Create file with "touch input.css" and add the following to it: @tailwind base; @tailwind components; @tailwind utilities;
- We want TW to create a CSS File for us, so open "package.json" and add the following to "scripts": "build": "tailwindcss -i ./input.css -o ./css/main.css", "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
- Run "npm run build".
- Create File with "touch index.html".
- Run "npm run watch", and TW will continuously create a unique "main.css" for us.
- Adjust "tailwind.config.js" to your needs. We adjust "screens" and "colors" here.
- Create a page, nice and fast, with tailwindcss!