Tailwind CSS support
This page describes what is specific to Tailwind CSS — the grid and its breakpoints, in-browser compilation, theming, and how Blk42 loads the framework for you. It is not a setup step: Blk42 is installed once into your editor, and everything here applies from that moment on. If you have not installed it yet, start with Installation.
Blk42 builds Tailwind layouts out of ordinary utility classes — flex, grid, w-*, gap-*,
md:* and the rest. The output is the same markup a developer would write by hand, so your
templates, your linters and your designers all keep working the way they did.
Tailwind 4 is the supported release.
Focus on content
Tailwind is normally the framework that demands the most setup — a build pipeline, a content scan, a CI step. With Blk42 there is none of that. Enable the plugin, pass your API key, and start building.
Out of the box, and with nothing to configure:
- No build step, ever. Blk42 compiles Tailwind in the browser and ships the resulting CSS with your content. See below — this is the part that usually surprises people.
- The editor is styled with Tailwind, including your selected theme, so a layout looks the same while it is being built as it will once published.
- Your visitor pages get the Tailwind CSS automatically. Blk42 adds it for you, so saved content renders correctly even on a page whose template knows nothing about Tailwind.
- Theming works without writing CSS — pick a DaisyUI theme in the Dashboard and both the editor and the published page follow it.
Everything below is available if you want to take control. None of it is required to start.
No build step
Tailwind normally needs a compile pass: it scans your source, finds the classes you actually used and emits only those. That model does not fit a CMS, where the classes are chosen by an editor long after the build ran.
Blk42 solves this by compiling in the browser. The plugin carries a Tailwind compiler — the same one behind Tailwind Play — and generates the CSS for whatever classes appear in the content, then embeds it with the content itself. In practice:
- Content editors can use any Tailwind utility, including arbitrary values like
w-[37px], without anyone touching the build pipeline. - Nothing needs rebuilding when content changes, because nothing was built in the first place.
- No PostCSS config, no webpack config, no CI step.
The base Tailwind stylesheet still loads normally; only the classes your content actually uses are generated on the fly.
Breakpoints
Blk42 offers one column-width control per Tailwind breakpoint:
| XS | SM | MD | LG | XL | 2XL | |
|---|---|---|---|---|---|---|
| Tailwind 4 | 0 | 640 | 768 | 1024 | 1280 | 1536 |
These are Tailwind's own defaults, so a layout built in Blk42 behaves exactly as it would in a hand-written Tailwind project.
The smallest breakpoint is unprefixed (w-1/2), the rest carry Tailwind's prefix (md:w-1/2). The
structure panel exposes a familiar 12-column model on top of Tailwind's fractional widths, so you set
column widths by picking a size rather than by remembering fraction classes.
DaisyUI themes
Tailwind ships no theming of its own — it gives you utilities and stops there. Blk42 integrates DaisyUI to fill that gap, so a website can be themed without writing any CSS.
Themes are chosen in the Dashboard, per API key, with a live preview. The selected theme is applied to the editor as well, so content editors compose against the same colours the visitor page will use rather than against a neutral white canvas.
DaisyUI also brings semantic component classes — btn, card, badge, alert and the rest. These
are ordinary classes as far as the editor is concerned, so they work anywhere in your content, and
the in-browser compiler generates their CSS the same way it does for utilities.
Using your own Tailwind build
The bundled Tailwind and DaisyUI themes are a convenience, not a lock-in. If you maintain your own — a Tailwind build with custom design tokens, or your own DaisyUI theme — point the Dashboard at your stylesheet URL instead of the bundled one. The framework and the theme are separate settings, so you can replace either one on its own.
Blk42 will then use your palette, spacing scale and breakpoints in the editor, so your editors compose against your design system rather than stock Tailwind.
Framework on visitor pages
By default Blk42 includes the Tailwind CSS on your visitor pages, so published content renders correctly with no template changes at all.
If your templates already load Tailwind, turn the inclusion off in the Dashboard and Blk42 will stay out of the way, leaving your own stylesheet as the only copy on the page. This is a per-API-key setting, so one website can rely on Blk42 while another uses its own build.
Note that the CSS compiled for your content ships with the content regardless — that is what makes the no-build-step model work, and it is what guarantees a page renders even if a utility class is used that your own build never scanned for.
Core features
These come with every Blk42 installation and do not depend on the theme or build you pick:
- 12-column layout model with per-breakpoint widths, offsets and column ordering.
- Structure detection — Blk42 recognises grids in content it did not create, so it works on your existing pages.
- Structure repair — hand-edited or broken markup is corrected back to a valid grid.
- Content protection — columns and the row/column hierarchy survive careless editing.
- Block library — saved blocks, automatic screenshots, categories and cross-website sharing all behave identically.
Saved blocks carry the markup they were built on, so a Tailwind block belongs to a Tailwind website — keep separate block groups if some of your websites are built differently.
Live examples
Every example below is a complete working page, with its full source — HTML, JavaScript and CSS — shown alongside it. Open any of them in CodePlay, our live code playground, to edit the code and watch the result update as you type.