hebrew-tailwind-preset

Hebrew Tailwind Preset

Tailwind CSS v4 recommended (current release v4.3, May 2026); v3.3+ also works: logical utilities arrived and the rtl:/ltr: variants were marked stable in v3.3.0. Works with React, Vue, Angular, Next.js, and Nuxt. No network required.

Instructions

Step 1: Install and Configure Tailwind v4 for RTL

See references/rtl-config.md for complete configuration reference.

Install the Tailwind v4 build plugin first. Tailwind v4 runs through a build plugin (Vite, PostCSS, or webpack) and is configured in CSS; tailwind.config.js is no longer loaded automatically. Pick the plugin matching your toolchain:

# Vite (recommended): install the first-party Vite plugin
npm install tailwindcss @tailwindcss/vite

// vite.config.js -- add the plugin
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

# PostCSS-based toolchains (Next.js, Webpack, etc.)
npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: { '@tailwindcss/postcss': {} },
};

In v4 the @tailwindcss/postcss plugin handles @import inlining and vendor prefixing, so postcss-import and autoprefixer are no longer needed. For a plain webpack build without PostCSS, v4.2 added a loader: npm install @tailwindcss/webpack, then list '@tailwindcss/webpack' after 'css-loader' in the .css rule's use array.

Then load Hebrew fonts with font-display: swap (via a Google Fonts <link> or an @font-face rule) to avoid a Flash of Invisible Text while the Hebrew font file loads. The loading snippet follows the configuration blocks below.

Tailwind v4 (CSS-first configuration):

/* app.css -- imported by your build entry */
@import "tailwindcss";

@theme {
  /* Hebrew font stacks */
  --font-sans: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif; /* default font for html, body and form controls */
  --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-hebrew-serif: 'Frank Ruhl Libre', 'David Libre', serif;
  --font-mono: 'Cousine', 'Fira Code', monospace; /* Cousine carries Hebrew glyphs for code comments; Fira Code does not */

  /* Hebrew-optimized type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Hebrew line heights (taller than Latin defaults).
     The --leading-* namespace generates leading-<name> utilities,
     so these names are what make leading-hebrew, leading-hebrew-tight
     and leading-hebrew-relaxed exist. Naming them --leading-tight /
     --leading-normal / --leading-relaxed instead would only override
     the built-in scale and leave every leading-hebrew* class empty. */
  --leading-hebrew: 1.7;
  --leading-hebrew-tight: 1.4;
  --leading-hebrew-relaxed: 1.9;
}