Applying Tailwind layer component directives to remix react component

Question

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!

Answer 1

Try className="note-view-article-container" instead of className=".note-view-article-container". How to apply css styles in react

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

And, it is hard to reason without seeing the full source code of the component, but most likely you don't need a key property for the <article /> tag. If you want to render NoteView in the list, what you need to do is to set key property to the component: <NoteView id={id} title={title} key={id} />