I've been experimenting with creating Tailwind directives in my Remix project. However, when I define CSS classes under the components layer of tailwind.css and apply them to my React components' className(s), the styles don't seem to be taking effect.
@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
}
}
Here is an example of a component:
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>
);
}
Any suggestions on how to troubleshoot this issue? Appreciate your help!