Tutorial for TailwindCss setup
I am newbie in tech ,I just started learning Frontend Development
This is a blog about how to setup tailwind css.(It is found on tailwind documentation but I like this)
for quick reference
make a file index.html and open tailwind css doucmentation (you know)
go to terminal then type (you need to install node js .duh )
npm init -ynpm i -D tailwindcssnpx tailwindcss initgo to the file name(tailwind.config.js)
make changes in content
a)content : change below
module.exports = { content: ['./*.html'], // content:['./code/*.html'], //if index.html code folder theme: {b) make input.css folder and put this(you can manually type this or you can copy from tailwindcss doumentation )
@tailwind base; @tailwind components; @tailwind utilities;c) go to the package.json folder and make changes this
(remove test)
"scripts": { "build":"tailwindcss -i ./input.css -o ./css/main.css", "watch":"tailwindcss -i ./input.css -o ./css/main.css --watch" },npm run buildAfter npm run build
(in terminal it make css folder)
d) go to index.html file the link to css like
<link rel="stylesheet" href="/css/main.css">npm run watchAfter npm run watch your can test it like this
<body> <div class="bg-purple-600 w-full h-96"></div> </body>then open with live server you can see the result
If you close vs code then resume the project type
npm run watchbefore you start coding . Otherwise it doesn't show new tailwind css properly.
Read this if you wanna learn in deep about setup otherwise its done you can code in tailwindcss
The command "
npm init -y" is used to initialize a new Node.js project with default settings.(you can change the package the json file if you want to )The command "
npm i -D tailwindcss" is used to install the Tailwind CSS framework as a development dependency in a Node.js projectThe command "
npx tailwindcss init" is used to generate a default configuration file for Tailwind CSS in a project(make tailwind.config.json file)
