25 Tailwind CSS Blockquotes

Put the mark in a pseudo-element so it stays out of the accessibility tree. In Tailwind that is an arbitrary before: variant: before:content-['“'] plus before:absolute before:-top-6 before:text-8xl and a muted colour like before:text-slate-200. Make the quote wrapper relative so the absolutely-positioned glyph anchors to it, and give the text a z-10 or padding so the mark sits behind rather than over the words. Demo 01 does exactly this. The common bug is the curly entity: writing a straight " inside content renders a typewriter quote, and forgetting to escape it in JSX breaks the class string. Because the glyph lives in content, a screen reader never announces it, which is correct — it is decoration, and the real <blockquote> text is what gets read.

It uses the two-background padding-box / border-box trick, seen in demo 06. You set a transparent border, then paint two layered backgrounds: the solid card colour clipped to padding-box and a conic or linear gradient clipped to border-box. In Tailwind that is arbitrary values like [background:linear-gradient(#0b1020,#0b1020)_padding-box,conic-gradient(from_var(--a),#22d3ee,#a855f7)_border-box] with border-2 border-transparent. The rotation comes from animating a registered @property angle, not the gradient itself, so it composites on the GPU. The usual mistake is omitting border-transparent — the border then paints the element's own colour and hides the gradient. Keep the border width small; a thick transparent border eats into the padding box and clips your text.

Demo 03 drives all three tones from one token, but colour alone must never carry the meaning — that fails contrast and colour-blind users. Pair each tone with a text label and an icon that has a real accessible name. Keep the label visible ("Note", "Warning") rather than relying on the border hue, and if the icon is an inline <svg>, give it aria-hidden or a <title>. For a genuine alert use role of note for advisory content; reserve the alert role for content that appears dynamically and must interrupt, because it is announced immediately. The frequent bug is switching only border-s-4 colour with a data attribute and calling it done — a monochrome reader then sees three identical grey boxes. Bind the tone to text, border, background and the label together.

A physical border-l-2 pins the rule to the visual left even when the document direction flips, so an Arabic or Hebrew quote gets its accent on the wrong side. Demos 05 and 07 use logical properties instead: border-s-2 maps to the inline-start edge, so it sits left in LTR and automatically moves to the right in RTL. Do the same for spacing — use ps-4 and ms-4 rather than pl-4 / ml-4. Tailwind ships these s/e utilities out of the box, so the fix is a find-and-replace, not custom CSS. The subtle trap: text-left is also physical — reach for text-start so the quote and its attribution align to the reading edge. Set dir on an ancestor and the whole card mirrors correctly with no media query.

Demo 11 floats the quote with float-end (the logical version of float-right) and gives it a width and inline margin so body copy reflows beside it. To soften the wrap, add an arbitrary [shape-outside:margin-box] — or a circle/polygon — so lines hug the quote's shape rather than its bounding box. Two things bite people. First, floats need surrounding block text to wrap around; drop a floated quote into a flex or grid child and nothing wraps, because the float is taken out of a formatting context that no longer applies. Second, on narrow screens a floated quote squeezes the body into an unreadable column — gate the float behind md:float-end and let it stack full-width on mobile. Keep it as a real <blockquote> with a <cite> so it is still a quote, not just a decorative aside.

Demo 23 is native CSS scroll-snap: a horizontally scrolling flex track with snap-x snap-mandatory and each card set to snap-start shrink-0 basis-full. Swipe, trackpad and the scrollbar all move it with zero JavaScript, and momentum feels native because the browser owns it. For keyboard and screen-reader users, snap alone is not enough — a keyboard user needs to reach each slide. Make the scroll container focusable or give each card a tabbable control, and ensure focus moving to an off-screen card scrolls it into view (browsers do this for real focusable elements). Add scroll-smooth for animated jumps. The classic bug is putting overflow-hidden on the track to hide the scrollbar — that also kills scrolling entirely; use overflow-x-auto and hide the bar with [scrollbar-width:none] instead.

Demos 09 and 18 lean on backdrop-blur and drifting blurred blobs, and both are expensive. Skip them when the quote sits over plain or busy-text backgrounds — frosted glass only reads as glass over colour and imagery; over white it is just a faint grey box with a contrast problem. backdrop-filter also forces a new stacking context and repaints on scroll, so a page with several of these on mobile will jank; use one, not a grid of twelve. Watch legibility: translucent text on a shifting aurora can dip below the contrast floor, so keep the quote text solid and high-contrast even when the panel is see-through. And always respect motion preferences — the drift animation should be wrapped so it stops under motion-reduce: variants. For a documentation site or an email, reach for the plain left-border demo instead; glass buys atmosphere, not clarity.

Demo 25 fades the button in on hover or focus — always include the focus-visible: variant, or keyboard users can never reach a control that only appears on hover. On click it writes the quote text with the Clipboard API and flips to a green "Copied" state. The visual swap is not enough on its own: a screen reader will not notice the label change. Put the status text in an element with a polite live region so the assistive tech announces "Copied" when it updates, and keep the button's accessible name stable (use aria-label of "Copy quote") so it does not read as a brand-new control each time. Reset the label after a couple of seconds with a timer. Two gotchas: the Clipboard write needs a user gesture, so trigger it from the click, not an effect; and it needs a secure context, so it silently fails over plain HTTP during local testing.