با استفاده از color-mix() در TailwindCSS یک پالت سفارشی بسازید

در این پست نحوه استفاده از تابع CSS را خواهیم دید color-mix() با متغیرهای CSS برای تولید یک پالت سفارشی برای برنامه Nuxt به طور موثر با TailwindCSS.

جدول محتویات

پیش نیازها

بهتر است برنامه Nuxt خود را با استفاده از دستور زیر تنظیم کنید:

npx nuxi init tailwindcss-color-mix

انتخاب TailwindCSS به عنوان یک وابستگی در هنگام نصب، بهترین کار خواهد بود.

پس از ایجاد، در دایرکتوری ریشه پروژه، باید دو فایل ایجاد کنید – یکی است tailwind.css واقع در styles پوشه با کد زیر:

/** styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

و یک فایل دیگر ایجاد می کنیم، tailwind.config.js، برای گسترش پیکربندی TaiwindCSS در پروژه:

/** tailwind.config.js */
module.exports = {
}

سپس در nuxt.config.js، باید تنظیم کنید tailwindcss پیکربندی افزونه با کد زیر:

/** nuxt.config.js */
export default {
    //...
      tailwindcss: {
        cssPath: '~/styles/tailwind.css',
        configPath: '~/tailwind.config.js'
      },
}

و ما برای آموزش خود آماده ایم!

درک انواع پالت رنگ

پالت رنگ TailwindCSS مجموعه ای از رنگ ها است که به دو بخش تقسیم می شوند: رنگ های روشن تر (انواع رنگی) و رنگ های تیره تر (انواع سایه). انواع رنگ ها در محدوده 50 تا 400 و رنگ های تیره تر از 600 تا 900 هستند، با رنگ پایه به عنوان یک نوع 500. نمونه ای از پالت TailwindCSS برای رنگ #96454c به شرح زیر است:

راه های زیادی برای تولید انواع پالت رنگ وجود دارد. می توانید از Color Palette Generator برای ساختن یک پالت از یک تصویر استفاده کنید یا مکانیزم خود را بسازید تا یک رنگ را بگیرید و پالت مناسب را با استفاده از جاوا اسکریپت ایجاد کنید.

یا می توانید از تابع CSS استفاده کنید – color-mix() برای رسیدن به این هدف.

پالت را با انواع tint و shade با color-mix() ایجاد کنید

color-mix() یک تابع CSS است که دو رنگ را می پذیرد و بر اساس یک فضای رنگی معین، نوع رنگ مخلوط مورد نظر را برمی گرداند. برای استفاده color-mix()، ما باید آن را تعریف کنیم colorSpace برای محاسبه مقدار مخلوط کردن baseColor و blendingColor، مانند نحو زیر:

color-mix(
    in colorSpace, 
    baseColor <baseColorPercent>, 
    blendingColor <blendingColorPercent>
)

ما همچنین می توانیم نشان دهیم baseColorPercent درصد از baseColor و blendingColorPercent از blendingColor در صورت لزوم، مرورگر باید برای میکس استفاده کند. در زیر نمونه ای از مخلوط کردن آورده شده است 50% رنگ قرمز با 20% رنگ سفید در sRGB فضای رنگی با color-mix():

در حالی که baseColor و blendingColor می تواند هر مقدار رنگی با پشتیبانی CSS باشد، ما همچنین می توانیم استفاده کنیم color-mix() برای فضاهای رنگی مختلف برای ترکیب رنگ، از sRGB تا HSL. رنگ نتیجه در هر فضای رنگی انتخابی متفاوت خواهد بود. برای این پست، ما از sRGB به عنوان فضای رنگی خود استفاده خواهیم کرد.

اکنون می فهمیم که چگونه color-mix() کار می کند، ما چگونگی ایجاد رنگ و انواع اشتراک گذاری برای پالت رنگ Tailwind خود را بررسی خواهیم کرد.

ایجاد انواع رنگ

همانطور که گفته شد، انواع رنگ، سایه های روشن تری از رنگ پایه هستند که از ترکیب رنگ پایه با سفید در یک سطح شدت (یا درصد) معین به وجود می آیند.

به عبارت دیگر، با استفاده از ترکیب یک رنگ با درصد سفید، یک نوع جدید ایجاد می کنیم color-mix() با فرمول زیر:

color-mix(in srgb, <color>, white <whitePercentage>)

بر اساس فرمول بالا یک تابع را پیاده سازی می کنیم getTintVariantColor که پایه می پذیرد color و یک intensity مقدار از 0 تا 1 و رشته ای حاوی کد CSS مناسب را برمی گرداند color-mix:

function getTintVariantColor(color, intensity) {
    return `color-mix(in srgb, ${color}, white ${intensity * 100}%)`
}

و از آنجایی که برای رنگ های خود به انواع 50، 100، 200 و 400 نیاز داریم، می توانیم به تدریج مقادیر را افزایش دهیم. whitePercentage برای هر سطح متغیر بر این اساس، مانند مثال زیر:

const tintVariants = {
    50: 0.95, //95%
    100: 0.9, //90%
    200: 0.7, //70%
    300: 0.5, //50%
    400: 0.3, //30%
}

عالی. حالا بیایید به سمت tailwind.config.js فایل و پالت سفارشی خود را از رنگ اصلی ارائه کنید #96454c، با استفاده از theme.extend.colors میدان در tailwind.config.js فایل به شرح زیر

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: getTintVariantColor('#96454c', tintVariants.50),
          100: getTintVariantColor('#96454c', tintVariants.100),
          200: getTintVariantColor('#96454c', tintVariants.200),
          300: getTintVariantColor('#96454c', tintVariants.300),
          400: getTintVariantColor('#96454c', tintVariants.400),
          500: '#96454c',
        }
      },
    }
  },
}

خودشه. وقتی کد زیر را به pages/index.vue در فایل، پالت رنگی رنگ اصلی را خواهید دید #96454c:

<template>
  <main class="flex items-center flex-col gap-5 my-10">
    <h1>Current template:</h1>
    <h2 class="text-primary-500">Base color: #96454c</h2>
    <ul style="width: 200px">
      <li 
        v-for="variant in palettes" 
        :class="`bg-primary-${variant} px-3 py-2 ${ variant > 500 ? 'text-white': ''}`"
        key="variant"
      >
        {{variant}}
      </li>
    </ul>
  </main>
</template>
<script setup>
const palettes = [50, 100, 200, 300, 400, 500]
</script>

از آنجایی که ما در حال محاسبه پویا کلاس های موجود در قالب هستیم، باید اضافه کنیم primary الگوی کلاس رنگ به safelist از پیکربندی TailwindCSS. در غیر این صورت، TailwindCSS کلاس های مربوطه را تولید نمی کند زیرا فکر می کند که استفاده نمی شوند.

module.exports = {
    //...
    safelist: [
        {
            pattern: /\-primary\-/,
        }
    ]
}

از طرف دیگر، ما همچنین می توانیم درصد رنگ پایه خود را به جای سفید برای میکسر رنگ خود تعریف کنیم. در این مورد ما محاسبه می کنیم colorPercentage ارزش به عنوان 100% - whitePercentage برای هر سطح شدت:

const tintVariantsForBaseColor = {
    50: 0.05, //95% white
    100: 0.1, //90%
    200: 0.3, //70%
    300: 0.5, //50%
    400: 0.7, //30%
}

و فرمول ما به شکل زیر تغییر می کند:

color-mix(in srgb, <color> <colorPercentage>%, white)

نتیجه باید مانند اجرای قبلی باقی بماند.

در مرحله بعد، ما همین رویکرد را برای تولید انواع سایه اعمال خواهیم کرد.

ایجاد انواع سایه

در حالی که رنگ‌ها انواعی هستند که از ترکیب یک رنگ با سفید به وجود می‌آیند، به عنوان انواع تیره‌تر، سایه‌ها رنگ‌هایی هستند که از ترکیب رنگ مورد نظر ما با سیاه در سطحی با شدت خاص به دست می‌آیند. با پیروی از فرمول قبلی برای رنگ های رنگی، می توانیم یک تابع بنویسیم getShadeVariantColor() به روشی مشابه:

function getShadeVariantColor(color, intensity) {
    return `color-mix(in srgb, ${color}, black ${intensity * 100}% )
}

و همچنین باید سطح شدت را در مقیاس 0 تا 1 به عنوان انواع 600، 700، 800 و 900 برای سایه های خود تعریف کنیم، با افزایش تدریجی مقدار آن 0.2 (20%):

const tintVariants = {
    600: 0.1, //10%
    700: 0.3, //30%
    800: 0.5, //50%
    900: 0.7, //70%
}

سپس در tailwind.config.js، ما استفاده خواهیم کرد getShadeVariantColor() تابعی برای تولید انواع باقیمانده برای رنگ اصلی ما:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
            //...
            600: getShadeVariantColor('#96454c', shadeVariants.600),
            700: getShadeVariantColor('#96454c', shadeVariants.700),
            800: getShadeVariantColor('#96454c', shadeVariants.800),
            900: getShadeVariantColor('#96454c', shadeVariants.900),
        }
      },
    }
  },
}

و در pages/index.vue فایل، ما می توانیم کدهای نوع باقی مانده را به آن اضافه کنیم palettes به شرح زیر است:

<script setup>
const palettes = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
</script>

اکنون کل پالت نمایش داده شده در مرورگر را خواهیم دید:

عالی. اما اگر بخواهیم رنگ پایه اصلی را به رنگ دیگری تغییر دهیم چه؟ جایگزینی دستی هر ردیف از محاسبات نوع می تواند ناکارآمد باشد. ما باید راهی برای پویاتر کردن آن پیدا کنیم، مانند استفاده از کمک یا currentColor یا متغیرهای CSS در ادامه آن را بررسی می کنیم.

استفاده از color-mix() با متغیرهای currentColor و CSS

متاسفانه نمیتونیم استفاده کنیم currentColor داخل color-mix(). با این حال، ما می توانیم از متغیرهای CSS با کمک استفاده کنیم var() عملکرد و color-mix().

به عنوان مثال پالت رنگی ما را در نظر بگیرید. به جای نگاشت کد رنگ به طور مستقیم در فایل پیکربندی، می توانیم یک متغیر CSS اختصاص دهیم --color-primary-base به لایه پایه گسترده در ما tailwind.css فایل به شرح زیر

/**styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
      --color-primary-base: #96454c;
    }
  }

سپس در tailwind.config.js، مقدار آن را تغییر خواهیم داد #96454c به var(--color-primary-base):

colors: {
    'primary': {
        50: 'color-mix(in srgb, var(--color-primary-base) 5%, white)',
        100: 'color-mix(in srgb, var(--color-primary-base) 10%, white)',
        200: 'color-mix(in srgb, var(--color-primary-base) 30%, white)',
        300: 'color-mix(in srgb, var(--color-primary-base) 50%, white)',
        400: 'color-mix(in srgb, var(--color-primary-base) 70%, white)',
        500: 'var(--color-primary-base)',
        600: 'color-mix(in srgb, var(--color-primary-base), black 10%)',
        700: 'color-mix(in srgb, var(--color-primary-base), black 30%)',
        800: 'color-mix(in srgb, var(--color-primary-base), black 50%)',
        900: 'color-mix(in srgb, var(--color-primary-base), black 70%)',
    },
},

نتیجه ثابت می ماند، اما هر زمان که بخواهیم رنگ پایه اصلی را تغییر دهیم، فقط باید مقدار آن را تغییر دهیم --color-primary-base در فایل CSS اصلی

پشتیبانی از مرورگر

در مرحله نوشتن، اکثر مرورگرها به جز فایرفاکس نسخه 88 و بالاتر از این ویژگی پشتیبانی می کنند. بنابراین، در صورت نیاز به فایرفاکس، یک نسخه بازگشتی را اجرا کنید.

منابع

خلاصه

در این آموزش به طور خلاصه یاد گرفتیم که چگونه با استفاده از توابع CSS یک پالت رنگی بسازیم. color-mix()، var()، متغیرهای CSS و جاوا اسکریپت در یک برنامه کاربردی TailwindCSS-Nuxt. در واقع، می‌توانید از همین رویکرد برای محاسبه تم‌های رنگی برای توسعه برنامه‌های وب استفاده کنید، نه محدود به Nuxt و TailwindCSS.

در حالی که color-mix() در بسیاری از موارد می تواند در CSS خالص مفید باشد، ممکن است به دلیل محدودیت مرورگر (Firefox) انتخاب بهینه نباشد. در چنین سناریوهایی، استفاده از عملکرد داخلی TailwindCSS برای قالب بندی یا ابزار خارجی مانند Color Palette Generator ممکن است راه حل بهتری باشد. با این وجود، قدرت CSS خالص با ویژگی‌های مفیدتر قوی‌تر می‌شود، که ارزش انتظار را دارد!

اگر توابع CSS را امتحان کرده اید مانند color-mix() یا هر چیز دیگری، تجربه خود را در بخش نظرات با من به اشتراک بگذارید!

👉 اگر می خواهید گاهی اوقات با من تماس بگیرید، من را دنبال کنید توییتر | فیس بوک.

👉 با کتاب جدیدم Learning Vue درباره Vue بیاموزید. نسخه اولیه در حال حاضر در دسترس است!

این پست را دوست داشته باشید یا آن را مفید بدانید؟ به اشتراک بگذارید 👇🏼