使用Tailwind时@Apply层中w-50类不存在问题求助

问题根源 #

Tailwind CSS预设宽度类里并没有w-50，它默认的宽度类基于间距系统（从w-0到w-96，步长为4，对应rem单位），直接使用w-50会触发类不存在的报错。你把自定义组件类放在@layer components里，只能让Tailwind识别.nav-link这个组件类，无法自动生成w-50这类工具类。

解决方案1：使用任意值类（快速解决） #

直接用Tailwind的任意值语法定义宽度和高度，无需修改配置文件，把w-50和h-50替换成带方括号的具体数值（可指定px、rem等单位）：

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

@layer components {
  .nav-link {
    @apply w-[50px] h-[50px] rounded-md hover:bg-indigo-600 grid place-items-center;
  }
}

解决方案2：扩展Tailwind主题配置（复用类） #

如果需要在多处复用w-50和h-50，可以在tailwind.config.js的theme.extend中添加自定义的宽度和高度值：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{html,js,jsx,css}"],
  theme: {
    extend: {
      width: {
        '50': '50px', // 可根据需求修改单位，比如'12.5rem'
      },
      height: {
        '50': '50px', // 同步添加h-50的定义
      }
    },
  },
  plugins: [],
};

修改配置后重启开发服务器，即可正常使用w-50和h-50类。

内容的提问来源于stack exchange，提问作者Guilherme Silva