Tailwind in CKEditor 4

When to use

If you need to build Tailwind CSS responsive layouts visually in CKEditor 4 — constructing utility-first grids, saving content blocks as reusable components, and outputting production-ready Tailwind markup without a build step — Blk42 CKEditor 4 plugin is the solution.

How it works

Blk42 integrates as a standard CKEditor 4 plugin using the official API. It adds a dedicated toolbar below the content area where you visually configure Tailwind flex containers, responsive breakpoints, and spacing utilities for the selected block. CSS is auto-compiled and embedded with the content.

How to start using

Install CKEditor 4 plugin for that.

See the link above to explore more options including ready-to-use build of CKEditor 4 with Blk42 included and preconfigured.

Open in CodePlay

Live Demo

JavaScript

CKEDITOR.replace("editor", {
  language: "en",
  allowedContent: true,
  extraPlugins: "blk42",
  apiKey: "BL42T4RRdemodemodemodemo",
  skin: "n1theme",
  contentsCss: "https://democdn.com/styles/blk42-tailwind.css",
  Flmngr: {
    urlFileManager: "https://flmngr.democdn.com/file-manager-coffee",
    urlFiles: "https://flmngr.democdn.com/files/coffee/"
  },
  toolbar: [
    ['Format', '-', 'Undo', 'Redo', '-', 'Bold', 'Italic', '-', 'Link', 'Unlink', '-', 'Upload', 'Flmngr', 'ImgPen']
  ]
});

HTML

<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://democdn.com/editors/ckeditor-4.20/ckeditor.js"></script>

CSS

body { margin: 0; }

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

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