A step by step complete guide on how to set up Tailwind css and create an example Tailwind css project
Followed the YouTube tutorial: https://youtu.be/pYaamz6AyvU?si=3pRriJGCcwxB34gR
• Make an empty folder for tailwind css learning, open in vscode.
• In terminal, write npx tailwindcss init
//it will create a file : tailwind.config.js
//make sure, you have already installed node.js
• Create build/index.html
• Create src/
• In tailwind.config.js, in content: [‘.build/*.html’]
//This means apply the Tailwind css on all the '.html' files in 'build' folder.
• Create src/input.css, and paste this
@tailwind base;
@tailwind components;
@tailwind utilities;
/* we can define our own tailwindcss classes here */
• Then in terminal, write this:
npx tailwindcss -i ./src/input.css -o ./build/css/style.css
• ./build/css/style.css is created and it has some css code
• Link that file with your index.html
• In index.html, in body tag, write div.bg-emerald-500.w-52.h-52 and enter.
// this is a tailwindcss class
• In terminal, write :
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
By using this, the code is running, and now, open in live server.
• Install Tailwind css intellisence extension for better view of the html code.
• You can also define your custom Tailwindcss classes.
• So while using tailwind css, you only need to write the class name inside the tag, and the functionality is applied to it, just search what you want to do, on the tailwind css website and write the class name in the tag.
