21 Tailwind CSS Pricing Sections
02 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Highlighted Popular Pricing Tier

The lift pattern: the middle tier scales up, gains a sunset gradient and wears a &ldquo;Most popular&rdquo; pill notched over its top edge. In utilities the highlight is not a second component — it is the same <article> class list plus five overrides, which is the clearest way to show a reviewer exactly what &ldquo;recommended&rdquo; costs.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tps-02 w-full min-h-svh bg-tps02-bg font-tps02-sans text-tps02-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(28px,5vw,48px)]">
    <h2 class="m-0 mb-2.5 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-transparent bg-linear-to-r from-tps02-acc to-tps02-acc3 bg-clip-text forced-colors:text-[CanvasText] text-pretty">Simple pricing, no surprises.</h2>
    <p class="m-0 text-sm text-tps02-mut">Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-4.5 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl bg-tps02-card border border-tps02-edge">
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-acc3">Basic</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">12</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Just the essentials.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>3 projects</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>5 GB storage</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Email-only support</li>
      </ul>
      <a href="#basic" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline text-tps02-acc3 border border-current transition-[background-color,color] duration-200 hover:bg-tps02-acc3 hover:text-tps02-bg focus-visible:outline-2 focus-visible:outline-tps02-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Basic</a>
    </article>
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl border-0 z-2 bg-linear-to-b from-tps02-acc to-tps02-acc2 text-tps02-bg md:scale-105 md:shadow-[0_14px_40px_--theme(--color-tps02-glow)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1.25 rounded-full bg-tps02-bg text-tps02-acc text-[11px] font-bold uppercase tracking-[0.08em]" aria-label="Most popular plan">Most popular</span>
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-bg">Pro</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">36</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Everything teams actually need.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Unlimited projects</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>100 GB storage</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Priority support</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Custom domains</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Team roles</li>
      </ul>
      <a href="#pro" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline bg-tps02-bg text-tps02-acc border border-tps02-bg transition-[background-color,color,border-color] duration-200 hover:bg-tps02-ink hover:text-tps02-bg hover:border-tps02-ink focus-visible:outline-2 focus-visible:outline-tps02-bg focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro</a>
    </article>
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl bg-tps02-card border border-tps02-edge">
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-acc3">Enterprise</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">99</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Compliance + dedicated success.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Everything in Pro</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>SSO &amp; SAML</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>SLA + dedicated CSM</li>
      </ul>
      <a href="#enterprise" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline text-tps02-acc3 border border-current transition-[background-color,color] duration-200 hover:bg-tps02-acc3 hover:text-tps02-bg focus-visible:outline-2 focus-visible:outline-tps02-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Contact sales</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps02-bg: #1a1410;
  --color-tps02-bg: oklch(0.19 0.02 50);
  --color-tps02-card: #261c16;
  --color-tps02-card: oklch(0.25 0.02 50);
  --color-tps02-edge: #4a342a;
  --color-tps02-edge: oklch(0.38 0.04 50);
  --color-tps02-ink: #fef2e6;
  --color-tps02-ink: oklch(0.96 0.02 70);
  --color-tps02-mut: #c9b3a3;
  --color-tps02-mut: oklch(0.79 0.03 60);
  --color-tps02-acc: #ff8b5a;
  --color-tps02-acc: oklch(0.75 0.16 45);
  --color-tps02-acc2: #f56a3a;
  --color-tps02-acc2: oklch(0.68 0.18 40);
  --color-tps02-acc3: #ffb37a;
  --color-tps02-acc3: oklch(0.82 0.11 55);
  --color-tps02-glow: #f56a3a59;
  --color-tps02-glow: oklch(0.68 0.18 40 / 0.35);
  --font-tps02-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-02 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tps02-bg: #1a1410;
  --color-tps02-bg: oklch(0.19 0.02 50);
  --color-tps02-card: #261c16;
  --color-tps02-card: oklch(0.25 0.02 50);
  --color-tps02-edge: #4a342a;
  --color-tps02-edge: oklch(0.38 0.04 50);
  --color-tps02-ink: #fef2e6;
  --color-tps02-ink: oklch(0.96 0.02 70);
  --color-tps02-mut: #c9b3a3;
  --color-tps02-mut: oklch(0.79 0.03 60);
  --color-tps02-acc: #ff8b5a;
  --color-tps02-acc: oklch(0.75 0.16 45);
  --color-tps02-acc2: #f56a3a;
  --color-tps02-acc2: oklch(0.68 0.18 40);
  --color-tps02-acc3: #ffb37a;
  --color-tps02-acc3: oklch(0.82 0.11 55);
  --color-tps02-glow: #f56a3a59;
  --color-tps02-glow: oklch(0.68 0.18 40 / 0.35);
  --font-tps02-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-02 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The .ps-02__popular block and its two descendant overrides collapse into five extra utilities on one <article>: the gradient, the ink colour, border-0, z-2 and the md: lift. The recommendation is now a readable diff, not a second rule set.
  • The mobile transform: none reset disappears entirely — flat is the base state and the lift is a md: enhancement, which is the right default anyway.
  • --theme(--color-tps02-glow) inside the arbitrary shadow lets the glow stay a token while the blur geometry stays on the element.
  • The gradient headline's forced-colors fallback becomes a single forced-colors: variant rather than a media block appended to the sheet, so it sits next to the effect it rescues.
  • ::before content check-marks become inline aria-hidden spans; on the gradient card they inherit currentColor, which is why this demo does not need demo 01's mask.
  • items-center on the grid is what allows a taller centre card. It is one utility here and a line easily lost in a CSS grid block.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Highlighted Popular Pricing Tier
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-highlighted-popular-pricing-tier/

The lift pattern: the middle tier scales up, gains a sunset gradient and wears a &ldquo;Most popular&rdquo; pill notched over its top edge. In utilities the highlight is not a second component &mdash; it is the same <article> class list plus five overrides, which is the clearest way to show a reviewer exactly what &ldquo;recommended&rdquo; costs.
## HTML
```html
<section class="tps-02 w-full min-h-svh bg-tps02-bg font-tps02-sans text-tps02-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(28px,5vw,48px)]">
    <h2 class="m-0 mb-2.5 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-transparent bg-linear-to-r from-tps02-acc to-tps02-acc3 bg-clip-text forced-colors:text-[CanvasText] text-pretty">Simple pricing, no surprises.</h2>
    <p class="m-0 text-sm text-tps02-mut">Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-4.5 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl bg-tps02-card border border-tps02-edge">
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-acc3">Basic</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">12</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Just the essentials.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>3 projects</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>5 GB storage</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Email-only support</li>
      </ul>
      <a href="#basic" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline text-tps02-acc3 border border-current transition-[background-color,color] duration-200 hover:bg-tps02-acc3 hover:text-tps02-bg focus-visible:outline-2 focus-visible:outline-tps02-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Basic</a>
    </article>
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl border-0 z-2 bg-linear-to-b from-tps02-acc to-tps02-acc2 text-tps02-bg md:scale-105 md:shadow-[0_14px_40px_--theme(--color-tps02-glow)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1.25 rounded-full bg-tps02-bg text-tps02-acc text-[11px] font-bold uppercase tracking-[0.08em]" aria-label="Most popular plan">Most popular</span>
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-bg">Pro</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">36</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Everything teams actually need.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Unlimited projects</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>100 GB storage</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Priority support</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Custom domains</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Team roles</li>
      </ul>
      <a href="#pro" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline bg-tps02-bg text-tps02-acc border border-tps02-bg transition-[background-color,color,border-color] duration-200 hover:bg-tps02-ink hover:text-tps02-bg hover:border-tps02-ink focus-visible:outline-2 focus-visible:outline-tps02-bg focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro</a>
    </article>
    <article class="relative flex flex-col p-5.5 pt-6.5 rounded-2xl bg-tps02-card border border-tps02-edge">
      <h3 class="m-0 mb-3.5 text-[15px] font-bold uppercase tracking-[0.06em] text-tps02-acc3">Enterprise</h3>
      <div class="flex items-baseline gap-0.75 mb-1.5">
        <span class="text-lg font-semibold opacity-70">$</span><span class="text-[44px] font-extrabold tracking-[-0.03em]">99</span><span class="ml-1 text-[13px] opacity-70">/mo</span>
      </div>
      <p class="m-0 mb-4.5 text-[13px] opacity-75">Compliance + dedicated success.</p>
      <ul class="flex-1 list-none p-0 m-0 mb-5.5 text-[13.5px]/[1.9]">
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>Everything in Pro</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>SSO &amp; SAML</li>
        <li><span class="inline-block w-4.5 font-extrabold opacity-85" aria-hidden="true">&#10003;</span>SLA + dedicated CSM</li>
      </ul>
      <a href="#enterprise" class="block text-center px-4 py-2.75 rounded-lg text-[13.5px] font-semibold no-underline text-tps02-acc3 border border-current transition-[background-color,color] duration-200 hover:bg-tps02-acc3 hover:text-tps02-bg focus-visible:outline-2 focus-visible:outline-tps02-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Contact sales</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps02-bg: #1a1410;
  --color-tps02-bg: oklch(0.19 0.02 50);
  --color-tps02-card: #261c16;
  --color-tps02-card: oklch(0.25 0.02 50);
  --color-tps02-edge: #4a342a;
  --color-tps02-edge: oklch(0.38 0.04 50);
  --color-tps02-ink: #fef2e6;
  --color-tps02-ink: oklch(0.96 0.02 70);
  --color-tps02-mut: #c9b3a3;
  --color-tps02-mut: oklch(0.79 0.03 60);
  --color-tps02-acc: #ff8b5a;
  --color-tps02-acc: oklch(0.75 0.16 45);
  --color-tps02-acc2: #f56a3a;
  --color-tps02-acc2: oklch(0.68 0.18 40);
  --color-tps02-acc3: #ffb37a;
  --color-tps02-acc3: oklch(0.82 0.11 55);
  --color-tps02-glow: #f56a3a59;
  --color-tps02-glow: oklch(0.68 0.18 40 / 0.35);
  --font-tps02-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-02 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

One card, five overrides. The flankers and the highlight share a class list; the Pro card appends exactly what makes it the recommendation:

<article class="relative flex flex-col rounded-2xl p-5.5
  bg-linear-to-b from-tps02-acc to-tps02-acc2 text-tps02-bg
  border-0 z-2 md:scale-105
  md:shadow-[0_14px_40px_--theme(--color-tps02-glow)]">

A reviewer can read the diff. In the CSS version the same information is a .ps-02__popular block plus two descendant overrides plus a media-query reset, in three places.

The scale is mobile-gated on purpose. Stacked, a 5% scale makes the middle card overlap its neighbours' padding and the 40px shadow bleeds into the tier above. Both live behind md:, so the mobile column is flat and clean and the desktop row gets the anchor.

Gradient text needs an escape hatch. bg-clip-text text-transparent paints the headline in the card's gradient, but under forced-colors: active the background is dropped and transparent text disappears — a WCAG 1.4.11 failure. forced-colors:text-[CanvasText] is the two-utility fix, on the element.

The check-marks stay glyphs here. Demo 01 masks an SVG; this one keeps the CSS version's ✓ character in the markup as an aria-hidden span, because on a gradient card a glyph inherits currentColor for free and the tier's dark ink is the point.

Make it yours

  • Recolour the recommendation by editing --color-tps02-acc/--color-tps02-acc2; the headline gradient, the card gradient and the badge text all read them. Recompute --color-tps02-glow from the gradient's dark end at ~0.35 alpha or the lift looks ungrounded.
  • Move the recommendation: the override classes are all on one <article>. Cut and paste them onto another tier — no CSS changes.
  • Badge shape: rounded-full reads modern SaaS, rounded-sm reads stamped tag, [clip-path:polygon(0_0,100%_0,100%_70%,50%_100%,0_70%)] reads folded banner.
  • Lift amount: md:scale-105 → md:scale-110 for a harder anchor; past that the flankers start to read as disabled.
  • Light mode: swap --color-tps02-bg to cream and --color-tps02-ink to cocoa, keep the gradient card untouched, and the badge's black-on-cream stamp still works.

Gotchas — read before shipping

  • relative on the card is load-bearing, not decoration — it is the badge's containing block. Remove it and the pill escapes to the nearest positioned ancestor.
  • md:scale-105 makes the card a stacking context but not a containing block for fixed children; a tooltip portalled inside it will ride the transform.
  • Keep the big shadow behind md:. At 40px blur on a stacked layout it overlaps the tier above by ~25px and reads as a bleeding halo.
  • bg-clip-text text-transparent fails silently in forced-colors mode. Ship the forced-colors: twin or the headline vanishes for a real user population.
  • The gradient card's outline CTA needs its own dark background: accent text on the gradient measures ~2.3:1, which is why the primary CTA is bg-tps02-bg text-tps02-acc, not a ghost button.
  • &ldquo;Most popular&rdquo; is DOM text with an aria-label twin. Localise both in the same commit or VoiceOver announces two languages at once.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

background-clip: text is Baseline 2023 (unprefixed); forced-colors is supported in Chrome 89+, Edge 79+ and Firefox 89+ and degrades to the gradient elsewhere. The floor quoted here is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

background-clip: texttw ↗linear gradienttw ↗transformstw ↗box-shadowtw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →