Tutorial for TailwindCss setup

Tutorial for TailwindCss setup

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 )

  1. npm init -y

  2. npm i -D tailwindcss

  3. npx tailwindcss init

  4. go 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;
    
  5. c) go to the package.json folder and make changes this

    (remove test)

  6.       "scripts": {
             "build":"tailwindcss -i ./input.css -o ./css/main.css",
         "watch":"tailwindcss -i ./input.css -o ./css/main.css --watch"
    
           },
    
  7. npm run build

    After 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">
    
  8. npm run watch

    After 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

  9. If you close vs code then resume the project type npm run watch before 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

  1. 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 )

  2. The command "npm i -D tailwindcss" is used to install the Tailwind CSS framework as a development dependency in a Node.js project

  3. The command "npx tailwindcss init" is used to generate a default configuration file for Tailwind CSS in a project(make tailwind.config.json file)