Initialization

-  For React :
  https://tailwindcss.com/docs/guides/create-react-app
    - `npm i -D tailwindcss` or `npm i  tailwindcss -save-dev`
    - `npx tailwindcss init`to create `tailwind.config.js`
	- Configure `tailwind.config.js`
		```js
		/** @type {import('tailwindcss').Config} */
		module.exports = {
		  content: [
			"./src/**/*.{js,jsx,ts,tsx}",
		  ],
		  theme: {
			extend: {},
		  },
		  plugins: [],
		}
		```
	- Add the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file.
	     ```css
	    @tailwind base;
      @tailwind components;
		@tailwind utilities;
	   ```
	 - Start your build process `npm run start`
- For Nextjs 
  https://tailwindcss.com/docs/guides/nextjs
  - `npm install -D tailwindcss postcss autoprefixer`
  - `npx tailwindcss init -p` to generate `tailwind.config.js` and `postcss.config.js`
  - Configuring `tailwind.config.js`
    ```js
	/** @type {import('tailwindcss').Config} */
	module.exports = {
	  content: [
		"./app/**/*.{js,ts,jsx,tsx,mdx}",
		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
		"./components/**/*.{js,ts,jsx,tsx,mdx}",

		// Or if using `src` directory:
		"./src/**/*.{js,ts,jsx,tsx,mdx}",
	  ],
	  theme: {
		extend: {},
	  },
	  plugins: [],
	}
	```
  - rest all same as react. instead of `index.css`, use `globals.css` for nextjs

### vanilla
https://v3.tailwindcss.com/docs/installation

```sh
npm install -D tailwindcss@3
npx tailwindcss init
```

in src/input.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

  and finally(for vanilla cases atleast)
`npx tailwindcss -i ./src/input.css -o ./src/output.css --watch`