Comic Dots
Comic-book style CMYK halftone dot backgrounds. Any colour is decomposed into four overlapping dot grids — cyan, magenta, yellow, and black — using proper CMYK conversion via CSS relative colour syntax.
Import
Included in @import 'tw-jib-css'. To import individually:
@import 'tw-jib-css/comic';Browser Support
Uses CSS relative colour syntax with max() inside rgb(from ...). Supported in Chrome 125+, Edge 125+, Firefox 128+, and Safari 16.4+.
Quick Reference
| Class | Styles |
|---|---|
| bg-comic-<color> | Sets colour and applies CMYK dot pattern with background-blend-mode: multiply |
| bg-comic-<color>/<opacity> | Same with opacity modifier |
| bg-comic-[<value>] | Arbitrary colour value |
| comic-dot-<number> | --comic-dot: --spacing(<number>) — dot radius |
| comic-dot-[<value>] | --comic-dot: <value> |
| comic-bleed-<number> | --comic-bleed: --spacing(<number>) — dot edge softness |
| comic-bleed-[<value>] | --comic-bleed: <value> |
| comic-gap-<number> | --comic-gap: --spacing(<number>) / 4 — space between dots |
| comic-gap-[<value>] | --comic-gap: <value> |
How it works
Each colour is decomposed into CMYK channels using the inverse of its RGB values:
| Dot | Colour | Opacity formula |
|---|---|---|
| C (cyan) | rgb(0 255 255) | (max(R,G,B) - R) / max(R,G,B) |
| M (magenta) | rgb(255 0 255) | (max(R,G,B) - G) / max(R,G,B) |
| Y (yellow) | rgb(255 255 0) | (max(R,G,B) - B) / max(R,G,B) |
| K (black) | rgb(0 0 0) | 1 - max(R,G,B) / 255 |
The four dot layers are staggered at different grid offsets and composited with background-blend-mode: multiply for subtractive colour mixing — just like a printing press.
Basic Usage
Add bg-comic-{color} to any element:
Gap
Control the space between dots with comic-gap-{number}. The value scales at --spacing / 4 for fine control (comic-gap-1 = 1px, = 4px). The default is 2px.
Gap is additive to dot size — the grid cell is computed as dot * 2 + gap. This means changing comic-dot-* automatically scales the grid proportionally.
Dot Size
Control the dot radius with comic-dot-{number} using the Tailwind spacing scale. The default is 1px.
Bleed
Control the dot edge softness with comic-bleed-{number}. The transparent gradient stop is positioned at dot + bleed, so:
comic-bleed-0— crisp hard-edged circlescomic-bleed-1— slight softness (default)- Larger values — increasingly blurred dot edges
Opacity
Add an opacity modifier with the / syntax to fade the entire pattern — all four CMYK dot layers and the white background. The value is a percentage (0–100).
This scales the computed CMYK channel opacities proportionally and makes the white background semi-transparent, so the pattern can be layered over other content.
CMYK Channel Behaviour
Every Tailwind colour at every shade, rendered as Ben Day dots. Grays produce only K (black) dots with no colour cast — the key advantage of proper CMYK conversion over naive CMY.
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Using a custom value
Use the arbitrary value syntax for colours not in the Tailwind palette:
Applying conditionally
All bg-comic-* and comic-* utilities support Tailwind's variant syntax:
<div class="bg-blue-500 hover:bg-comic-blue-500 comic-gap-4">
Dots on hover
</div>
<div class="bg-comic-red-500 md:comic-gap-8">
Larger gaps on medium screens
</div>