next.jstailwind-cssutilitiestailwind-css-4nextjs-15

Error with TailwindCSS Utility Class sm:text-[54px] in Next.js Project

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

What I Have Tried:

  1. Double-checking the syntax for the utility classes in globals.css.

  2. Ensuring that the TailwindCSS version is up-to-date.

  3. Reviewing the TailwindCSS configuration in tailwind.config.ts.

I am unsure why I'm seeing the error Cannot apply unknown utility class: sm:text-[54px]. Is there something wrong with how I am using the sm:text-[54px] class or my Tailwind configuration? Any help would be appreciated!

Thanks in advance!

Solution

  • Starting with TailwindCSS v4, there have been many breaking changes. You can find detailed explanations in other questions:

    Briefly, for you:

    npm install tailwindcss@4 @tailwindcss/postcss postcss

    Then you can easily integrate TailwindCSS to postcss.config.mjs using the @tailwindcss/postcss plugin released from v4 like this:

    const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

    There is no need for a tailwind.config.js file. Starting from v4, it is being phased out and replaced with a new CSS-first configuration approach.

    There is no need for any @tailwind directives either; instead, a single import is sufficient. Import TailwindCSS to main global.css:

    @import "tailwindcss";

    After completing the proper installation, the class should exist and work correctly.