Get started with tailwind css

Install packages

npm install -D tailwindcss Copy

This will install tailwind css as a dev dependency

Generate `tailwind.config.js` file and configure template path

npx tailwindcss init Copy

It will create your `tailwind.config.js` file

"./src/**/*.{html,js,jsx,ts,tsx}" Copy

Now add the paths ( above code ) to all of your template files in your `tailwind.config.js` file.

Your `tailwind.config.js` file should look like this

   /** @type {import('tailwindcss').Config} */
   
  module.exports = {
  
    content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
    
    theme: {
      extend: {},
    },
    
    plugins: [],
  }

Creating vanila css with tailwind css

Now you need a folder to store vanila css generated by tailwind css . create a folder name it css inside assets . Add two files in it `input.css` and `output.css` . You can also add your own css in `input.css` file that will also be added

@tailwind base ;
@tailwind components ;
@tailwind utilities ; Copy

your `input.css` file will looks like this

        @tailwind base;

        @tailwind components;

        @tailwind utilities;

        h1 {
        color: skyblue;
        }

Generate css

open up a terminal and run the command . I wrote the file paths according to my application you can write your own .

npx tailwindcss -i ./src/assets/css/input.css -o ./src/assets/css/output.css -w Copy

You can make this step easier by adding the command inside "script" in your `package.json` as a value of "tailwind:watch"

        "scripts" : {
          "start": "react-scripts start",
          "build": "react-scripts build",
       
          "tailwind:watch" : "npx tailwindcss -i ./src/assets/css/input.css -o ./src/assets/css/output.css -w",
          }

npm run tailwind:watch Copy

Add tailwind generated css

If you are in a html file link your `output.css` file to html

<link href="./assets/css/output.css" rel="stylesheet"> Copy

If you are using React , import `output.css` file in `index.js` file