آموزش کار با فریمورک tailwind css در وردپرس نسخه نهایی

مقدمه

Tailwind CSS یک فریم‌ورک CSS مبتنی بر کلاس‌های کاربردی (Utility-First) است که سرعت توسعه رابط کاربری را به شدت افزایش می‌دهد. استفاده از Tailwind در قالب‌های وردپرس به شما این امکان را می‌دهد که بدون نوشتن کدهای CSS سفارشی و طولانی، طراحی‌های مدرن، ریسپانسیو و سبک ایجاد کنید.

در این مقاله از مستندات wtheme.ir، روش‌های مختلف ادغام Tailwind CSS در قالب‌های وردپرس و نکات طلایی برای جلوگیری از تداخل آن با هسته وردپرس را بررسی می‌کنیم.

روش‌های اضافه کردن Tailwind به وردپرس

برای استفاده از Tailwind در وردپرس، سه روش اصلی وجود دارد. بسته به سطح دانش فنی و نیاز پروژه، می‌توانید یکی را انتخاب کنید.

function wtheme_enqueue_tailwind_cdn() {
    // اسکریپت Play CDN تیلویند
    wp_enqueue_script( 'tailwindcss-cdn', 'https://cdn.tailwindcss.com', array(), '3.3.0', false );
}
add_action( 'wp_enqueue_scripts', 'wtheme_enqueue_tailwind_cdn' );

function wtheme_enqueue_tailwind_compiled() {
    wp_enqueue_style( 'tailwind-css', get_template_directory_uri() . '/assets/css/tailwind.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'wtheme_enqueue_tailwind_compiled' );

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.php", // اسکن تمام فایل‌های PHP قالب
    "./src/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

⚠️ ۳ نکته حیاتی و طلایی در استفاده از Tailwind در وردپرس

استفاده از Tailwind در وردپرس چالش‌های خاص خود را دارد. در wtheme.ir برای جلوگیری از بروز باگ در قالب‌ها، رعایت ۳ نکته زیر الزامی است:

module.exports = {
  // ...
  prefix: 'tw-', // تمام کلاس‌ها با tw- شروع می‌شوند (مثل tw-flex, tw-text-white font-red-500)
}

<div class="bg-dark section-<?php echo $color; ?>-500">

<?php 
$colors = [
    'red' => 'bg-dark section-red-500',
    'blue' => 'bg-dark section-blue-500'
];
?>
<div class="<?php echo esc_attr($colors[$color]); ?>">

function wtheme_add_tailwind_to_editor() {
    add_editor_style( 'assets/css/tailwind-editor.css' );
}
add_action( 'after_setup_theme', 'wtheme_add_tailwind_to_editor' );

جمع‌بندی

استفاده از Tailwind CSS در قالب‌های وردپرس می‌تواند تجربه توسعه شما را متحول کند. با استفاده از روش Build Process و اعمال Prefix (پیشوند)، می‌توانید قالب‌هایی بسازید که هم از نظر ظاهری بی‌نظیر باشند و هم از نظر عملکردی با هسته وردپرس و افزونه‌ها کاملاً سازگار باشند.

تیم توسعه wtheme.ir در تمامی قالب‌های فروشگاهی و شرکتی خود، بهترین استانداردهای ادغام Tailwind را رعایت کرده است تا شما تجربه‌ای بی‌نقص از طراحی داشته باشید.