Tailwind CSS WYSIWYG Editor - React

Use our Tailwind CSS WYSIWYG Editor in your web projects.

See below our beautiful WYSIWYG Editor example that you can use in your Tailwind CSS and React project. The example below is using the lexical library, make sure to install it before using the example.

Install Required Dependencies

We're using lexical library and it's plugins to provide the text editor functionality. Make sure to install them before using the example.

npm install lexical @lexical/react @lexical/list @lexical/rich-text @lexical/code @lexical/link @lexical/selection @lexical/utils
npm install lexical @lexical/react @lexical/list @lexical/rich-text @lexical/code @lexical/link @lexical/selection @lexical/utils

WYSIWYG Editor Demo

Play around with the editor...

Adding Styles

Copy/paste the below CSS code to your Tailwind CSS stylesheet to customise the text editor typography style.

.lexical h1 {
  @apply text-2xl font-bold text-primary md:text-3xl lg:text-4xl;
}

.lexical h2 {
  @apply text-lg font-bold text-primary md:text-xl lg:text-2xl;
}

.lexical p {
  @apply text-base  text-foreground;
}

.lexical ul {
  @apply list-inside list-disc;
}

.lexical li {
  @apply text-base  text-foreground;
}

.lexical code {
  @apply inline-block rounded border border-surface bg-surface-light px-1 py-0.5 font-mono text-sm  leading-none text-foreground;
}

.lexical a {
  @apply text-info underline transition-colors duration-300 hover:text-primary;
}
.lexical h1 {
  @apply text-2xl font-bold text-primary md:text-3xl lg:text-4xl;
}

.lexical h2 {
  @apply text-lg font-bold text-primary md:text-xl lg:text-2xl;
}

.lexical p {
  @apply text-base  text-foreground;
}

.lexical ul {
  @apply list-inside list-disc;
}

.lexical li {
  @apply text-base  text-foreground;
}

.lexical code {
  @apply inline-block rounded border border-surface bg-surface-light px-1 py-0.5 font-mono text-sm  leading-none text-foreground;
}

.lexical a {
  @apply text-info underline transition-colors duration-300 hover:text-primary;
}