Background clip

Tailwind's own bg-clip-* utilities, kept working against the multi-layer backgrounds this library draws. Nothing new to learn or import.

Quick reference

class	styles
bg-clip-border	background-clip: border-box (all layers)
bg-clip-padding	background-clip: padding-box (all layers)
bg-clip-content	background-clip: content-box (all layers)
bg-clip-text	background-clip: text (all layers)

Basic usage

Clipping a texture to the text

Pair bg-clip-text with text-transparent to fill glyphs with the background. This works the same over a halftone as it does over a flat colour.

Halftone

Pixel

Standard Tailwind gradients

bg-linear-*, bg-radial-* and bg-conic-* are composited too, so a gradient joins the layer list instead of replacing it. Gradient text behaves exactly as it does in stock Tailwind:

Linear

Conic

A gradient and a texture together

Because they share one list, a single clip utility governs both. There is no per-layer clip to reason about.

Both at once

Choosing the box

The three box keywords behave as they do in plain CSS. The background stops at the border, padding or content edge. With a gradient border present, the border gradient follows the same utility, so the two never disagree.

border

padding

content

Applying conditionally

Prefix with a state or breakpoint variant like any other utility:

Hover me

Why the utilities are re-declared

Tailwind's bg-clip-* sets background-clip to a single keyword, which is right for the single-layer background Tailwind draws.

Every background here is a list. A comic halftone is five radial gradients, a pixel surface five repeating ones, a ripple three layers, and a gradient border paints into the border box beside all of them. They arrive as one background shorthand, and background-clip is a list property, so one keyword repeats across every layer.

Both declarations then exist on the element, and whichever the cascade puts last decides the whole list. Which one that is varies by utility, so bg-clip-text on a halftone would work or not depending on class order. Routing the keyword through slots the shorthand reads is what removes that.

How it works

Two registered custom properties carry the keyword, and the shorthand reads both:

1. --jib-background-clip clips the pattern layers. It defaults to padding-box.
2. --jib-border-gradient-clip clips the border-gradient layer. It defaults to border-box, because a border gradient has to reach the border edge to be visible.

The two defaults differ, which is why there are two slots. The utilities write to both, so a class means the same thing whether or not a gradient border is present.

Both are registered with syntax: "padding-box | border-box | content-box | text" rather than *. A * slot substitutes whatever token it holds, so one unparseable value would reach the shorthand and invalidate it at computed-value time, taking every layer with it rather than just the clip. Constrained, a bad value is rejected at assignment and the initial value stands.

The other captured longhands

background-clip is not the only longhand the shorthand would reset. Size, position, repeat, attachment and origin each route through a registered slot of their own, so Tailwind's utilities for them keep working over a composited background:

class	styles
bg-auto, bg-cover, bg-contain, bg-size-*	--jib-background-size
bg-top, bg-center, bg-bottom-right, bg-position-*	--jib-background-position
bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-space	--jib-background-repeat
bg-fixed, bg-local, bg-scroll	--jib-background-attachment
bg-origin-border, bg-origin-padding, bg-origin-content	--jib-background-origin and --jib-border-gradient-origin

These reach the content layer. A texture packs geometry into each of its own layers — a halftone offsets its four screens against each other by half a cell — so bg-cover over bg-comic-* changes nothing.

Grammar the slots cannot carry

@property has no <position> or <bg-size> component, so each slot is registered against the nearest grammar that does exist. Two forms the CSS properties themselves accept do not survive the round trip:

Utility	Rejected because
bg-position-[left_10px_top_20px]	the four-value offset form is neither <length-percentage>+ nor <custom-ident>+
bg-size-[auto_50%]	auto is its own alternative and cannot be mixed into <length-percentage>+

A rejected value is dropped at computed-value time and the slot keeps its initial value: 0% 0% for position, auto for size. Only that one longhand is lost — the rest of the stack still paints.

Browser support

background-clip is universal. background-clip: text is the narrower of the two; older engines want the -webkit- prefix, which Tailwind emits for you. Live status is at the foot of this page.

Import

No bg-clip module to take. These live in the shared core, so every entry carries them, including a single-module one:

@import 'tw-jib-css/comic';

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.