مقدمة

Tailwind CSS هو إطار عمل CSS ذو فائدة أولية شائع يوفر فئات فائدة منخفضة المستوى لتطبيق الأنماط مباشرة في الترميز، مما يؤدي إلى دورات تطوير أسرع.

من ناحية أخرى، يعد Prettier منسق تعليمات برمجية واسع الاستخدام يضمن تنسيق التعليمات البرمجية الخاصة بك بشكل متسق عن طريق تحليلها وإعادة طباعتها بقواعدها الخاصة. يساعد هذا في الحفاظ على نمط تعليمات برمجية موحد عبر المشروع بأكمله، مما يجعل قاعدة التعليمات البرمجية أكثر وضوحًا وأسهل في القراءة.

أحد التحديات الشائعة عند استخدام Tailwind CSS هو إدارة ترتيب فئات الأدوات المساعدة، خاصة مع تزايد تعقيد أنماطك وHTML. يمكن أن يكون فرز هذه الفئات يدويًا أمرًا مملاً وعرضة للخطأ. هذا هو المكان الذي يأتي فيه الفرز التلقائي للفئات. من خلال الاستفادة من أدوات مثل Prettier جنبًا إلى جنب مع المكونات الإضافية مثل prettier-plugin-tailwindcss، يمكننا أتمتة فرز فئات Tailwind CSS، مما يضمن ترتيبًا متسقًا وتحسين إمكانية القراءة وقابلية الصيانة للفئات.

الغرض من هذه المقالة هو إرشادك خلال عملية إعداد الفرز التلقائي للفئات Tailwind CSS باستخدام Prettier في كل من المشاريع الجديدة والحالية. سواء كنت تبدأ مشروعًا جديدًا أو تندمج في مشروع مستمر، فإن هذا الدليل الشامل سيزودك بتعليمات خطوة بخطوة.

جدول المحتويات

• إعداد Tailwind CSS وPrettier في مشروع جديد
  • تهيئة المشروع وتثبيت Tailwind CSS
  • تثبيت وتكوين أجمل
• إعداد prettier-plugin-tailwindcss في مشروع Tailwind CSS الحالي
• خاتمة

إعداد Tailwind CSS وPrettier في مشروع جديد

قبل أن نبدأ، تأكد من تثبيت ما يلي:

• Node.js
• مدير الحزم (سنستخدم الكعكة لهذا المشروع، ولكن يمكنك استخدام npm أو الغزل أو pnpm إذا كنت تفضل ذلك)
• محرر التعليمات البرمجية (على سبيل المثال، VS Code)

تهيئة المشروع وتثبيت Tailwind CSS

ابدأ بإنشاء مشروع جديد. قد تختلف الخطوات المحددة وفقًا لإطار العمل أو الإعداد المفضل لديك. راجع دليل إطار عمل تثبيت Tailwind CSS للحصول على تعليمات تفصيلية. إذا كنت قد أكملت بالفعل خطوات تثبيت Tailwind CSS، فيمكنك المتابعة إلى إعداد prettier-plugin-tailwindcss في قسم مشروع Tailwind CSS الحالي. إليك كيفية القيام بذلك باستخدام Vite:

bun create vite my-app --template react-ts
cd my-app
bun install

الآن لنقم بتثبيت وتكوين Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

من المفترض أن تشاهد ملف تكوين Tailwind CSS: tailwind.config.js، انسخ المحتويات التالية فيه.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

أضف توجيهات Tailwind التالية إلى أعلى ملف CSS الخاص بك (على سبيل المثال، src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

تثبيت وتكوين أجمل

bun install -D prettier prettier-plugin-tailwindcss

قم بإنشاء ملف تكوين أجمل في جذر مشروعك وأضف البرنامج المساعد prettier-plugin-tailwindcss إلى ملف التكوين، سنستخدم .prettierrc، يمكنك التحقق من أنواع ملفات التكوين الأكثر جمالًا والمقبولة هنا هنا

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

الآن لنختبر الإعداد، ونعدل ملف src/App.tsx ونحفظه.

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

نتيجة:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

إعداد prettier-plugin-tailwindcss في مشروع Tailwind CSS الحالي

إذا كان مشروعك يحتوي بالفعل على إعداد Prettier، فإن دمج المكون الإضافي prettier-plugin-tailwindcss يعد أمرًا سهلاً. ستحتاج فقط إلى تثبيت البرنامج المساعد وتهيئته. إذا لم يتم تثبيت Prettier بعد، فستحتاج إلى إعداده جنبًا إلى جنب مع المكون الإضافي.

بالنسبة للمشاريع ذات الإعداد الأفضل الموجود، قم بتشغيل:

bun add -D prettier-plugin-tailwindcss

بالنسبة للمشاريع التي لا تحتوي على إعداد أجمل موجود، قم بتشغيل:

bun add -D prettier prettier-plugin-tailwindcss

أضف المكون الإضافي إلى تكوين Prettier الموجود لديك. إذا لم يكن هناك تكوين Prettier موجود، فقم بإنشاء ملف .prettierrc في جذر مشروعك. ثم أضف ما يلي:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

تأكد من أن Prettier يعمل بشكل صحيح عن طريق إجراء تغييرات على ملف يحتوي على فئات Tailwind CSS. احفظ الملف وتحقق من فرز فئات Tailwind CSS تلقائيًا.

خاتمة

يؤدي دمج prettier-plugin-tailwindcss في كل من مشاريع Tailwind CSS الجديدة والحالية إلى تحسين سير عمل التطوير لديك من خلال ضمان فرز متسق ومنظم للفصل الدراسي. بالنسبة للمشاريع الجديدة، يمكنك إعداد Prettier والمكون الإضافي في وقت واحد لتبسيط التكوين الأولي الخاص بك. بالنسبة للمشاريع الحالية، ما عليك سوى إضافة البرنامج الإضافي إلى إعداد Prettier الموجود لديك أو تثبيت كل من Prettier والمكون الإضافي إذا لم يتم تكوين Prettier بعد.

للحصول على خيارات تكوين إضافية مثل فرز الفئات في السمات غير القياسية، قم بزيارة وثائق prettier-plugin-tailwindcss.