Guide · 3 min read · Updated 2026-05-08

How to display the Saudi Riyal symbol (U+20C1) with Tailwind CSS

A first-class Tailwind plugin that ships the SAMA Saudi Riyal glyph plus utility classes for prices, weights, and theme tokens. Works with Tailwind v3 and v4, and pairs with the bundled WOFF2 font from riyal/css.

If your stack is Tailwind-first, the riyal/tailwind plugin gives you the official SAMA Saudi Riyal glyph as a set of utility classes — riyal-symbol, riyal-price, font-riyal, plus weight and size variants — without writing any custom CSS.

Install

pnpm add riyal tailwindcss

Add the plugin to your tailwind.config.{js,ts}:

import riyal from "riyal/tailwind";

export default {
  content: ["./src/**/*.{ts,tsx,vue,svelte,html}"],
  plugins: [riyal()],
};

Load the bundled font

The Tailwind plugin assumes the Riyal font is registered. Either import the bundled CSS or set it up yourself:

/* Easiest — adds @font-face for all weights */
@import "riyal/css";

Real WOFF2/WOFF/TTF files (Regular 400, Medium 500, Bold 700) ship inside the package, generated from the SAMA master SVG via opentype.js + wawoff2. The @font-face declarations have unicode-range: U+20C1 set, so the font only loads when a page actually renders the glyph.

Utility classes

<span class="riyal-symbol text-3xl"></span>

<p class="riyal-price text-foreground">2,499.99</p>

<span class="font-riyal">⃁ 99.90</span>

• riyal-symbol — renders the U+20C1 glyph via ::before; pair with size utilities (text-sm, text-3xl, etc.).
• riyal-price — prefixes the symbol on any element, with a small inline-end margin for readability.
• font-riyal — sets font-family: "Riyal", system-ui for raw text where you’ve typed the U+20C1 codepoint directly.

Combine with riyal/react components

import { RiyalPrice } from "riyal/react";

<RiyalPrice
  amount={2499.99}
  className="text-3xl font-semibold tabular-nums tracking-tight"
/>

The React component renders inline SVG, so it doesn’t depend on the Tailwind plugin. Mix and match as needed.

Tailwind + shadcn registry

Drop production-ready components into your project with one command:

npx shadcn@latest add https://riyal.js.org/r/riyal-price-tag.json
npx shadcn@latest add https://riyal.js.org/r/riyal-amount-input.json
npx shadcn@latest add https://riyal.js.org/r/riyal-checkout-summary.json

Next steps

• Plugin source: github.com/pooyagolchian/riyal — src/tailwind
• Live demo: https://riyal.js.org

Built by Pooya Golchian · riyal on npm · live demo