أسلوب جديد لتنسيق تطبيقات React: قوة Tailwind CSS و Styled Components مع Twin Macro

مقدمة: ثورة في تنسيق تطبيقات React

في عالم تطوير الويب الحديث، أصبحت سرعة التطوير ومرونة التنسيق من الركائز الأساسية لإنشاء تجارب مستخدم مميزة. تُعد مكتبة React خيارًا شائعًا لبناء واجهات المستخدم، لكن التحدي غالبًا ما يكمن في إدارة التنسيقات CSS بكفاءة. يقدم هذا المقال حلًا مبتكرًا يجمع بين قوة إطار عمل Tailwind CSS القائم على الأدوات المساعدة، ومرونة Styled Components لأسلوب CSS-in-JS، مع سحر Twin Macro لتبسيط العملية. سنتعلم كيفية بناء مكون نموذج (form component) دون كتابة سطر واحد من CSS تقليدي، مستفيدين من هذا المزيج القوي. دعونا نتعمق!

لماذا هذا الدمج القوي؟ فهم الحاجة إلى Tailwind CSS و Styled Components معًا

قد تتساءل عن جدوى استخدام كل من Tailwind CSS و Styled Components معًا، بينما يمكن لكل منهما أن يعمل بشكل مستقل. الإجابة تكمن في معالجة نقاط الضعف لكل منهما وتعزيز نقاط القوة. فئات Tailwind المساعدة، على الرغم من فعاليتها، يمكن أن تصبح طويلة ومعقدة داخل مكونات React، مما يؤثر سلبًا على سهولة القراءة والصيانة. تخيل سطرًا طويلًا من الفئات مثل className="flex flex-col h-screen justify-center items-center bg-gray-100"، قد يكون من الصعب قراءته وتعديله لاحقًا.

من ناحية أخرى، لا تواجه Styled Components مشكلة في طول الفئات، لكنها تتطلب كتابة أنماط CSS يدوياً. لماذا نكتب شيئًا توفره Tailwind بالفعل في شكل فئات مساعدة؟ هنا يأتي دور الدمج الذكي: Tailwind CSS توفر فئات مساعدة جاهزة تقلل من الحاجة لكتابة CSS من الصفر، بينما تحافظ Styled Components على نظافة المكونات وتوفر هيكلية CSS-in-JS منظمة. هذا الدمج يمنحك أفضل ما في العالمين: سرعة Tailwind وتنظيم Styled Components.

التحضير للعمل: إعداد بيئة React مع Tailwind CSS و Styled Components

للبدء، سنقوم بإنشاء نموذج بسيط كتطبيق عملي. نحتاج أولاً إلى تطبيق React جديد. افتح الطرفية (terminal) ونفّذ الأمر التالي:

npx create-react-app react-styled-tailwind

بعد إنشاء التطبيق، قم بتنظيم هيكل المجلدات الخاص بك على النحو التالي:

├── src
|   ├── App.js
|   ├── App.test.js
|   ├── assets
|   |   └── tailwind.css
|   ├── index.js
|   ├── serviceWorker.js
|   ├── setupTests.js
|   ├── tailwind.config.js
|   └── styles
|       └── index.js
├── babel.plugin.js
├── package.json
├── postcss.config.js
├── README.md
├── yarn-error.log
└── yarn.lock

سأشرح كل ملف مع تقدمنا في الشرح، ولكن في الوقت الحالي، دعنا نثبت التبعيات (dependencies) اللازمة. سنبدأ بتثبيت Tailwind CSS و Twin Macro و Autoprefixer و Babel Plugin Macros و PostCSS CLI كتبعيات تطويرية (development dependencies):

yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros postcss-cli

بعد ذلك، قم بتثبيت Styled Components كاعتمادية عادية:

yarn add styled-components

بمجرد تثبيت هذه المكتبات، يمكننا الآن الانتقال إلى تهيئة Tailwind CSS.

تهيئة Tailwind CSS: خطوات أساسية لدمج الإطار

لتهيئة Tailwind CSS، يتعين علينا إضافة ملف إعدادات يدويًا أو تشغيل الأمر التالي لإنشاء ملف جديد:

npx tailwind init src/tailwind.config.js

ملاحظة هامة: هنا، بدلاً من إنشاء ملف الإعدادات في الدليل الجذر (root directory)، يجب عليك وضعه في مجلد src. وإلا، سيتم إطلاق خطأ بواسطة Tailwind Macro. سيبدو الملف الذي تم إنشاؤه، وهو tailwind.config.js، كالتالي:

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

كما ترى، ملف الإعدادات “فارغ” لأنه لا يحتوي على أي تهيئة مخصصة. لهذا الدليل، لا نحتاج إلى تهيئة أي شيء هنا. ولكن يمكنك تخصيصه ليناسب احتياجاتك أو تشغيل الأمر مع الخيار --full للحصول على تهيئة Tailwind الكاملة.

بعد ذلك، نحتاج إلى إنشاء ملف جديد باسم postcss.config.js في الدليل الجذر. هذا الملف سيقوم بتوجيه PostCSS لمعالجة ملفات CSS الخاصة بنا:

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

تخبر هذه التهيئة ملف postcss.config.js باستخدام مكتبة Tailwind CSS وملف tailwind.config.js أثناء وقت الترجمة (compile-time). وبمساعدة autoprefixer، فإنه يتتبع الخصائص التي تحتاج إلى بادئات خاصة بالمتصفحات (vendor prefixes) لضمان التوافقية.

مع هذا الإعداد، يمكننا الآن الانتقال إلى ملف babel.plugin.js الذي يساعد على تحويل فئات Tailwind إلى كود CSS-in-JS:

babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
}

سنرى لاحقًا ما يفعله هذا الملف بالضبط. ولكن في الوقت الحالي، تذكر فقط أنه الرابط الأساسي بين Tailwind CSS و Styled Components.

تبقى ثلاث خطوات أخيرة فقط لإكمال الإعداد:

الخطوة الأولى: في ملف tailwind.css الموجود في src/assets/tailwind.css، نحتاج إلى استيراد بعض الأدوات المساعدة من مكتبة Tailwind:

src/assets/tailwind.css

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

هنا، كما ترى، لا يوجد شيء معقد، مجرد استيرادات تسمح لنا باستخدام فئات Tailwind المساعدة.

الخطوة الثانية: ربط تطبيق React الخاص بنا مع Tailwind CSS في ملف index.js:

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./assets/styles.css"
import * as serviceWorker from "./serviceWorker"

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

serviceWorker.unregister()

هنا، نقوم باستيراد assets/styles.css الذي سيحتوي على الأنماط النهائية. ولاحقًا، سنقوم بتعديل السكريبت الافتراضي قليلاً لبناء CSS وإضافته إلى ملف assets/styles.css أثناء عملية الترجمة.

الخطوة الثالثة والأخيرة: تحديث ملف package.json لإضافة أوامر بناء CSS:

package.json

"scripts": {
  "build:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
  "watch:css": "postcss src/assets/tailwind.css -o src/assets/styles.css -w",
  "start": "npm run watch:css & react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

سيقوم السكريبتان build:css و watch:css ببناء ملف CSS ومراقبة التغييرات وإعادة بنائه إذا لزم الأمر على التوالي. وكما ذكرت سابقًا، سيتم وضع الملف الناتج في مجلد assets. بهذا التغيير، يمكننا الآن استخدام Tailwind في تطبيقنا. دعنا الآن ندمجه مع Styled Components.

دمج Tailwind CSS مع Styled Components: قوة التنسيق المتداخل

سابقًا، في هيكل مجلداتنا، كان لدينا مجلد styles. حان الوقت لتعديله بالكود التالي في ملف styles/index.js:

styles/index.js

import styled from "styled-components"
import tw from "twin.macro"

const StyledForm = styled.main.attrs({
  className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
  & {
    form {
      ${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
    }
    input {
      ${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
    }
    button {
      ${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
    }
  }
`

export default StyledForm

نبدأ باستيراد tw الذي يسمح لنا باستخدام فئات Tailwind في الخصائص المتداخلة (nested properties). من المقبول تمامًا استخدام الفئات المساعدة مع السمة className، ولكن إذا كنت ترغب في تضمين خصائص متداخلة، فيجب عليك استخدام مكتبة twin.macro. ستستخدم هذه المكتبة إعدادات Babel Plugin Macros (ملف babel.plugin.js) لتحويل فئات Tailwind CSS المساعدة المستخدمة بواسطة المحددات المتداخلة إلى كود مفهوم لـ Styled Components.

يمكنك رؤية في هذا المثال أدناه كيف يتم التحويل:

// input
const test = ${tw`text-center bg-red w-full`}

// output
const test = {
  background: 'red',
  textAlign: 'center',
  width: '100%'
}

رائع! الآن بعد أن قمنا بدمج Tailwind مع Styled Components، دعنا نضيف المكون المنسق إلى ملف App.js:

App.js

import React from "react"
import StyledForm from "./styles"

function App() {
  return (
    <StyledForm>
      <form>
        <input type="text" placeholder="Full name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button>Sign In</button>
      </form>
    </StyledForm>
  )
}

export default App

هنا، قمنا ببساطة باستيراد المكون المنسق وقمنا بتغليف كل شيء به لجعل نموذجنا يبدو أنيقًا.

رائع! يمكنك بالفعل رؤية مدى قوة هذا الدمج. لقد قمنا ببناء مكون نموذج دون كتابة سطر واحد من CSS، ولا يزال المكون سهل القراءة والصيانة.

الخلاصة: قوة ومرونة التنسيق المدمج في React

قد يكون إعداد Tailwind CSS في البداية يتطلب بعض الجهد، ولكن بمجرد الانتهاء منه ودمجه مع أسلوب CSS-in-JS، يصبح أداة قوية ومرنة للغاية. يعود جزء من هذه القوة إلى قدرتنا على تخصيص ملف tailwind.config.js ليناسب احتياجاتنا، أو حتى كتابة CSS عادي كما نفعل عادةً مع Styled Components عند الحاجة. هذا المزيج يقدم حلاً فعالًا لتنسيق تطبيقات React بكفاءة عالية، مما يجعله خيارًا يستحق النظر في مشاريع React القادمة.

الخلاصة التقنية

يمثل الدمج بين Tailwind CSS و Styled Components و Twin Macro نقلة نوعية في منهجيات تنسيق تطبيقات React. فبينما يوفر Tailwind سرعة لا مثيل لها في تطبيق الأنماط من خلال فئاته المساعدة، يعالج Styled Components مشكلة تلوث الكود (code clutter) ويقدم هيكلية CSS-in-JS نظيفة وقابلة للصيانة. يأتي Twin Macro ليكون الجسر الذي يربط بين الفلسفتين، محولًا فئات Tailwind إلى كائنات CSS-in-JS ديناميكية. هذه التركيبة لا تقلل فقط من حجم الكود المكتوب، بل تعزز أيضًا من قابلية القراءة والصيانة، وتوفر مرونة كبيرة للمطورين الذين يسعون لإنشاء واجهات مستخدم جذابة وفعالة بأقل جهد ممكن في التنسيق.