I am trying to create tailwind directives in remix project. When I create css classes under layer component of tailwind.css and apply it to the React components className(s), somehow I dont see the affect of the styles on the component.

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

Component below,

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>
      );
     }

What can I do to fix this? Thanks!