Unable to style editor with TailwindCSS

[blockboundjj]

Hello,

I'm unable to style the editor with tailwind. I'm using the basic create-next-app project with the StarterKit tiptap example.

I have the tailwind typography plugin and using prose, but my bullet points, headings, etc are all not being styled, they are inheriting from something called layout.css? in the inspector. Please advise!!!

[blockboundjj]

If I get rid of my editorProps and just use an imported CSS stylesheet, it works fine? why would that be?

[WayneFilmalter]

Did you manage to solve this issue we are having the same problem and we can not use external style sheet

[blockboundjj]

@WayneFilmalter I did not, just using regular css for the editor component

[WayneFilmalter]

@blockboundjj we found a solution where we added a optional prop to the component and added it to the attributes class the prop only gets added when the the content is getting displayed

      attributes: {
        class: cn('rounded-[inherit] flex-1 w-full h-full ', displayClass),
        style: 'outline: none;',
      },
    },

[CodeStarGM]

I know this thread is pretty old, but I’m leaving my solution here in case someone else comes across this while searching for the answer.

For some reason, the default CSS doesn’t apply, I’m not sure why but adding Tailwind CSS classes works perfectly So just copy and paste the snippet below into your global.css, and you’re good to go:

/* tip tap editor */

/* ------------------------- */
/* LISTS */
/* ------------------------- */

.tiptap ul,
.tiptap ol {
  @apply px-4 mr-4 my-5;
}

.tiptap ul li p,
.tiptap ol li p {
  @apply mt-1 mb-1;
}

/* ------------------------- */
/* HEADINGS */
/* ------------------------- */

.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
  @apply leading-tight mt-10;
  text-wrap: pretty; /* Tailwind doesn't support this yet */
}

.tiptap h1,
.tiptap h2 {
  @apply mt-14 mb-6;
}

.tiptap h1 {
  @apply text-[1.4rem] font-semibold;
}

.tiptap h2 {
  @apply text-[1.2rem] font-semibold;
}

.tiptap h3 {
  @apply text-[1.1rem] font-semibold;
}

.tiptap h4,
.tiptap h5,
.tiptap h6 {
  @apply text-[1rem] font-semibold;
}

/* ------------------------- */
/* INLINE CODE */
/* ------------------------- */

.tiptap code {
  @apply rounded-md text-sm px-1 py-0.5;
  background-color: rgba(88, 5, 255, .05);
  color: #2e2b29;
  font-size: 0.85rem;
}

/* ------------------------- */
/* CODE BLOCKS */
/* ------------------------- */

.tiptap pre {
  @apply rounded-lg p-4 my-6 text-sm overflow-x-auto font-mono;
  background: #2e2b29;
  color: #fff;
}

.tiptap pre code {
  @apply bg-transparent p-0 text-white font-mono;
  font-size: 0.8rem;
}

/* ------------------------- */
/* BLOCKQUOTE */
/* ------------------------- */

.tiptap blockquote {
  @apply ml-0 pl-4 my-6 border-l-4;
  border-color: rgba(61, 37, 20, .12);
}

/* ------------------------- */
/* HORIZONTAL RULE */
/* ------------------------- */

.tiptap hr {
  @apply my-8;
  border: none;
  border-top: 1px solid rgba(61, 37, 20, .08);
}```

[bdbch]

In general Tiptap absolutely is style-able via Tailwind. If you add the prose class to the editor's class attribute via editorProps.

The layout.css OP is talking about is probably a Next.js layout.css that overrides styles globally and has nothing to do with Tiptap. In general - if you use Tailwind, make sure to not have other styles that globally override your Tailwind-styled elements or use CSS Layers to make sure Tailwind classes take a higher priority than external styles.

Read more on the Tailwind docs here: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles