Tailwind in CKEditor 5

When to use

If you need to build Tailwind CSS responsive layouts visually in CKEditor 5 — composing utility-first grids, saving reusable content blocks, and delivering production-ready Tailwind markup without a build pipeline — Blk42 CKEditor 5 plugin is the solution.

How it works

Blk42 integrates as a native CKEditor 5 plugin respecting its model-based architecture. It provides a dedicated toolbar below the content where you visually configure Tailwind flex containers, responsive breakpoints, and spacing utilities. The plugin auto-compiles required CSS and bundles it with the content output.

How to start using

Install CKEditor 5 plugin for that.

See the link above to explore more options including NPM package, ready-to-use bundle, and CDN script.

Open in CodePlay

Live Demo

JavaScript

CKEditor5WithBlk42.create(
  document.querySelector("#editor"),
  {
    apiKey: "BL42T4RRdemodemodemodemo",
    toolbar: [ 'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|', 'link', 'unlink' ]
  }
).then(editor => {
  window.editor = editor;
  var s = document.createElement("style");
  s.textContent = ".ck-content.ck-content{font-size:14px;color:#444;font-family:sans-serif}";
  document.head.appendChild(s);
}).catch(error => {
  console.error("There was a problem initializing the editor.", error);
});

HTML

<link rel="stylesheet" href="https://democdn.com/styles/blk42-tailwind.css">
<div class="wrap">
  <textarea id="editor">
<div class="w-full mt-3">
  <div class="container mx-auto">
    <div class="grid grid-cols-12">
      <div class="col-span-12 lg:col-span-4 px-3 py-2">
        <img class="max-w-full h-auto" src="https://flmngr.democdn.com/files/coffee/cup-4.jpg" alt="A cup of freshly brewed coffee">
      </div>
      <div class="col-span-12 lg:col-span-8 px-3 py-2">
        <h1>Coffee worth waking up for</h1>
        <p>Single-origin beans roasted to order and shipped within 24 hours, so every cup tastes like the day it left the roastery.</p>
        <p><a href="#">Shop single-origins</a> &middot; <a href="#">Build a subscription</a> &middot; <a href="#">Our story</a></p>
      </div>
    </div>
  </div>
</div>
<div class="w-full my-3" style="background-color: #eaeaea;">
  <div class="container mx-auto">
    <div class="grid grid-cols-12">
      <div class="col-span-12 px-3 text-center">
        <h2>Coffee the way it should be</h2>
        <p>Sourced with care, roasted with patience, and delivered at its freshest, so every cup tastes exactly as our roasters intended.</p>
      </div>
    </div>
  </div>
</div>
<div class="w-full">
  <div class="container mx-auto">
    <div class="features grid grid-cols-12">
      <div class="col-span-12 lg:col-span-3 px-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/location_on.png" alt="" width="48" height="48"></p>
        <h2>Single-origin</h2>
        <p>Ethically sourced from small farms in Ethiopia, Colombia and Guatemala, with full traceability on every bag.</p>
      </div>
      <div class="col-span-12 lg:col-span-3 px-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/local_fire_department.png" alt="" width="48" height="48"></p>
        <h2>Roasted to order</h2>
        <p>We roast the day we ship, never weeks ahead, so your beans arrive at their peak of flavour and aroma every time.</p>
      </div>
      <div class="col-span-12 lg:col-span-3 px-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/timer.png" alt="" width="48" height="48"></p>
        <h2>On your schedule</h2>
        <p>Pick weekly, fortnightly or monthly delivery, and pause, skip or cancel anytime from your account in seconds.</p>
      </div>
      <div class="col-span-12 lg:col-span-3 px-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/directions_car.png" alt="" width="48" height="48"></p>
        <h2>Greener shipping</h2>
        <p>Every plan ships free across the UK and EU in plastic-free packaging that's recyclable and home-compostable.</p>
      </div>
    </div>
  </div>
</div>
<div class="w-full">
  <div class="container mx-auto">
    <div class="grid grid-cols-12">
      <div class="col-span-12 lg:col-span-6 px-3">
        <h2>From farm to your cup</h2>
        <p>We work directly with smallholder farmers who have spent generations perfecting their craft. Every harvest is hand-picked at peak ripeness, then carefully sorted so only the best cherries ever make it into your bag.</p>
        <p>Our roasters profile each origin individually, dialling in time and temperature to draw out its natural character. Nothing is rushed and nothing is automated, so the beans you receive taste exactly as they were meant to.</p>
        <p>When your coffee arrives within a day of roasting, the difference is unmistakable. Set your favourite blend on repeat, adjust your delivery whenever life changes, and enjoy barista-quality coffee at home every morning.</p>
      </div>
      <div class="col-span-12 lg:col-span-3 px-3" style="background-color:#f9f5f4">
        <h2>Flavour profile</h2>
        <h4 class="mb-1">Body</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Acidity</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Sweetness</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
        <h4 class="mb-1">Bitterness</h4>
        <p class="mb-3"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"><img src="https://flmngr.democdn.com/files/coffee/icons/24/kid_star.png" alt="" width="24" height="24"></p>
      </div>
      <div class="data col-span-12 lg:col-span-3 px-3 pb-3">
        <img class="max-w-full h-auto" style="margin-top: 12px; margin-bottom: 12px" src="https://flmngr.democdn.com/files/coffee/plants/1.jpg" alt="Ethiopia Yirgacheffe coffee plant">
        <h3>Ethiopia Yirgacheffe</h3>
        <p>Bright and delicate, with clean acidity and a floral aroma.</p>
        <div class="grid grid-cols-12 mx-1">
          <div class="col-span-5 px-3"><p>Origin</p></div>
          <div class="col-span-7 px-3"><p><strong>Ethiopia</strong></p></div>
        </div>
        <div class="grid grid-cols-12 mx-1">
          <div class="col-span-5 px-3"><p>Region</p></div>
          <div class="col-span-7 px-3"><p><strong>Yirgacheffe</strong></p></div>
        </div>
        <div class="grid grid-cols-12 mx-1">
          <div class="col-span-5 px-3"><p>Altitude</p></div>
          <div class="col-span-7 px-3"><p><strong>1,900 m</strong></p></div>
        </div>
        <div class="grid grid-cols-12 mx-1">
          <div class="col-span-5 px-3"><p>Process</p></div>
          <div class="col-span-7 px-3"><p><strong>Washed</strong></p></div>
        </div>
        <div class="grid grid-cols-12 mx-1">
          <div class="col-span-5 px-3"><p>Notes</p></div>
          <div class="col-span-7 px-3"><p><strong>Floral</strong></p></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="w-full my-3 pt-3 pb-3" style="background-color:#999999">
  <div class="container mx-auto">
    <div class="grid grid-cols-12">
      <div class="callout col-span-8 col-start-3 text-center" style="background-color:#727272;background-image:url(https://flmngr.democdn.com/files/coffee/patterns/pattern-6.svg)">
        <h2>Ready to taste the difference?</h2>
        <p>Start your subscription today. Your first bag is roasted and shipped within 24 hours, and you can pause or cancel whenever you like.</p>
        <p><a href="#" class="inline-block border border-white text-white px-4 py-2 rounded">Start now</a></p>
      </div>
    </div>
  </div>
</div>
  </textarea>
</div>

<script src="https://cloud.blk42.com/v/latest/sdk/ckeditor5-blk42.js"></script>

CSS

body { margin: 0; }

body {
  padding: 20px 20px 20px 50px;
  background: white;
}

.wrap {
  max-width: 1650px;
  margin: 0 auto;
}