Remix项目中Tailwind组件层样式不生效，如何修复？

问题出在React组件的className属性里——你给自定义类名加了.前缀，这是CSS选择器的语法，而React的className只需要写类名本身，不需要加.。

具体修复步骤： #

• 移除组件代码中className里的.前缀
• 确保你的tailwind.css已经正确导入到项目的入口文件（比如root.tsx）
• 检查tailwind.config.js中的content配置，确保包含了你的组件文件路径，让Tailwind能扫描到这些自定义类名

修复后的组件代码： #

export function NoteView(props: Note) {
  const { id, title } = props;
  return (
    <article className="note-view-article-container" key={id}>
      <p className="note-view-title">
        {title}
      </p>
    </article>
  );
}

你的CSS代码本身没有问题，仅补充一个分号让语法更完整：

@layer components {
    .note-view-article-container {
        @apply bg-gray-300 px-5 py-2 my-10;
    }
    .note-view-title {
        @apply border border-zinc-500 text-center text-lg;
    }
}

如果导入CSS文件后样式仍未生效，重启开发服务器，确保Tailwind重新扫描所有文件。

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