M

MLOG

فارسی

در Functions API تیل‌ویند CSS عمیق شوید و یاد بگیرید چگونه کلاس‌های ابزاری، تم‌ها و واریانت‌های سفارشی بسازید تا طراحی‌های خود را به شکلی بی‌سابقه شخصی‌سازی کنید. مهارت‌های خود را ارتقا دهید و رابط‌های کاربری منحصر به فردی بسازید.

تسلط بر Tailwind CSS: آزادسازی قدرت Functions API برای تولید ابزارهای سفارشی

تیل‌ویند CSS با ارائه یک رویکرد ابزار-محور (utility-first) به استایل‌دهی، انقلابی در توسعه فرانت‌اند ایجاد کرده است. کلاس‌های از پیش تعریف‌شده آن به توسعه‌دهندگان اجازه می‌دهد تا به سرعت نمونه‌سازی کرده و رابط‌های کاربری یکپارچه‌ای بسازند. با این حال، گاهی اوقات مجموعه پیش‌فرض ابزارها کافی نیست. اینجاست که Functions API تیل‌ویند CSS وارد عمل می‌شود و راهی قدرتمند برای گسترش قابلیت‌های تیل‌ویند و تولید کلاس‌های ابزاری سفارشی متناسب با نیازهای خاص پروژه شما ارائه می‌دهد.

Functions API تیل‌ویند CSS چیست؟

Functions API مجموعه‌ای از توابع جاوا اسکریپت است که توسط تیل‌ویند CSS ارائه شده و به شما امکان می‌دهد به صورت برنامه‌نویسی با پیکربندی تیل‌ویند تعامل داشته باشید و CSS سفارشی تولید کنید. این امر دنیایی از امکانات را باز می‌کند و شما را قادر می‌سازد:

در اصل، Functions API ابزارهای لازم را برای شکل دادن به تیل‌ویند CSS دقیقاً مطابق با نیازهای شما فراهم می‌کند و شما را از ابزارهای داخلی فراتر برده و یک راه‌حل استایل‌دهی واقعاً منحصر به فرد و سفارشی ایجاد می‌کند.

توابع کلیدی Tailwind CSS API

هسته اصلی Functions API حول چندین تابع کلیدی می‌چرخد که در فایل پیکربندی تیل‌ویند شما (tailwind.config.js یا tailwind.config.ts) و در پلاگین‌های سفارشی ایجاد شده با استفاده از @tailwindcss/plugin قابل دسترسی هستند.

theme(path, defaultValue)

تابع theme() به شما امکان دسترسی به مقادیر تعریف شده در پیکربندی تم تیل‌ویند را می‌دهد. این شامل همه چیز از رنگ‌ها و فاصله‌گذاری‌ها گرفته تا اندازه‌های فونت و نقاط شکست (breakpoints) می‌شود. این تابع برای ایجاد ابزارهایی که با زبان طراحی پروژه شما سازگار هستند، حیاتی است.

مثال: دسترسی به یک رنگ سفارشی از تم:


module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#007bff',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      const newUtilities = {
        '.bg-brand-primary': {
          backgroundColor: theme('colors.brand-primary'),
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

این مثال کد هگز تعریف شده برای brand-primary را بازیابی کرده و از آن برای تولید یک کلاس ابزاری .bg-brand-primary استفاده می‌کند، که اعمال رنگ برند به عنوان پس‌زمینه را آسان می‌سازد.

addUtilities(utilities, variants)

تابع addUtilities() سنگ بنای تولید ابزارهای سفارشی است. این تابع به شما اجازه می‌دهد قوانین CSS جدیدی را به استایل‌شیت تیل‌ویند تزریق کنید. آرگومان utilities یک آبجکت است که در آن کلیدها نام کلاس‌هایی هستند که می‌خواهید ایجاد کنید و مقادیر، ویژگی‌ها و مقادیر CSS هستند که باید هنگام استفاده از آن کلاس‌ها اعمال شوند.

آرگومان اختیاری variants به شما اجازه می‌دهد تا نقاط شکست واکنش‌گرا و شبه‌کلاس‌ها (pseudo-classes) (مانند hover, focus) را که باید برای ابزار سفارشی شما تولید شوند، مشخص کنید. اگر هیچ واریانتی مشخص نشود، ابزار فقط برای حالت پیش‌فرض (پایه) تولید خواهد شد.

مثال: ایجاد یک ابزار برای تنظیم سرریز متن به حالت سه‌نقطه (ellipsis):


module.exports = {
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.truncate-multiline': {
          overflow: 'hidden',
          display: '-webkit-box',
          '-webkit-line-clamp': '3',
          '-webkit-box-orient': 'vertical',
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

این کد یک کلاس .truncate-multiline ایجاد می‌کند که متن را به سه خط کوتاه کرده و در صورت طولانی‌تر بودن متن، یک سه‌نقطه اضافه می‌کند.

addComponents(components)

در حالی که addUtilities برای کلاس‌های سطح پایین و تک منظوره است، addComponents برای استایل‌دهی به عناصر یا کامپوننت‌های رابط کاربری پیچیده‌تر طراحی شده است. این تابع به ویژه برای ایجاد استایل‌های کامپوننت قابل استفاده مجدد مفید است.

مثال: استایل‌دهی به یک کامپوننت دکمه:


module.exports = {
  plugins: [
    function ({ addComponents, theme }) {
      const buttons = {
        '.btn': {
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          borderRadius: theme('borderRadius.md'),
          fontWeight: theme('fontWeight.semibold'),
          backgroundColor: theme('colors.blue.500'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.blue.700'),
          },
        },
      };
      addComponents(buttons);
    },
  ],
};

این کد یک کلاس .btn با استایل‌های از پیش تعریف‌شده برای پدینگ، شعاع گوشه، وزن فونت و رنگ‌ها، شامل یک افکت هاور، ایجاد می‌کند. این امر قابلیت استفاده مجدد و یکپارچگی را در سراسر برنامه شما ترویج می‌دهد.

addBase(baseStyles)

تابع addBase برای تزریق استایل‌های پایه به استایل‌شیت تیل‌ویند استفاده می‌شود. این استایل‌ها قبل از هر یک از کلاس‌های ابزاری تیل‌ویند اعمال می‌شوند، که آن‌ها را برای تنظیم استایل‌های پیش‌فرض برای عناصر HTML یا اعمال ریست‌های سراسری مفید می‌سازد.

مثال: اعمال یک ریست سراسری برای box-sizing:


module.exports = {
  plugins: [
    function ({ addBase }) {
      const baseStyles = {
        '*, ::before, ::after': {
          boxSizing: 'border-box',
        },
      };
      addBase(baseStyles);
    },
  ],
};

addVariants(name, variants)

تابع addVariants به شما امکان می‌دهد واریانت‌های جدیدی تعریف کنید که می‌توانند به ابزارهای موجود یا سفارشی اعمال شوند. واریانت‌ها شما را قادر می‌سازند تا استایل‌ها را بر اساس حالت‌های مختلف مانند hover، focus، active، disabled یا نقاط شکست واکنش‌گرا اعمال کنید. این یک راه قدرتمند برای ایجاد رابط‌های کاربری پویا و تعاملی است.

مثال: ایجاد یک واریانت `visible` برای کنترل نمایش عنصر:


module.exports = {
  plugins: [
    function ({ addUtilities, addVariants }) {
      const newUtilities = {
        '.visible': {
          visibility: 'visible',
        },
        '.invisible': {
          visibility: 'hidden',
        },
      };

      addUtilities(newUtilities);

      addVariants('visible', ['hover', 'focus']);
    },
  ],
};

این کد ابزارهای .visible و .invisible را ایجاد کرده و سپس واریانت‌های hover و focus را برای ابزار visible تعریف می‌کند، که منجر به کلاس‌هایی مانند hover:visible و focus:visible می‌شود.

مثال‌های عملی از تولید ابزار سفارشی

بیایید چند مثال عملی از چگونگی بهره‌برداری از Functions API برای ایجاد کلاس‌های ابزاری سفارشی برای موارد استفاده مختلف را بررسی کنیم.

۱. ایجاد یک ابزار اندازه فونت سفارشی

تصور کنید به اندازه فونتی نیاز دارید که در مقیاس اندازه فونت پیش‌فرض تیل‌ویند گنجانده نشده است. شما به راحتی می‌توانید آن را با استفاده از Functions API اضافه کنید.


module.exports = {
  theme: {
    extend: {
      fontSize: {
        '7xl': '5rem',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      const newUtilities = {
        '.text-7xl': {
          fontSize: theme('fontSize.7xl'),
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

این کد یک کلاس ابزاری text-7xl اضافه می‌کند که اندازه فونت را به 5rem تنظیم می‌کند.

۲. تولید ابزارهای فاصله‌گذاری واکنش‌گرا

شما می‌توانید ابزارهای فاصله‌گذاری واکنش‌گرایی ایجاد کنید که به طور خودکار بر اساس اندازه صفحه نمایش تنظیم می‌شوند. این امر به ویژه برای ایجاد طرح‌بندی‌هایی که با دستگاه‌های مختلف سازگار هستند، مفید است.


module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme, variants }) {
      const spacing = theme('spacing');
      const newUtilities = Object.entries(spacing).reduce((acc, [key, value]) => {
        acc[`.my-${key}`] = {
          marginTop: value,
          marginBottom: value,
        };
        return acc;
      }, {});

      addUtilities(newUtilities, variants('margin'));
    },
  ],
};

این مثال ابزارهای .my-* را برای تمام مقادیر فاصله‌گذاری تعریف شده در تم شما تولید می‌کند و واریانت‌ها را برای margin فعال می‌کند، که امکان تغییرات واکنش‌گرا مانند md:my-8 را فراهم می‌آورد.

۳. ایجاد یک ابزار گرادیان سفارشی

گرادیان‌ها می‌توانند جذابیت بصری به طراحی‌های شما اضافه کنند. شما می‌توانید یک ابزار گرادیان سفارشی با استفاده از Functions API ایجاد کنید.


module.exports = {
  theme: {
    extend: {
      gradientColorStops: {
        'brand-primary': '#007bff',
        'brand-secondary': '#6610f2',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      const newUtilities = {
        '.bg-gradient-brand': {
          background: `linear-gradient(to right, ${theme('gradientColorStops.brand-primary')}, ${theme('gradientColorStops.brand-secondary')})`,
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

این کد یک کلاس .bg-gradient-brand ایجاد می‌کند که یک گرادیان خطی با استفاده از رنگ‌های برند سفارشی شما اعمال می‌کند.

۴. ابزارهای سایه جعبه (Box Shadow) سفارشی

ایجاد استایل‌های سایه جعبه خاص به راحتی با Functions API قابل دستیابی است. این امر به ویژه برای سیستم‌های طراحی که به ظاهر و احساس یکپارچه نیاز دارند، مفید است.


module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom-shadow': '0 4px 12px rgba(0, 0, 0, 0.15)',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      const newUtilities = {
        '.shadow-custom': {
          boxShadow: theme('boxShadow.custom-shadow'),
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

این کد یک کلاس .shadow-custom اضافه می‌کند که سایه جعبه سفارشی مشخص شده را اعمال می‌کند.

بهترین شیوه‌ها برای استفاده از Functions API

در حالی که Functions API انعطاف‌پذیری فوق‌العاده‌ای ارائه می‌دهد، مهم است که از بهترین شیوه‌ها برای حفظ یک پایگاه کد تمیز و قابل نگهداری پیروی کنید:

ساخت یک سیستم طراحی با Functions API

Functions API در ایجاد سیستم‌های طراحی قوی و قابل نگهداری نقش اساسی دارد. با تعریف توکن‌های طراحی خود (رنگ‌ها، تایپوگرافی، فاصله‌گذاری) در پیکربندی تم و سپس استفاده از Functions API برای تولید ابزارها بر اساس آن توکن‌ها، می‌توانید از یکپارچگی اطمینان حاصل کرده و یک منبع حقیقت واحد برای زبان طراحی خود ایجاد کنید. این رویکرد همچنین به‌روزرسانی سیستم طراحی شما را در آینده آسان‌تر می‌کند، زیرا تغییرات در پیکربندی تم به طور خودکار به تمام ابزارهایی که از آن مقادیر استفاده می‌کنند، منتقل می‌شود.

یک سیستم طراحی با افزایش‌های فاصله‌گذاری مشخص را تصور کنید. شما می‌توانید این‌ها را در tailwind.config.js خود تعریف کرده و سپس ابزارهایی برای margin، padding و width بر اساس آن مقادیر تولید کنید. به طور مشابه، می‌توانید پالت رنگ خود را تعریف کرده و ابزارهایی برای رنگ‌های پس‌زمینه، رنگ‌های متن و رنگ‌های حاشیه تولید کنید.

فراتر از اصول اولیه: تکنیک‌های پیشرفته

Functions API دری را به روی تکنیک‌های پیشرفته‌تری باز می‌کند، مانند:

اشتباهات رایج و نحوه اجتناب از آن‌ها

آینده تیل‌ویند CSS و Functions API

اکوسیستم تیل‌ویند CSS به طور مداوم در حال تحول است و Functions API احتمالاً نقش مهمی را در آینده ایفا خواهد کرد. با ادامه محبوبیت تیل‌ویند CSS، تقاضا برای سفارشی‌سازی و توسعه‌پذیری تنها افزایش خواهد یافت. Functions API ابزارهای لازم برای پاسخگویی به این تقاضا را فراهم می‌کند و به توسعه‌دهندگان اجازه می‌دهد راه‌حل‌های استایل‌دهی واقعاً منحصر به فرد و سفارشی ایجاد کنند.

می‌توانیم انتظار داشته باشیم که در نسخه‌های آینده تیل‌ویند CSS شاهد بهبودهای بیشتری در Functions API باشیم که آن را قدرتمندتر و انعطاف‌پذیرتر می‌کند. این می‌تواند شامل توابع جدید برای دستکاری پیکربندی تم، تولید قوانین CSS پیچیده‌تر و ادغام با ابزارها و کتابخانه‌های دیگر باشد.

نتیجه‌گیری

Functions API تیل‌ویند CSS برای توسعه‌دهندگان فرانت‌اندی که می‌خواهند مهارت‌های تیل‌ویند خود را به سطح بالاتری برسانند، یک تغییردهنده بازی است. با درک و استفاده از Functions API، می‌توانید کلاس‌های ابزاری سفارشی ایجاد کنید، تم‌های موجود را گسترش دهید، واریانت‌ها تولید کنید و سیستم‌های طراحی قدرتمندی بسازید. این به شما قدرت می‌دهد تا تیل‌ویند CSS را متناسب با نیازهای خاص پروژه خود سفارشی کرده و رابط‌های کاربری واقعاً منحصر به فرد و از نظر بصری جذاب ایجاد کنید. قدرت Functions API را در آغوش بگیرید و پتانسیل کامل تیل‌ویند CSS را آزاد کنید.

چه یک کاربر باتجربه تیل‌ویند CSS باشید و چه تازه شروع کرده‌اید، Functions API ابزاری ارزشمند است که می‌تواند به شما در ایجاد برنامه‌های وب کارآمدتر، قابل نگهداری‌تر و از نظر بصری خیره‌کننده‌تر کمک کند. پس، عمیق شوید، آزمایش کنید و امکانات بی‌پایانی را که Functions API ارائه می‌دهد، کشف کنید.