📋 محتويات الصفحة
📖 الوصف
Panda CSS هي CSS engine حديثة من Chakra UI team تجمع بين أفضل ميزات Tailwind CSS و CSS-in-JS. توفر type-safe CSS مع zero runtime و JSX support. تعمل في build time (مثل Vanilla Extract) مع syntax شبيه بـ Tailwind. Panda CSS تُولّد utility classes و JSX factory محسّنة. توفر theme system، recipes، وcv...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Applications تحتاج type-safe CSS
Design systems الحديث
Tailwind alternatives مع JS support
Projects تحتاج dynamic styles
Zero-runtime applications
✨ المميزات
أبرز مميزات هذه الأداة
Type-safe CSS (TypeScript)
Zero runtime (build time)
Tailwind-style utilities
JSX factory مدمج
Recipes وvariants (مثل cva)
Theming system
Supports React
Vue
Svelte
Solid
Fast builds
⚠️ العيوب
نقاط يجب مراعاتها
جديد نسبياً
Build setup قد يكون معقد
أقل شهرة من Tailwind
Community أصغر
Learning curve
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// panda.config.ts
import { defineConfig } from '@pandacss/dev';
export default defineConfig({
theme: {
extend: {
tokens: {
colors: {
primary: { value: '#3498db' },
secondary: { value: '#2ecc71' },
},
},
},
},
include: ['./src/**/*.{js,jsx,ts,tsx}'],
});
// Component
import { css, cx } from '../styled-system/css';
import { button } from '../styled-system/recipes';
function Example() {
return (
<div className={css({ p: '4', bg: 'white' })}>
<button className={button({ variant: 'primary' })}>
زر
</button>
<div className={cx(css({ mt: '4' }), 'custom-class')}>
محتوى
</div>
</div>
);
}
// JSX factory (Panda styled)
import { styled } from '../styled-system/jsx';
const Card = styled('div', {
base: {
padding: '16px',
borderRadius: '8px',
background: 'white',
},
variants: {
highlighted: {
true: { boxShadow: 'lg' },
},
},
});
function Example() {
return <Card highlighted>محتوى البطاقة</Card>;
}📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS Modules
⭐نهج scoped CSS (Scoped CSS Methodology)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Less
معالج CSS (CSS Preprocessor)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)