Tailwind CSS Ckeditor Example

In this tutorial, we will create tailwind css ckeditor, ckeditor 4, ckeditor5, example with tailwind css.


Example 1

Tailwind CSS with ckeditor 4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Ckeditor 4 Example</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mx-auto">
      <form>
        <div class="mb-2">
          <label class="block mb-2 text-xl"> Title </label>
          <input
            type="text"
            class="
              w-full
              px-4
              py-2
              text-sm
              border
              rounded-md
              focus:border-blue-400
              focus:outline-none
              focus:ring-1
              focus:ring-blue-600
            "
            placeholder="Title"
          />
        </div>
        <div class="mt-8">
          <label class="block mb-2 text-xl">Description </label>
          <textarea name="description" class="bg-gray-500"> </textarea>
        </div>
        <button
          class="
            px-4
            py-2
            mt-4
            text-sm text-white
            bg-blue-600
            rounded-lg
            hover:bg-blue-700
          "
        >
          Submit
        </button>
      </form>
    </div>

    <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
    <script>
      CKEDITOR.replace('description');
    </script>
  </body>
</html>



Example 2

Tailwind CSS with ckeditor 5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Ckeditor 5 Example</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mx-auto">
      <form>
        <div class="mt-8">
          <label class="block mb-2 text-xl">Description </label>
          <textarea name="description" id="editor" class="bg-gray-500">
          </textarea>
        </div>
        <button
          class="
            px-4
            py-2
            mt-4
            text-sm text-white
            bg-blue-600
            rounded-lg
            hover:bg-blue-700
          "
        >
          Submit
        </button>
      </form>
    </div>

    <script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
    <script>
      ClassicEditor.create(document.querySelector('#editor')).catch((error) => {
        console.error(error);
      });
    </script>
  </body>
</html>