התקנת Tailwind CSS בתבניות וורדפרס (ובכלל)

בפוסט זה נראה כיצד להתקין ולהגדיר את Tailwind CSS בתבניות וורדפרס. התהליך פשוט ואיני חושב שיש מדריך פשוט וקצר בעברית המתאר את התהליך ולכן החלטתי לכתוב על כך. לפני שנגיע לחלק הפרקטי, הנה מספר מילים על מה זה Tailwind CSS…

מה זה Tailwind CSS?

Tailwind היא CSS framework המייעלת פיתוח web בכך שהיא מספקת סט של קלאסים מוכנים מראש. גישה זו מאפשרת עיצוב מהיר של אלמנטים ללא הצורך בכתיבת CSS ומספקת קונסיסטנטיות וסקלביליות.

השימוש ב Tailwind מזרז את זמן הפיתוח משמעותית ברגע שמתרגלים לעבוד איתה ואף עוזרת לביצועי האתר מכיוון והקומפילציה מייצרת אך ורק את שורות ה CSS הנחוצות לאתר שלכם בהתאם לקלאסים שנמצאים בשימוש.

Tailwind מסיטה את הפוקוס מהשימוש המסורתי בקומפוננטות CSS לשימוש בקלאסים פונקציונלים ומאפשרת יצירת ממשקים רספונסיבים (או אתרים לצורך העניין) במאמץ מינימלי.

בפועל, Tailwind סורקת ומחפשת את אותם קלאסים בכל קבצי ה HTML, ה JavaScript ו ה PHP באתר, ומייצרת (בהתאמה) את ה styles (קובץ העיצוב) כקובץ CSS סטטי.

התקנה והגדרת Tailwind CSS בתבניות וורדפרס

בואו נראה כיצד להתקין ולהגדיר את Tailwind CSS בתבנית שלכם…

אם אתם משתמשים בתבנית כלשהי משלכם אתם יכולים לדלג היישר לשלב השני של המדריך.

שלב ראשון – צרו תבנית חדשה (אופציונלי)

גשו ל underscores.me והורידו את התבנית. לאחר ההורדה, התקינו זו באתר וורדפרס כלשהו בשרת מקומי. לאחר מכן פתחו את התבנית בעורך הקוד המועדף עליכם.

שלב שני – התקינו את Tailwind CSS בתבנית הוורדפרס

כעת נתקין את Tailwind CSS בתבנית. פתחו טרמינל (terminal), גשו לספרייה הראשית של תבנית הוורדפרס שלכם והריצו את הפקודות הבאות:

npm install -D tailwindcss
npx tailwindcss init

בסופו של התהליך תגלו כי נוצר קובץ חדש בתיקיית התבנית בשם tailwind.config.js. עלינו לערוך קובץ זה ולהכניס את הנתיב לקבצים שיכילו את הקלאסים של Tailwind בתבנית. נתיבים אלו כמובן תלויים במבנה התבנית שלכם, אך נציג שתי דוגמאות ושיסבירו כיצד זה עובד.

שימו לב לא לעשות טעויות! זה החלק בו מרבית האנשים טועים ותוהים מדוע דברים לא עובדים.

אם אנו מעוניינים להשתמש בקלאסים של Tailwind בקובץ header.php למשל, ובהנחה וקובץ זה נמצא בתיקייה הראשית של התבנית, אז עלינו להכניס בקובץ זה את הקוד הבא:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./header.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

דוגמה מציאותית יותר תהיה לכלול מספר רב של קבצים ברמת תיקיות. נאמר ומבנה התבנית שלנו הוא בסגנון הבא:

theme_root
│   404.php
│   archive.php
|   comments.php
|   etc...
|    
└───template-parts
│   │   content-none.php
│   │   content-page.php
|   |   etc...

במקרה זה נשתמש ב wildcards בכדי להבטיח שכל הקבצים מכוסים כך ששימוש בקלאסים המדוברים בקבצים אלו יוביל לתוצאה הרצויה. כך זה נראה:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./template-parts/*.{php,html,js}","./*.{php,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

רק הקבצים שאנו מגדירים בקובץ ההגדרות של Tailwind ייסרקו וישפיעו על קובץ העיצוב שיווצר. בדוגמה מעלה, כל קבצי ה CSS, קבצי ה JS, וקבצי ה PHP בתיקייה הראשית של התבנית ובתיקיית template-parts ייסרקו.

שלב שלישי – צרו את קובץ העיצוב

צרו תיקייה חדשה בשם src בתיקייה הראשית של התבנית. כעת צרו קובץ בשם input.css בתיקייה זה והכניסו לקובץ זה את הקוד הבא:

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

חזרו לטרמינל והריצו את הפקודה הבאה:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

פקודה זו תיצור תיקייה חדשה בשם dist ובתוכה קובץ CSS חדש בשם output.css.

כעת עלינו לטעון קובץ זה בתבנית הוורדפרס שלנו. בכדי לעשות זאת גשו לקובץ functions.php בתיקיית התבנית והכניסו את הקוד הבא:

function sv_theme_scripts() {
	wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() );
}
add_action( 'wp_enqueue_scripts', 'sv_theme_scripts' );

לחצו על הקישור למידע נוסף על הוספת קבצי CSS ו JavaScript באתרי וורדפרס.

התחילו לעבוד עם Tailwind

סיימנו עם ההגדרות וניתן בשלב זה להתחיל להשתמש בקלאסים ש Tailwind מספקת. אם תסתכלו באתר כרגע לא תראו שום דבר שונה מכיוון ולא הוספתם קלאס כלשהו של Tailwind בקבצי התבנית. גשו לאלמנט כלשהו ותנו לט את הקלאס bg-blue-400.

שימו לב! עליכם לוודא שהפקודה הבאה עדיין רצה בטרמינל:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

אם עשיתם הכל כראוי תגלו שהרקע של האלמנט שבחרתם נהיה כחול. מגניב לא?

הנה שתי דוגמאות נוספות:

דוגמה א׳ – Responsive Card Layout with Tailwind CSS

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 1</h2>
            <p class="text-gray-700">This is a card with some text content. It is styled using Tailwind CSS.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 2</h2>
            <p class="text-gray-700">This is another card with some text content. Tailwind CSS makes it easy to style.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 3</h2>
            <p class="text-gray-700">Yet another card with some text content. This card layout is responsive.</p>
        </div>
    </div>
</div>

דוגמה ב׳ – Centered Hero Section with Tailwind CSS

<div class="bg-blue-500 text-white py-20">
    <div class="container mx-auto text-center">
        <h1 class="text-4xl font-bold mb-4">Welcome to Tailwind CSS</h1>
        <p class="text-lg mb-8">Tailwind CSS is a utility-first CSS framework for rapid UI development.</p>
        <a href="#" class="bg-white text-blue-500 font-semibold py-2 px-4 rounded">Get Started</a>
    </div>
</div>

בשלב זה אתם מוכנים להתחיל ליצור אתרי וורדפרס מגניבים בעזרת Tailwind CSS. הנה אתר שאני מנהל המשתמש ב Framework זה לצורך העניין. כתמיד, אם יש שאלות אתם מוזמנים לשאול בתגובות הפוסט…