تم‌سازی مدرن در جوملا ۵ با Tailwind CSS — راهی سریع، سبک و انعطاف‌پذیر برای طراحی رابط‌های واکنش‌گرا

در دنیای امروز طراحی وب، Bootstrap دیگر تنها گزینه نیست. Tailwind CSS — فریم‌ورک کلاس‌محور و سبک‌وزن — انقلابی در نحوه‌ی ساخت رابط‌های کاربری ایجاد کرده است. اما آیا می‌توان از Tailwind در یک سیستم مدیریت محتوای ساختاریافته مثل جوملا ۵ استفاده کرد؟ پاسخ مثبت است — و حتی می‌توان آن را به‌گونه‌ای پیاده‌سازی کرد که برای سایت‌های فارسی‌زبان، سبک‌تر، زیباتر و انعطاف‌پذیرتر از همیشه باشد. در این مقاله، گام‌به‌گام نحوه‌ی ساخت یک تم کاملاً مدرن با Tailwind CSS در جوملا ۵ را آموزش می‌دهم.

چرا Tailwind CSS برای جوملا ۵؟

  • کاهش حجم نهایی: با PurgeCSS، فقط کلاس‌هایی که استفاده می‌کنید در فایل نهایی باقی می‌مانند (معمولاً زیر ۱۰ کیلوبایت!)
  • سرعت توسعه: نیازی به نوشتن CSS نیست — همه‌چیز با کلاس‌های از پیش‌ساخته انجام می‌شود
  • هماهنگی کامل با RTL: Tailwind از نسخه‌ی ۳ به‌صورت داخلی از RTL پشتیبانی می‌کند
  • انعطاف‌پذیری بی‌نظیر: هر پیکسل از رابط کاربری را می‌توان بدون شکستن ساختار تغییر داد

گام ۱: ساختار پایه‌ی تم جوملا با پشتیبانی از Tailwind

ابتدا ساختار استاندارد تم جوملا را ایجاد کنید:

/templates/mytemplate/
├── css/
├── js/
├── language/
├── index.php
├── templateDetails.xml
└── tailwind.config.js

گام ۲: نصب و تنظیم Tailwind CSS (بدون نیاز به Node.js در هاست!)

بسیاری فکر می‌کنند Tailwind نیاز به Node.js در سرور دارد — اما این‌طور نیست! تمام کار را در محیط توسعه انجام دهید و فقط فایل نهایی را آپلود کنید:

  1. در کامپیوتر محلی خود: 
    npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  2. فایل tailwind.config.js را تنظیم کنید: 
    module.exports = {
  content: ["./index.php", "./html/**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false, // جلوگیری از تداخل با استایل‌های جوملا
  },
}
  3. فایل ./css/tailwind.css را ایجاد کنید: 
    @tailwind base;
@tailwind components;
@tailwind utilities;
  4. فایل نهایی را بسازید: 
    npx tailwindcss -i ./css/tailwind.css -o ./css/style.css --minify
  5. فایل style.css را در پوشه‌ی /css/ تم آپلود کنید.

گام ۳: فعال‌سازی پشتیبانی RTL در Tailwind

در فایل index.php تم، جهت رابط را به‌صورت پویا تنظیم کنید:

<?php
defined('_JEXEC') or die;
$direction = JFactory::getDocument()->getDirection(); // 'rtl' یا 'ltr'
?>
<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo JFactory::getDocument()->getLanguage(); ?>">
<head>
  <?php echo $this->head; ?>
  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.css" />
</head>

سپس در tailwind.config.js، RTL را فعال کنید:

module.exports = {
  content: ["./index.php", "./html/**/*.php"],
  important: true, // اولویت بالاتر از استایل‌های جوملا
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
}

⚠️ نکته: Tailwind به‌طور خودکار کلاس‌های ltr: و rtl: را تولید می‌کند. مثلاً:

<div class="rtl:text-right ltr:text-left">متن شما</div>

گام ۴: طراحی کامپوننت‌های UI با Tailwind (بدون نیاز به CSS سفارشی)

مثال: کارت مقاله

<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
  <img src="<?php echo $item->image; ?>" alt="<?php echo $item->title; ?>" class="w-full h-48 object-cover">
  <div class="p-5">
    <h3 class="text-xl font-bold text-gray-800 mb-2"><?php echo $item->title; ?></h3>
    <p class="text-gray-600 line-clamp-2"><?php echo $item->introtext; ?></p>
    <a href="<?php echo $item->link; ?>" class="mt-3 inline-block text-blue-600 hover:text-blue-800 font-medium">
      ادامه مطلب →
    </a>
  </div>
</div>

مثال: نوار منو واکنش‌گرا

<nav class="bg-gray-800 text-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="/" class="text-xl font-semibold">سایت من</a>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4 rtl:space-x-reverse">
          <a href="/about" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700">درباره ما</a>
        </div>
      </div>
    </div>
  </div>
</nav>

گام ۵: بهینه‌سازی نهایی با PurgeCSS (حذف کدهای اضافی)

بدون این مرحله، فایل CSS شما چند مگابایت خواهد بود! اما Tailwind به‌صورت داخلی این کار را انجام می‌دهد — فقط مطمئن شوید که در content تمام فایل‌هایی که از کلاس‌ها استفاده می‌کنند را لیست کرده‌اید:

content: [
  "./index.php",
  "./html/**/*.php",
  "./language/**/*.ini"
]

پس از ساخت، حجم فایل style.css معمولاً بین **۵ تا ۱۵ کیلوبایت** است — حتی برای تم‌های پیچیده!

گام ۶: جلوگیری از تداخل با استایل‌های داخلی جوملا

جوملا استایل‌هایی برای فرم‌ها، جدول‌ها و مدال‌ها اعمال می‌کند. برای جلوگیری از تداخل:

  • در tailwind.config.js، corePlugins.preflight = false را تنظیم کنید (همان‌طور که بالاتر گفته شد)
  • در فایل index.php، استایل‌های جوملا را بعد از Tailwind لود کنید: 
    <?php echo $this->head; ?>
<link rel="stylesheet" href=".../style.css" />
  • برای فرم‌های ادمین، از کلاس‌های Tailwind استفاده نکنید — فقط در فرانت‌اند به‌کار ببرید

تجربه‌ی شخصی: ساخت تم «نسترن» برای یک سایت آموزش خوشنویسی

در یکی از پروژه‌های اخیر، تمی با الهام از گل نسترن طراحی کردم که تمام رابط آن با Tailwind ساخته شده بود. حجم نهایی CSS فقط **۸.۲ کیلوبایت** بود و بار اولیه‌ی سایت در Google PageSpeed امتیاز **۹۸** گرفت. همچنین، تغییر رنگ‌ها یا چینش عناصر — که قبلاً چند ساعت طول می‌کشید — حالا در کمتر از ۵ دقیقه انجام می‌شد.

جمع‌بندی

Tailwind CSS و جوملا ۵، ترکیبی عالی هستند — به‌شرطی که به‌درستی پیاده‌سازی شوند. با این روش، شما دیگر وابسته به تم‌های غربی یا فریم‌ورک‌های سنگین نیستید. بلکه تمی می‌سازید که:

  • سبک‌وزن و سریع است
  • کاملاً با فارسی و RTL سازگار است
  • بدون نیاز به دانش CSS پیشرفته، قابل توسعه است
  • با هویت بصری شما هماهنگ می‌شود

چرا که در دنیای طراحی وب، آزادی یعنی کنترل — و Tailwind، کنترل را به دست شما می‌دهد.

نوشته‌شده توسط روح‌الله بلوردی — طراح وب، خوشنویس و طراح رابط‌های هوشمند
وب‌سایت شخصی: balvardi.ir

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *