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

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

מה זה Tailwind CSS?

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

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

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

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

דרישות מקדימות

לפני שמתחילים, ודאו שאתם עומדים בדרישות הבאות:

• עורך קוד: השתמשו בעורך קוד כמו VS Code לעריכת קבצי התבנית וקבצי הקונפיגורציה.
• ידע בסיסי בשורת הפקודה: היכרות עם הפעלת פקודות דרך הטרמינל.

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

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

שלב 1 – התקנת Node.js

להפעלת Tailwind CSS נדרש להתקין את Node.js שכן הוא מתבסס עליו לצורך עיבוד קבצי ה-CSS באתר שלכם.

אם Node.js כבר מותקן במערכת שלכם, ניתן לדלג על שלב זה ולהמשיך לשלב הבא. בדוק את ההתקנה שלך על ידי הרצת הפקודות node -v ו-npm -v במסוף.

עבור macOS ו Linux:

1. התקינו את Node Version Manager (nvm) על ידי הרצת הפקודה הבאה ב Terminal:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

2. הפעל מחדש את ה Terminal או הריצו:

   source ~/.nvm/nvm.sh

3. התקינו את Node.js בגרסת LTS (Long Term Support) באמצעות nvm:

   nvm install --lts

4. וודא שההתקנה בוצעה כראוי:

   node -v
   npm -v

   פקודות אלו יציגו לכם את גרסאות ה Node.js ו-npm שמותקנות.

עבור Windows:

1. הורידו את גרסת ה-LTS של Node.js מאתר האתר הרשמי של Node.js.
2. הריצו את ה Installer ופעל לפי ההנחיות.
3. לאחר ההתקנה, פתחו את Command Prompt ובדקו את ההתקנה:

   node -v
   npm -v

   זהפקודות אלויציג את הגרסאות של Node.js ו-npm שהותקנו.

פתרון תקלות:

• אם נתקלתם בבעיות במהלך התקנת Node.js, בדקו את המשתנה PATH של המערכת כדי לוודא שהוא כולל את התיקיה שבה נמצאים קבצי Node.js.
• עבור משתמשי macOS/Linux, אם הפקודה nvm אינה מזוהה, ודא שהיא נטענת בקובץ התצורה של המסוף שלך (~/.bashrc או ~/.zshrc).

לאחר התקנת Node.js ו-npm, המשיכו לשלב הבא להתקנת Tailwind CSS והגדרת הסביבה.

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

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

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

שלב 3 – התקינו את 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 ייסרקו.

פתרון בעיות נפוצות

• שגיאה: הפקודה Tailwind CSS לא נמצאה: ודאו ש-Node.js ו-npm מותקנים כהלכה על ידי הרצת הפקודות node -v ו-npm -v.
• הסגנונות אינם מתעדכנים: ודאו שהפקודה npx tailwindcss --watch פועלת בזמן ביצוע שינויים.
• נתיבי קבצי התבנית לא עובדים: בדקו שוב שהנתיבים ב-tailwind.config.js תואמים למבנה התבנית שלכם.

שלב 4 – צרו את קובץ העיצוב (CSS File)

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

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

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

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

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

שלב 5 – שילוב ה-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 זה לצורך העניין. כתמיד, אם יש שאלות אתם מוזמנים לשאול בתגובות הפוסט…