معالجة مشكل في عرض card-width باستعمال tailwind

قم بالتأكد من تضمين مكتبة TailwindCSS وإضافة الـ breakpoints الخاصة بها في ملف الـ CSS الخاص بك، باستخدام الـ breakpoints المرتبطة بعرض الشاشة، مثل sm, md, lg, و xl.

بعد ذلك، يمكنك تحديد عرض العناصر بناءً على الشاشة المعنية باستخدام الـ breakpoints في CSS الخاص بالكارد، مثل:

@media (min-width: 640px) {
  .card {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .card {
    width: 33.33%;
  }
}

ومن خلال الكود السابق، عندما يكون عرض الشاشة أكبر من 640 بكسل، سيتم تعيين عرض الكارد على 50٪، وعندما يكون أكبر من 768 بكسل، سيتم تعيين عرض الكارد على 33.33٪.

كما يمكنك استخدام الـ breakpoints المختلفة لتحديد الأحجام الأخرى التي تناسب شاشات مختلفة.

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

قم بالتأكد من تضمين مكتبة TailwindCSS

كيف يكون ذلك.

أنا قمت بالطريقة و لكن لم يتغير شيء

extend: {
      screens: {
        'xs': '480px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },

تثبيت TailwindCSS باستخدام npm عن طريق الأمر التالي:

npm install tailwindcss

بعد ذلك، إنشاء ملف tailwind.css واستيراد TailwindCSS فيه باستخدام @import كما يلي:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

ثم تكوين ملف tailwind.config.js لتحديد الـ breakpoints المطلوبة، وتمكين الخصائص الإضافية التي ترغب في استخدامها. على سبيل المثال، يمكنك استخدام الكود التالي:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
    extend: {
      colors: {
        'primary': '#1a202c',
        'secondary': '#718096',
      },
    },
  },
  variants: {},
  plugins: [],
}

بعد ذلك، يمكنك استخدام الـ breakpoints المحددة في ملفات CSS الخاصة بك، ولتفعيل TailwindCSS في مشروع React، يجب تضمين ملف tailwind.css في ملف index.js الخاص بالمشروع كما يلي:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './tailwind.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);