Início / user-21559804

Younis Yousaf's questions

Martin Hope
Younis Yousaf
Asked: 2025-04-28 20:30:53 +0800 CST
  • 7
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;

pacote.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": "[email protected]",
  "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"
  }
}

O que eu tentei:

  1. Verificando novamente a sintaxe das classes de utilitários em globals.css.

  2. Garantir que a TailwindCSSversão esteja atualizada.

  3. Revisando a TailwindCSSconfiguração em tailwind.config.ts.

Não sei por que estou vendo o erro "Não é possível aplicar classe de utilitário desconhecida: sm:text-[54px]. Há algo errado com a forma como estou usando a classe sm:text-[54px] ou com a minha configuração do Tailwind? Qualquer ajuda será bem-vinda!

Desde já, obrigado!

next.js