شروع

Tailwind

رنگ‌ها، فونت، گردی گوشه و سایه‌های کاشی به‌شکل کلاس‌های Tailwind؛ همگام با تم تیره و روشن و رنگ برند شما.

پکیج تازه · v0.21.0

توکن‌های کاشی، به زبان Tailwind.

رنگ‌ها، فونت، گردی و سایه‌های کاشی به‌شکل کلاس‌های آشنای Tailwind؛ همگام با تم تیره و روشن و رنگ برند شما، بدون حتی یک رنگ کپی‌شده.

npm i @kashi-ui/tailwind

Tailwind 4 با یک خط CSS
Tailwind 3 با پریست
کامپوننت‌ها بدون تغییر

بدون پریستbg-[var(--k-bg-secondary)] p-4 rounded-[var(--k-radius-lg)] border-[var(--k-border-brand)]

با پریستbg-secondary p-4 rounded-lg border border-brand

سفارش‌های امروز۱۲ سفارش تازه

+۸٪

مشاهدهگزارش

پیش‌نمایش زنده؛ تم سایت را از بالای صفحه عوض کنید

رنگ معنایی: ۳۱
طیف رنگ: ۷
نسخهٔ Tailwind: 3 · 4
رنگ کپی‌شده: ۰

با پریست @kashi-ui/tailwind، توکن‌های کاشی در پروژهٔ Tailwind شما به‌شکل کلاس‌های آشنا در دسترس‌اند. کامپوننت‌های کاشی همان‌طور که هستند کار می‌کنند و برای بخش‌های دلخواه صفحه، به‌جای bg-[var(--k-bg-secondary)] می‌نویسید bg-secondary:

<div className="bg-secondary border border-brand rounded-lg shadow-md p-4">
  <h3 className="text-primary text-lg font-semibold">سفارش‌های امروز</h3>
  <p className="text-tertiary text-sm">۱۲ سفارش تازه</p>
  <Button variant="primary">مشاهده</Button>
</div>

کلاس‌ها کپی رنگ‌ها نیستند؛ همه به همان متغیرهای کاشی (var(--k-…)) اشاره می‌کنند. پس تم تیره و روشن، رنگ برندی که با createTheme ساخته‌اید و هر نسخهٔ جدید کاشی، بدون هیچ کاری روی کلاس‌های Tailwind هم اعمال می‌شود. ساختار کاشی هم تغییری نمی‌کند؛ این پکیج فقط یک پل است.

نصب

npm i @kashi-ui/react @kashi-ui/css @kashi-ui/tailwind

Tailwind 4

در فایل CSS اصلی پروژه (مثلاً app/globals.css) این سه خط را به همین ترتیب بگذارید:

@import "@kashi-ui/tailwind";
@import "tailwindcss";
@import "@kashi-ui/css";

نتیجهٔ این ترتیب: اولویت لایه‌های CSS، از کم به زیادthemebasekashicomponentsutilitiesکلاس‌های Tailwind (utilities) آخرند و همیشه برنده‌اند؛ پس <Button className="rounded-none"> واقعاً گوشه‌ها را تیز می‌کند.

ترتیب مهم است: @kashi-ui/tailwind باید اول بیاید تا ترتیب لایه‌های CSS را تعیین کند و کلاس‌های Tailwind همیشه بر استایل کامپوننت‌های کاشی برنده باشند. با ترتیب دیگر، استایل کاشی برنده می‌شود و مثلاً rounded-none روی دکمه اثر نمی‌کند.

Tailwind 3

در tailwind.config.js پریست را اضافه کنید و CSS کاشی را مثل همیشه وارد کنید. در Tailwind 3 کلاس‌ها بیرون از لایه‌ها ساخته می‌شوند و خودبه‌خود بر کاشی برنده‌اند:

module.exports = {
  presets: [require("@kashi-ui/tailwind/preset")],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
};

import "@kashi-ui/css";

کلاس‌ها

رنگ‌های معنایی

همان نام‌های توکن‌های کاشی، بدون پیشوند. این‌ها با تم تیره و روشن عوض می‌شوند و برای بیشتر رابط کاربری کافی‌اند.

پس‌زمینه `bg-*`

متن `text-*`

حاشیه `border-*`

روی هر نمونه بزنید تا نام کلاس کپی شود. رنگ‌ها زنده‌اند و با تم سایت عوض می‌شوند.

فهرست متنی همهٔ رنگ‌های معنایی

پس‌زمینه bg-primary، bg-secondary، bg-tertiary، bg-elevated، bg-hover، bg-active، bg-brand، bg-brand-hover، bg-brand-subtle، bg-error، bg-error-hover، bg-error-subtle، bg-warning-subtle، bg-success-subtle و bg-info-subtle؛ متن text-primary، text-secondary، text-tertiary، text-quaternary، text-on-brand، text-on-error، text-brand، text-error، text-warning، text-success و text-info؛ حاشیه border-primary، border-secondary، border-brand، border-input و border-error. همهٔ حالت‌های Tailwind هم کار می‌کنند: hover:bg-hover، focus:border-brand، md:bg-secondary.

طیف رنگ‌ها

طیف برند و رنگ‌های ایرانی کاشی، از ۵۰ تا ۹۵۰، با پشتیبانی از شفافیت مثل bg-brand-500/50. روی هر خانه بزنید تا کلاسش کپی شود:

۵۰۱۰۰۲۰۰۳۰۰۴۰۰۵۰۰۶۰۰۷۰۰۸۰۰۹۰۰۹۵۰

برندbrand

فیروزهfiroozeh

لاجوردlajvard

زعفرانzafaran

انارanar

پستهpesteh

شبshab

نام طیف‌ها: brand (همان رنگی که createTheme می‌سازد)، firoozeh (فیروزه)، lajvard (لاجورد)، zafaran (زعفران)، anar (انار)، pesteh (پسته) و shab (شب)؛ مثل bg-firoozeh-100، text-anar-600 یا border-lajvard-300.

گردی و سایه

گردی گوشه `rounded-*`

rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full

سایه `shadow-*`

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-skeuomorphic

ضریب گردی کاشی (--k-radius-factor) روی همهٔ rounded-* ها اعمال می‌شود.

متن، لایه و حرکت

گروه	کلاس‌ها
فونت	`font-sans` (وزیرمتن یا فونت شما) · `font-display` · `font-mono`
اندازهٔ متن	`text-xs` تا `text-6xl`، با ضریب `--k-text-scale`
وزن	`font-light` · `font-regular` · `font-medium` · `font-semibold` · `font-bold` · `font-black`
ارتفاع خط	`leading-tight` · `leading-normal` · `leading-relaxed`
لایه	`z-dropdown` · `z-sticky` · `z-overlay` · `z-modal` · `z-toast`
حرکت	`ease-standard` · `ease-emphasized`

فاصله‌ها (p-4، gap-6، mt-8) همان مقیاس پیش‌فرض Tailwind‌اند که با مقیاس کاشی (پله‌های ۴ پیکسلی) یکی است؛ p-4 در هر دو ۱۶ پیکسل است.

تم تیره و روشن

کاشی به‌طور پیش‌فرض تیره است و با data-theme="light" روی <html> روشن می‌شود. حالت‌های dark: و light: هم از همین پیروی می‌کنند:

<div className="shadow-none light:shadow-sm">…</div>

برای بیشتر کارها به این حالت‌ها نیازی ندارید؛ رنگ‌های معنایی مثل bg-secondary خودشان با تم عوض می‌شوند.

رنگ برند

تمی که با createTheme یا تم‌ساز می‌سازید، روی کلاس‌های Tailwind هم اعمال می‌شود:

import { createTheme } from "@kashi-ui/tokens";

const css = createTheme({ brand: "#3d5ef8", radius: 1.5 });
// حالا bg-brand، text-brand و rounded-lg هم لاجوردی و گردتر شده‌اند

راست‌به‌چپ

Tailwind کلاس‌های منطقی دارد که در RTL و LTR درست کار می‌کنند؛ مثل کامپوننت‌های کاشی، به‌جای ml-* و pr-* از این‌ها استفاده کنید:

به‌جای	بنویسید
`ml-4` / `mr-4`	`ms-4` / `me-4`
`pl-4` / `pr-4`	`ps-4` / `pe-4`
`left-0` / `right-0`	`start-0` / `end-0`
`text-left`	`text-start`

برای جاهایی که واقعاً به جهت وابسته‌اند، حالت‌های rtl: و ltr: هم هست، مثل rtl:rotate-180 برای فلش.

نصب