TailwindCSS 不适用于 Next.js 13（带有应用程序文件夹）

Question

我已经安装了最新版本的 tailwindcss，但是当我运行命令“npm run dev”时，tailwind 除了字体之外不会更改任何内容。

我的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}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js：

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

package.json 文件：

{
  "name": "next-authex1dot1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "animal-avatar-generator": "^1.1.0",
    "axios": "^1.3.4",
    "bcryptjs": "^2.4.3",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "http-errors": "^2.0.0",
    "lodash": "^4.17.21",
    "mongoose": "^7.0.3",
    "next": "13.2.4",
    "next-auth": "^4.20.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swr": "^2.1.2",
    "validator": "^13.9.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "concurrently": "^8.0.1",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1"
  }
}

./app/globals.css 文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

layout.js 文件：

"use client"

import "./globals.css";
import  NavBar  from "./components/navbar/NavBar";
import { SessionProvider } from "next-auth/react";


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          <NavBar />
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

然后，在./app/page.jsx（这是我的主页）中：

export default function HomePage() {
  return (
    <div className="container">
      <h1>Welcome</h1>
      <h1 className="text-2xl underline">
      Hello world!
    </h1>
    </div>
  );
}

它只改变字体，但没有做 h1 className 中应该做的事情，如下面的 ss 所示：

提前致谢。

Answer 1

来自文档

使用@tailwind指令插入Tailwind的基础、组件、实用程序和变体样式到您的 CSS 中。

在

globals.css

，你应该有

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

Answer 2

在 tailwind.config.js 中，添加将使用 Tailwind CSS 类名的文件的路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

来自 Nextjs 13 - Tailwind

Answer 3

同样的问题。你怎么修好它的？上面的代码不起作用，因为作为默认设置，下一个 js 会给你同样的东西。样式仅应用于应用程序目录中的“pages.tsx”，但其他样式则不然。即使你直接选择文件

TailwindCSS 不适用于 Next.js 13（带有应用程序文件夹）

问题描述投票：0回答：3

3个回答

最新问题

TailwindCSS 不适用于 Next.js 13（带有应用程序文件夹）

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3