Tailwind not working after install nextjs 13

Question

I have installed Tailwind many times using same steps since nextjs 13 came out been having issues.

This is my package.json file To reproduce I used npx create-next-app@latest and followed the tailwind doc to install nextjs.

This is my json file

{
  "name": "fullstack",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.0"
  }
}

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

 This is my tailwind config file 

Answer 1

Try running this in your terminal:

npm install -D tailwindcss postcss autoprefixer

Update your tailwind.config.js with this:

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

Update the global.css file with this:

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

Finally, make sure global.css is imported properly inside your pages/_app.js file.