باستخدام أحكام القالب لتعديل الفئة الديناميكية في tailwindcss

عند محاولة تغيير الفصول ديناميكيًا باستخدام الكود التالي:

className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "

قد تواجه مشكلة. الطريقة الصحيحة لتحقيق ذلك باستخدام القالب الحرفي هي:

className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}

"-translate-x-full") "تحويل z-400 h-screen w-1/4 bg-blue-300 '}

'Red': 'Green'}-600`}

className={'absolute inset-0 '   (click ? 'translate-x-0' : '-translate-x-full')   ' transform z-400 h-screen w-1/4 bg-blue-300'}

"Text-Red-600": "Text-Green-600 '}`}

className={`text-${error ? 'red' : 'green'}-600`}

سيحافظ Tailwind على أسماء الفصول الكاملة في الإنتاج.

الموارد:

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={`${error ? 'text-red-600' : 'text-green-600'}`}

الأسماء؟] (https://stackoverflow.com/questions/24217807/how-to-dynamally-add-a-class-to-danual-class-names)

[الطريقة الصحيحة للتعامل مع التصميم الشرطي في React] (https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)

[تضمين تعبيرات في JSX] (https://reactjs.org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)

MDN] (https://developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals) CSS] (https://tailwindcss.com/docs/optimizing-for-production#writing-purgable-html)