安装nextjs13后尾风不工作

zysjyyx4 于 2023-04-11 发布在其他

关注(0)|答案(1)|浏览(136)

自从NextJS 13出现问题以来，我已经使用相同的步骤安装了Tailwind很多次。
这是我的package.json文件为了复制，我使用了npx create-next-app@latest并按照tailwind文档安装了nextjs。
这是我的json文件

{
  "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

next.js

来源：https://stackoverflow.com/questions/75882642/tailwind-not-working-after-install-nextjs-13

1条答案

按热度按时间

1qczuiv01#

尝试在您的终端中运行此命令：

npm install -D tailwindcss postcss autoprefixer

更新您的tailwind.config.js如下：

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

更新global.css文件如下：

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

最后，确保global.css正确导入到pages/_app.js文件中。

赞(0）回复(0）举报 2023-04-11

我来回答

安装nextjs13后尾风不工作

1条答案

相关问题

热门标签

最新问答