CODEWITHSUNDEEP
reactjstypescriptnext.jstailwind-css
Ashmita Singh
Ashmita Singh

Reputation: 69

Tailwindcss v3 not working with next.js v12

tailwindcss styles are not getting applied. What might be the issue? Tried multiple solutions in the tailwind.config.js file, but none of it worked.

package.json :

{
  "name": "twitter-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "@types/node": "17.0.31",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.3",
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24",
    "typescript": "4.6.4"
  }
}

tailwind.config.js :

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

Also, tried using the below code, but it too didn't work -

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

postcss.config.js :

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

globals.css :

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

Folder structure for reference :

Upvotes: 0

Views: 2416

Answers (1)

Omer Iqbal
Omer Iqbal

Reputation: 148

This might be because of not importing the globals.css in _app.tsx file.

import '../styles/globals.css'

I myself have removed the above line from my _app.js file multiple times (unknowingly) while removing the boilerplate code.

Upvotes: 3

Related Questions