Home
Welcome to the Tailwind-CSS-Tutorial wiki!
• 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 • Create build/index.html • Create src/ • In tailwind.config.js, in content: [‘.build/*.html’] • 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
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 Code is running, and open in live server. • Install Tailwind css intellisence extension for better view of the html code. • So while using tailwind css, you only need to write the class name with the tag name, and the functionality is applied to it, just search what you want to do to on the tailwind css website and write it in the tag.