Manav Goyal

Tailwind - C S S

Installation for Development
- Use Play CDN
- Tailwind extension will not work with this
Installation CLI
- npm init -y
- npm install -D tailwindcss postcss autoprefixer
- npm install vite
  - In Package.json => "scripts": {"start": "vite"},
- npx tailwindcss init -p
- In input.css => @tailwind base; @tailwind components; @tailwind utilities;
  - Include this file in your HTML
- In tailwind.config.js => content: ["*"],
- npm run start
Installation for React JS => https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/
- npm install -D tailwindcss postcss-cli postcss autoprefixer
- npx tailwind init tailwind.js --full
- touch postcss.config.js
- Write some code in it
- Create tailwind.css & main.css file
- Write Scripts in Package.json

Installation for Next JS

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Paste in tailwind.config.js

    module.exports = {
        content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
        ],
        theme: {
        extend: {},
        },
        plugins: [],
    }

Paste in global.css

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