مسئله مقادیر دلخواه پویا حل شد

من می خواهم یک راه حل هیجان انگیز را با شما به اشتراک بگذارم. راه حل در مورد حل مقدار کلاس پویا است که به طور معمول Tailwindcs با آنها کار نمی کند.

اگر تازه وارد Tailwindcss هستید ، می توانید در اینجا یاد بگیرید که چگونه می توانید Tailwindcss را در پروژه خود ادغام کنید

من از این مقاله که توسط Ryan Partridge نوشته شده است الهام گرفته ام ، از او تشکر ویژه ای

در مقاله فوق ، رایان راه حل را با نام کلاس Tailwindcss ارائه می دهد ، اما در این مقاله ، من این راه حل را گسترش می دهم و مشکل را با مقادیر پویا با استفاده از tailwind حل می کنم مقادیر دلخواهبشر

مقادیر دلخواه در tailwindcs در v2.1 معرفی می شوند. این ویژگی قدرتمند جدید به دلیل کامپایلر JIT امکان پذیر می شود.

مشکل واقعی چیست؟

در حالی که من در حال کار بر روی یک پروژه React هستم ، برای یک ظاهر طراحی شده از کتابخانه طراحی Tailwindcss و Shadcn استفاده می کنم.

در حین ساختن کارتهای آمار داشبورد ، می بینم که هر کارت رنگ متفاوتی دارد. این کارت همچنین شامل یک نماد با رنگ پس زمینه آن در سایه تیره تر است.

بنابراین راه حل سریع که فهمیدم این است که یک مقدار شش ضلعی رنگی را در tailwindcss اضافه کنید bg-[#D45113] کلاس. اما ، در اینجا مشکل است … Tailwind مقادیر اضافه شده به صورت پویا اجازه نمی دهد ، زیرا همانطور که می دانیم کامپایلر JIT به صورت تقاضا اجرا می شود مقادیر تعریف شده ای را می پذیردبشر

این جایی است که من کاملاً گیر کرده ام ، زیرا مقادیر رنگی در واقع به خواص CSS تبدیل نمی شود و از این رو ، هیچ چیز در یک مرورگر نقاشی نمی شود.

بگذارید این را با یک کد مثال توضیح دهم. تصور کنید که داده های شما چیزی شبیه به این است:

    const statsData = [
        {
            stats: 4585,
            color: "#48CF7357",
            iconBg: "#49D074",
            icon: "icon here..."
        }, {
            stats: 95,
            color: "#F5A45957",
            iconBg: "#FDAF67",
            icon: "icon here..."
        }, {
            stats: 1022,
            color: "#B486EE57",
            iconBg: "#B688EF",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#413F5A57",
            iconBg: "#4E4B65",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#4E4B65",
            iconBg: "#7569FC",
            icon: "icon here..."
        }, {
            stats: 105,
            color: "#F6323A57",
            iconBg: "#FE474F",
            icon: "icon here..."
        }
    ];

هر شیء در آرایه متفاوت است color وت iconBg رنگ ها در قالب شش ضلعی.

حالا ، نگاهی به ما بیندازید مؤلفه کارت که این مقادیر رنگی را در حالی که از طریق این داده ها حلقه می کند ، می گیرد.

    export default function DashCard({
        icon,
        iconClass,
        cardClass
    }) {
        return (
            <Card className={`${cardClass}`}>
                <CardContent>
                    <div 
                        className={`${iconClass}`}
                    >{icon}div>
                CardContent>
            Card>
        )
    }

مؤلفه کارت ما ساده است ، کلاس هایی را به عنوان غرفه های والدین می گیرد و با استفاده از کلاس های tailwindcss سبک را اعمال می کند.

اکنون ، به مؤلفه والدین ما نگاهی بیندازید:

    function DashboardCardWrapper() {

       return (
         <section className="grid grid-cols-3 gap-4">
              {
                  statsData && statsData?.map((item, idx) =>
                      <DashCard
                          key={idx}
                          icon={item.icon}
                          iconClass={`text-white bg-[${item.iconBg}]}
                          cardClass={`bg-[`${item.color}] border-[`${item.color}`]}                
                      />
                  )
              }
          
       )
    }

در مؤلفه والدین ما ، stateData با استفاده از map() روش آرایه برای استفاده از حلقه در ما DashCard مؤلفه

شاید متوجه شده باشید که من مقادیر رنگ پویا را اختصاص می دهم bg-[${item.iconBg}] با استفاده از سبک ارزش های دلخواه.

اما ، متأسفانه… رنگ ها برای مؤلفه کارت ما صدق نمی کنند.

چگونه مقادیر پویا را در مقادیر دلخواه در tailwindcss اعمال کنیم؟

برای درک این راه حل ، ما باید درک کنیم که چگونه کامپایلر JIT (فقط به موقع) کلاس های tailwindcss را تولید می کند؟

کامپایلر JIT Tailwind به دنبال این است نام کلاس استاتیک در کد برای تولید CSS مرتبط برای ما.

کد مثال زیر را مشاهده کنید:

    <div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}>div>

مثال فوق دوباره کار نمی کند ، زیرا ، کامپایلر فقط به موقع (JIT) برای تولید سبک های CSS مبتنی بر ابزار در صورت تقاضا ، در زمان توسعه یا در زمان ساخت طراحی شده است.

مانند مثال بالا ، JavaScript Express نمی تواند گردآوری شود ، زیرا در زمان اجرا ناشناخته و پردازش شده استبشر

به این مثال نگاهی بیندازید ، که برای ما خوب است:

    <div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }>div>

این امر به این دلیل است که نام کلاس به کامپایلر JIT شناخته شده است و نام کلاس به صورت آماری ارائه می شود.

بنابراین ، در مورد ما ، برای کار کردن و استفاده از این مقادیر رنگی شش ضلعی. لازم است که Tailwindcs باید این مقادیر را به صورت تقاضا بشناسد تا به صورت آماری ارائه شود.

بنابراین ، راه حلی که در مقاله فوق پیدا کردم استفاده از safelist گزینه tailwind.config.js پرونده

چیست safelist در Tailwind CSS؟

Tailwind CSS از a استفاده می کند Just-in-Time (JIT) کامپایلر که فقط کلاسهای CSS را که در پرونده های HTML ، JS یا Temple خود استفاده می کنید ، تولید می کند. این باعث می شود بسته نرم افزاری نهایی CSS شما باشد بسیار کوچکتر و سریعتر

با این حال ، گاهی اوقات از نام کلاس استفاده می کنید پویامثل bg-${color} یا text-${variant}و کامپایلر نمی تواند دیدن کسانی که در کد شما هستند بنابراین آنها را در CSS نهایی قرار نمی دهد. اینجاست safelist گزینه وارد می شود!

گزینه Safelist به Tailwindcss می گوید که همیشه این کلاس ها را در بسته نرم افزاری نهایی CSS قرار دهید ، حتی اگر آنها را در کد منبع مشاهده نکنید.

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

    const colours = ["#48CF7357",  "#49D074",  "#F5A45957"];
    const safeColours = colours.flatMap((color) => [  `bg-[${color}]`,  `border-[${color}]`,  `text-[${color}]`]);


    module.exports = {
      content: ["./src/**/*.{html,js}"],
      safelist: [...safeColours],     // provide generated classes here
      theme: {
        extend: {},
      },
      plugins: [],
    }

حال اگر دوباره کد را اجرا کنید ، رنگهای اعمال شده بر روی کارتها را مشاهده می کنید و کد ما همانطور که می خواهیم کاملاً کار می کند.

اشکال در استفاده از Safelist Soo بسیار چیست؟

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

1) اندازه بسته نرم افزاری را افزایش دهید

همانطور که قبلاً گفتم ، کامپایلر JIT خواص استاتیک استفاده شده را در یک بسته نرم افزاری نهایی CSS ایجاد می کند ، که باعث می شود اندازه بسته نرم افزاری بسیار کوچک و برای اهداف بهینه سازی مناسب باشد.

گزینه Safelist همیشه شامل کلاس های استاتیک شما است ، خواه از آنها در یک پروژه استفاده شود یا نه ، صرفه جویی در کلاس های بسیار زیاد در یک SAFELIST ممکن است اندازه بسته نهایی CSS پروژه شما را افزایش دهد.

2) مدیریت دستی

شما باید به صورت دستی پیگیری کنید از چه چیزی به Safelist. اگر فراموش نکنید که یک کلاس اضافه کنید ، حتی اگر کد شما در تلاش است از آن به صورت پویا استفاده کند ، نشان داده نمی شود. این ممکن است ناشی از اشکالات ناشناخته در کد ما باشد.

3) مقیاس سخت تر

با رشد برنامه ، ممکن است Safelist نیز رشد کند و این یک بار نگهداری می شود.

پیچیدن

در safelist ویژگی در Tailwind CSS برای شامل کلاس هایی که به صورت پویا تولید می شوند مفید است و ممکن است در زمان ساخت تشخیص داده نشود. برای سناریوهایی مانند تعویض تم یا یک ظاهر طراحی شده از محتوای CMS بسیار عالی است ، اما در صورت استفاده بیش از حد ، می تواند اندازه بسته نرم افزاری CSS شما را افزایش داده و بر عملکرد تأثیر بگذارد. از آنجا که به تنظیم دستی نیاز دارد ، برخی از تعمیر و نگهداری را نیز اضافه می کند. SafeList با استفاده از عاقلانه ، به تعادل انعطاف پذیری با عملکرد در پروژه های پویا پیچک کمک می کند.

این وبلاگ در ابتدا در برنامه نویسی ارسال شده است. با پیوستن به خبرنامه ما برای توسعه وب و مقالات طراحی وب ، وب را درک و یاد بگیرید