Tailwindcss v3 不适用于 next.js v12

Question

tailwindcss 样式没有得到应用。可能是什么问题？在 tailwind.config.js 文件中尝试了多种解决方案，但其中 none 有效。

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: [
  ],
}

此外，尝试使用以下代码，但它也不起作用 -

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;

Answer 1

这可能是因为没有在 _app.tsx 文件中导入 globals.css。

import '../styles/globals.css'

我自己在删除样板代码时多次（不知不觉地）从我的 _app.js 文件中删除了上述行。

Tailwindcss v3 不适用于 next.js v12

Tailwindcss v3 not working with next.js v12

typescript

reactjs

next.js

tailwind-css