🚀 شروع کار

برای استفاده از کامپوننت‌ها و کالکشن‌ها، لازمه ابتدا تنظیمات اولیه‌ی مربوط به رنگ‌ها و استایل‌های پایه رو انجام بدی.

این بخش بهت نشون می‌ده چطور فایل‌های استایل رو آماده و ساختاردهی کنی :)

📁 ساختار فایل‌ها

ما از یک فایل به نام colors.css داخل پوشه‌ی theme استفاده می‌کنیم تا رنگ‌های اصلی پروژه رو تعریف کنیم. این فایل به‌سادگی قابل ویرایش و شخصی‌سازی برای تم روشن و تاریکه.

📦 css └── 📁 theme └── 📄 colors.css

🎨 تعریف رنگ‌ها در colors.css

در فایل colors.css، رنگ‌های تم روشن و تاریک به این صورت تعریف می‌شن:

:root {
    --background-color: hsl(0 0% 100%);
    --foreground-color: hsl(20 14.3% 4.1%);

    --primary-color: hsl(221.34 97% 54%);
    --primary-foreground-color: hsl(0 0% 100%);
    --accent-color: hsl(186.13deg 100% 34.57%);
    --accent-foreground-color: hsl(210 40% 98%);

    --secondary-color: hsl(60 4.8% 95.9%);
    --secondary-foreground-color: hsl(24 9.8% 10%);

    --muted-color: hsl(60 4.8% 95.9%);
    --muted-foreground-color: hsl(25 5.3% 44.7%);

    --info-color: hsl(195.82 100% 50%);
    --info-foreground-color: hsl(0 0% 100%);
    --success-color: hsl(223.81 0% 45%);
    --success-foreground-color: hsl(210 40% 98%);
    --warning-color: hsl(51.5 100% 56.01%);
    --warning-foreground-color: hsl(217.28 36% 18%);
    --destructive-color: hsl(0, 86%, 40%);
    --destructive-foreground-color: hsl(210 40% 98%);

    --border-color: hsl(20 5.9% 90%);
    --input-color: hsl(0, 0%, 95%);
    --ring-color: hsl(20 5.9% 80%);
}

.dark {
    --background-color: hsl(20 14.3% 4.1%);
    --foreground-color: hsl(60 9.1% 97.8%);

    --primary-color: hsl(221.34 97% 54%);
    --primary-foreground-color: hsl(0 0% 100%);
    --accent-color: hsl(186.13deg 100% 34.57%);
    --accent-foreground-color: hsl(210 40% 98%);

    --secondary-color: hsl(12 6.5% 15.1%);
    --secondary-foreground-color: hsl(60 9.1% 97.8%);

    --muted-color: hsl(12, 9%, 11%);
    --muted-foreground-color: hsl(24 5.4% 63.9%);

    --info-color: hsl(202.59 100% 33%);
    --info-foreground-color: hsl(0 0% 100%);
    --success-color: hsl(164.5deg 100% 21.21%);
    --success-foreground-color: hsl(210 40% 98%);
    --warning-color: hsl(44.37 100% 47%);
    --warning-foreground-color: hsl(228.82 85% 5%);
    --destructive-color: hsl(0 63% 31%);
    --destructive-foreground-color: hsl(210 40% 98%);

    --border-color: hsl(12 6.5% 15.1%);
    --input-color: hsl(12, 4%, 22%);
    --ring-color: hsl(12, 5%, 18%);
}

تو می‌تونی رنگ‌های بیشتری رو هم به دلخواه به این فایل اضافه کنی.

🧩 ایمپورت و استفاده در app.css

برای استفاده از رنگ‌ها و تعریف تنظیمات پایه، کافیه محتویات زیر رو داخل فایل app.css قرار بدی:

@import "tailwindcss";

@import "./theme/colors.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --text-2xs: 0.65rem;

    --color-background: var(--background-color);
    --color-foreground: var(--foreground-color);
    --color-primary: var(--primary-color);
    --color-primary-foreground: var(--primary-foreground-color);
    --color-accent: var(--accent-color);
    --color-accent-foreground: var(--accent-foreground-color);
    --color-secondary: var(--secondary-color);
    --color-secondary-foreground: var(--secondary-foreground-color);
    --color-muted: var(--muted-color);
    --color-muted-foreground: var(--muted-foreground-color);
    --color-info: var(--info-color);
    --color-info-foreground: var(--info-foreground-color);
    --color-success: var(--success-color);
    --color-success-foreground: var(--success-foreground-color);
    --color-warning: var(--warning-color);
    --color-warning-foreground: var(--warning-foreground-color);
    --color-destructive: var(--destructive-color);
    --color-destructive-foreground: var(--destructive-foreground-color);
    --color-border: var(--border-color);
    --color-input: var(--input-color);
    --color-ring: var(--ring-color);
}

@layer base {
    * {
        @apply border-border;
    }

    /* total width */
    *::-webkit-scrollbar {
        @apply bg-background w-4;
    }

    /* background of the scrollbar except button or resizer */
    *::-webkit-scrollbar-track {
        @apply bg-background;
    }

    /* scrollbar itself */
    *::-webkit-scrollbar-thumb {
        @apply bg-secondary border-solid border-4 border-background rounded-2xl;
    }

    /* set button(top and bottom of the scrollbar) */
    *::-webkit-scrollbar-button {
        @apply hidden;
    }

    html {
        @apply scroll-smooth;
    }

    body {
        @apply bg-background text-foreground;
    }
}

✅ نتیجه

با این تنظیمات، پروژه‌ات آماده‌ی استفاده از دارک‌مود و استایل‌های پایه‌ای مورد نیاز برای کامپوننت‌ها و کالکشن‌ها خواهد بود.

💡 این بخش بین تمام کامپوننت‌ها و کالکشن‌ها مشترکه، پس فقط یک‌بار نیازه تنظیمش کنی.