Next.js项目中TailwindCSS工具类sm:text-[54px]报错求助

错误信息 #

Error evaluating Node.js code
Error: Cannot apply unknown utility class: sm:text-[54px]
    [at onInvalidCandidate (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\node_modules\tailwindcss\dist\lib.js:20:348)]
    [at me (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\node_modules\tailwindcss\dist\lib.js:15:29296)]
    [at De (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\node_modules\tailwindcss\dist\lib.js:20:311)]
    [at si (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\node_modules\tailwindcss\dist\lib.js:36:784)]
    [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)]
    [at async ui (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\node_modules\tailwindcss\dist\lib.js:36:1079)]
    [at async Cr (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\node\dist\index.js:12:3305)]
    [at async $ (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\postcss\dist\index.js:10:3320)]
    [at async Object.Once (D:\MERN-LINKEDIN\Next JS\JS Mastery Next JS\startup-project\node_modules\@tailwindcss\postcss\dist\index.js:10:3596)]
    [at async LazyResult.runAsync (turbopack:///[project]/node_modules/postcss/lib/lazy-result.js:293:11)]

相关配置文件 #

globals.css #

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

@layer utilities {
  .heading {
    @apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

tailwind.config.ts #

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class", "dark"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./sanity/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      screens: {
        xs: "475px",
      },
      colors: {
        primary: {
          "100": "#FFE8F0",
          DEFAULT: "#EE2B69",
        },
        secondary: "#FBE843",
        black: {
          "100": "#333333",
          "200": "#141413",
          "300": "#7D8087",
          DEFAULT: "#000000",
        },
        white: {
          "100": "#F7F7F7",
          DEFAULT: "#FFFFFF",
        },
      },
      fontFamily: {
        "work-sans": ["var(--font-work-sans)"],
      },
      fontSize: {
        "36px": "36px",
        "54px": "54px",
      },
      lineHeight: {
        "46px": "46px",
        "64px": "64px",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      boxShadow: {
        100: "2px 2px 0px 0px rgb(0, 0, 0)",
        200: "2px 2px 0px 2px rgb(0, 0, 0)",
        300: "2px 2px 0px 2px rgb(238, 43, 105)",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
};

export default config;

package.json #

{
  "name": "startup-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "packageManager": "npm@11.3.0",
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  },
  "dependencies": {
    "@tailwindcss/typography": "^0.5.16",
    "next": "15.3.1",
    "next-auth": "^5.0.0-beta.27",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

已尝试操作 #

• 检查globals.css中工具类的语法
• 确保TailwindCSS版本为最新
• 复查tailwind.config.ts配置

解决方案 #

方案1：使用自定义主题类名替代动态工具类 #

你已经在tailwind.config.ts的theme.extend.fontSize和lineHeight中定义了54px、64px等值，直接使用扩展后的类名即可，无需用动态方括号语法：

修改globals.css中的.heading类：

@layer utilities {
  .heading {
    @apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-54px sm:leading-64px text-36px leading-46px max-w-5xl text-center my-5;
  }
}

方案2：禁用Turbopack测试 #

当前Turbopack对Tailwind动态工具类（如text-[54px]）的支持可能存在兼容性问题，暂时移除--turbopack参数启动开发服务：

修改package.json的scripts：

"dev": "next dev"

方案3：移除可能冲突的@theme inline代码 #

@theme inline是Tailwind v3.4的新特性，可能与自定义工具类生成逻辑冲突，尝试注释掉该部分代码后重启服务：

/* @theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
} */

方案4：修复版本兼容性问题 #

@tailwindcss/postcss v4需要搭配tailwindcss v4使用，但你当前使用的是tailwindcss v3.4.1，这是核心冲突点：

• 降级方案（推荐，稳定性更高）：安装兼容v3的@tailwindcss/postcss@3

npm install @tailwindcss/postcss@3 --save-dev

• 升级方案：安装tailwindcss@4（注意v4为beta版，可能存在其他兼容性问题）

npm install tailwindcss@4 --save-dev

内容的提问来源于stack exchange，提问作者Younis Yousaf