TailWindCSS自定义字体错误：无法应用未知的实用程序类：Font-Extrabold

Question

我看到了类似的帖子，我尝试了这些建议，但仍然没有运气。 我正在尝试在Globals.css文件中创建一个Utilities class/css，但是由于某种原因，tailwind不了解'font-extrabold'CSS或任何其他自定义CSS

@layer utilities {

  .text-30-extrabold {
    @apply text-[30px] font-extrabold text-white;
  }
}

这里是我的文件夹结构，我的字体是本地托管的。

└── 📁app
    └── 📁(root)
        └── layout.tsx
        └── page.tsx
    └── 📁api
        └── 📁auth
            └── 📁[...nextauth]
                └── route.ts
    └── favicon.ico
    └── 📁fonts
        └── WorkSans-Black.ttf
        └── WorkSans-Bold.ttf
        └── WorkSans-ExtraBold.ttf
        └── WorkSans-ExtraLight.ttf
        └── WorkSans-Light.ttf
        └── WorkSans-Medium.ttf
        └── WorkSans-Regular.ttf
        └── WorkSans-SemiBold.ttf
        └── WorkSans-Thin.ttf
    └── globals.css
    └── layout.tsx
└── 📁components
    └── Navbar.tsx
└── .env.local
└── .gitignore
└── auth.ts
└── components.json
└── eslint.config.mjs
└── next-env.d.ts
└── next.config.ts
└── package-lock.json
└── package.json
└── postcss.config.mjs
└── README.md
└── settings.json
└── tailwind.config.ts
└── tsconfig.json

然后，然后将字体加载到app/layout.tsx

上

const workSans = localFont ({
  src: [
    {
      path: './fonts/WorkSans-Black.ttf',
      weight: '900',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-ExtraBold.ttf',
      weight: '800',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-Bold.ttf',
      weight: '700',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-SemiBold.ttf',
      weight: '600',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-Regular.ttf',
      weight: '500',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-Thin.ttf',
      weight: '200',
      style:'normal',
    },
    {
      path: './fonts/WorkSans-ExtraLight.ttf',
      weight: '100',
      style:'normal',
    },
  ],
  variable: '--font-work-sans',
});

然后在tailwind.config.ts content array中包含了我的所有文件夹

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}',
]

我甚至试图包括完整目录

const { join } = require('path');

const config: Config = {
    darkMode: ["class"],
    content: [
        join(__dirname,'pages/**/*.{js,ts,jsx,tsx,mdx}'),
        join(__dirname,'components/**/*.{js,ts,jsx,tsx,mdx}'),
        join(__dirname,'app/**/*.{js,ts,jsx,tsx,mdx}'),
        join(__dirname,'sanity/**/*.{js,ts,jsx,tsx,mdx}'),
    ]

/* global.css */

    enter code here

@import "tailwindcss";
@tailwind utilities;

:root {
  --secondary-r: 251;
  --secondary-g: 232;
  --secondary-b: 67;
}


@layer base {
  :root {
    --secondary-r: 251;
    --secondary-g: 232;
    --secondary-b: 67;
  }
}

@layer utilities {
  .flex-between {
    @apply flex justify-between items-center;
  }

  .text-30-extrabold {
    @apply text-[30px] font-extrabold text-white;
  }

  .text-30-bold {
    @apply text-[30px] font-bold text-black;
  }

  .text-30-semibold {
    @apply font-semibold text-[30px] text-black;
  }

  .text-26-semibold {
    @apply font-semibold text-[26px] text-black;
  }

  .text-24-black {
    @apply text-[24px] font-black text-black;
  }

  .text-20-medium {
    @apply font-medium text-[20px] text-black;
  }

  .text-16-medium {
    @apply font-medium text-[16px] text-black;
  }

  .text-14-normal {
    @apply font-normal text-sm text-white/80;
  }

  .pink_container {
    @apply w-full  min-h-[530px]  flex justify-center items-center flex-col py-10 px-6;
  }

  .tag {
    @apply  px-6 py-3 font-bold rounded-sm uppercase relative ;
  }

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

  .sub-heading {
    @apply font-medium text-[20px] text-white max-w-2xl text-center break-words;
  }

  .section_container {
    @apply px-6 py-10 max-w-7xl mx-auto;
  }

  .card_grid {
    @apply grid md:grid-cols-3 sm:grid-cols-2 gap-5;
  }

  .card_grid-sm {
    @apply grid sm:grid-cols-2 gap-5;
  }

  .no-result {
    @apply text-black text-sm font-normal;
  }

  /* profile */
  .profile_container {
    @apply w-full pb-10 pt-20 px-6 max-w-7xl mx-auto lg:flex-row flex-col flex gap-10;
  }

  .profile_card {
    @apply w-80 px-6 pb-6 pt-20 flex flex-col justify-center items-center border-[5px] border-black  rounded-[30px] relative z-0 h-fit max-lg:w-full;
  }

  .profile_title {
    @apply w-11/12 bg-white border-[5px] border-black rounded-[20px] px-5 py-3 absolute -top-9 after:absolute after:content-[''] after:-top-1 after:right-0 after:-skew-y-6 after:bg-black after:-z-[1] after:rounded-[20px] after:w-full after:h-[60px] before:absolute before:content-[''] before:-bottom-1 before:left-0  before:-skew-y-6 before:w-full before:h-[60px] before:bg-black  before:-z-[1] before:rounded-[20px] ;
  }

  .profile_image {
    @apply rounded-full object-cover border-[3px] border-black;
  }

  /* idea details */
  .divider {
    @apply border-dotted bg-zinc-400 max-w-4xl my-10 mx-auto;
  }

  .view_skeleton {
    @apply bg-zinc-400 h-10 w-24 rounded-lg fixed bottom-3 right-3;
  }

  /* navbar */
  .avatar {
    @apply p-0 focus-visible:ring-0 bg-none rounded-full drop-shadow-md ;
  }

  .dropdown-menu {
    @apply w-56 border-[5px] border-black bg-white p-5 rounded-2xl ;
  }

  .login {
    @apply border-[5px] py-4 border-black bg-white text-black relative  font-medium hover:shadow-none transition-all duration-500 ;
  }

  /* searchform */
  .search-form {
    @apply max-w-3xl w-full min-h-[80px] bg-white border-[5px] border-black rounded-[80px] text-[24px] mt-8 px-5 flex flex-row items-center gap-5;
  }

  .search-input {
    @apply flex-1 font-bold placeholder:font-semibold placeholder:text-black w-full h-auto outline-none;
  }

  .search-btn {
    @apply size-[50px] rounded-full bg-black flex justify-center items-center ;
  }

  /* startupcard */
  .startup-card {
    @apply bg-white border-[5px] border-black py-6 px-5 rounded-[22px]  transition-all duration-500  ;
  }

  .startup-card_date {
    @apply font-medium text-[16px] px-4 py-2 rounded-full group-hover:bg-white;
  }

  .startup-card_desc {
    @apply font-normal text-[16px] line-clamp-2 my-3 text-black break-all;
  }

  .startup-card_img {
    @apply w-full h-[164px] rounded-[10px] object-cover;
  }

  .startup-card_btn {
    @apply rounded-full bg-black font-medium text-[16px] text-white px-5 py-3 ;
  }

  .startup-card_skeleton {
    @apply w-full h-96 rounded-[22px] bg-zinc-400;
  }

  /* startupform */
  .startup-form {
    @apply max-w-2xl mx-auto bg-white my-10 space-y-8 px-6;
  }

  .startup-form_label {
    @apply font-bold text-[18px] text-black uppercase;
  }

  .startup-form_input {
    @apply border-[3px] border-black px-5 py-7 text-[18px] text-black font-semibold rounded-full mt-3 placeholder:text-black ;
  }

  .startup-form_textarea {
    @apply border-[3px] border-black p-5 text-[18px] text-black font-semibold rounded-[20px] mt-3 placeholder:text-black ;
  }

  .startup-form_error {
    @apply text-red-500 mt-2 ml-5;
  }

  .startup-form_editor {
    @apply mt-3 border-[3px] border-black text-[18px] text-black font-semibold placeholder:text-black ;
  }

  .startup-form_btn {
    @apply border-[4px] border-black rounded-full p-5 min-h-[70px] w-full font-bold text-[18px] ;
  }

  /* view */
  .view-container {
    @apply flex justify-end items-center mt-5 fixed bottom-3 right-3;
  }

  .view-text {
    @apply font-medium text-[16px] px-4 py-2 rounded-lg capitalize;
  }

  .category-tag {
    @apply font-medium text-[16px] px-4 py-2 rounded-full;
  }

  /* .pattern {
    background-image: linear-gradient(
      to right,
      transparent 49.5%,
      rgb(var(--secondary-r), var(--secondary-g), var(--secondary-b), 0.2) 49.5%,
      rgb(var(--secondary-r), var(--secondary-g), var(--secondary-b), 0.6) 50.5%,
      transparent 50.5%
    );
    background-size: 5% 100%;
    background-position: center;
    background-repeat: repeat-x;
  } */

  .tag-tri {
    @apply before:content-[''] before:absolute before:top-2 before:left-2 before:border-t-[10px] before:border-t-black before:border-r-[10px] before:border-r-transparent after:content-[''] after:absolute after:bottom-2 after:right-2 after:border-b-[10px] after:border-b-black after:border-l-[10px] after:border-l-transparent;
  }
}

.w-md-editor-toolbar {
  padding: 10px ;
}