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

Tailwind CSS v4 הוא שכתוב מאפס של ה-framework עם תהליך התקנה חדש לחלוטין. אם השתמשתם ב-Tailwind v3 בתבנית וורדפרס בעבר, תשכחו את כל מה שידעתם על tailwind.config.js ועל הדירקטיבות @tailwind – גרסה 4 מחליפה את כל זה.

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

מה השתנה ב-Tailwind CSS v4

הנה מה שהשתנה בין v3 ל-v4 שמשפיע על תהליך ההגדרה:

• אין יותר tailwind.config.js – הקונפיגורציה מתבצעת כעת ב-CSS באמצעות @theme במקום קובץ JavaScript.
• אין יותר דירקטיבות @tailwind – במקום שלוש דירקטיבות נפרדות, כותבים שורה אחת בלבד: @import "tailwindcss";.
• זיהוי תוכן אוטומטי – Tailwind v4 מוצא את קבצי התבנית שלכם באופן אוטומטי. אין צורך להגדיר נתיבי תוכן.
• חבילת CLI חדשה – ה-CLI עבר מ-tailwindcss ל-@tailwindcss/cli.
• אין npx tailwindcss init – אין שלב אתחול כי אין קובץ קונפיגורציה לייצר.

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

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

• Node.js (גרסה 20 ומעלה): Tailwind CSS v4 דורש Node.js 20+. בדקו את הגרסה שלכם על ידי הרצת node -v בטרמינל. אם אתם צריכים להתקין או לעדכן, הורידו מ-האתר הרשמי של Node.js או הריצו nvm install --lts אם nvm מותקן אצלכם.
• עורך קוד: VS Code או כל עורך שנוח לכם לעריכת קבצי התבנית.
• תבנית וורדפרס: תבנית מותאמת קיימת או תבנית התחלתית. כל תבנית שיש לכם גישת קבצים אליה תתאים.

נתקלתי בזה במק שעדיין היה עליו Node 18 מ-Homebrew. אם node -v מראה משהו מתחת ל-20, הדרך המהירה ביותר היא nvm install 20 && nvm use 20.

שלב 1 – התקנת Tailwind CSS v4

פתחו את הטרמינל, נווטו לתיקייה הראשית של תבנית הוורדפרס שלכם, והריצו:

npm install tailwindcss @tailwindcss/cli

שתי חבילות: הספרייה הראשית וה-CLI שמריץ את ה-build. זה הכל. אין init, אין קובץ קונפיגורציה.

לאחר סיום ההתקנה, תראו תיקיית node_modules וקובץ package.json בתיקיית התבנית שלכם.

שלב 2 – יצירת קובץ ה-CSS

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

@import "tailwindcss";

שורה אחת זו מחליפה את שלוש דירקטיבות ה-@tailwind שגרסה 3 דרשה (@tailwind base, @tailwind components, @tailwind utilities). Tailwind v4 מטפל בכל זה עם import אחד.

שלב 3 – הפעלת תהליך ה-Build

הריצו את הפקודה הבאה מהתיקייה הראשית של התבנית:

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

פקודה זו אומרת ל-Tailwind לקרוא את src/input.css, לסרוק את קבצי התבנית שלכם בחיפוש אחר קלאסים, ולייצא את ה-CSS המקומפל ל-dist/output.css. הדגל --watch שומר את התהליך רץ כך שהוא מקמפל מחדש באופן אוטומטי בכל פעם שמבצעים שינויים.

מה לגבי נתיבי תוכן?

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

אם אתם צריכים לכלול מקור ש-Tailwind לא מזהה אוטומטית, הוסיפו אותו עם הדירקטיבה @source בקובץ ה-CSS שלכם:

@import "tailwindcss";

@source "../plugins/my-plugin/templates";

שלב 4 – טעינת ה-CSS בוורדפרס

כעת טענו את קובץ ה-CSS המקומפל בתבנית. פתחו את קובץ functions.php של התבנית והוסיפו:

function theme_tailwind_styles() {
    wp_enqueue_style(
        'tailwind',
        get_template_directory_uri() . '/dist/output.css',
        array(),
        filemtime( get_template_directory() . '/dist/output.css' )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_tailwind_styles' );

השימוש ב-filemtime() כפרמטר הגרסה מוודא שה-cache של הדפדפן מתעדכן בכל פעם שקובץ ה-CSS משתנה. כך לא תצטרכו לנקות cache ידנית במהלך הפיתוח.

אם אתם לא מכירים את התבנית הזו, יש מדריך מפורט על הוספת קבצי CSS ו-JavaScript באתרי וורדפרס.

שלב 5 – התחילו להשתמש ב-Tailwind

פתחו קובץ תבנית כלשהו (למשל header.php, index.php, או template part) והוסיפו קלאס של Tailwind לבדיקה. לדוגמה:

<div class="bg-blue-500 text-white p-8 text-center">
    <h1 class="text-3xl font-bold">Tailwind v4 is working!</h1>
</div>

ודאו שתהליך ה---watch עדיין רץ בטרמינל, ואז רפרשו את הדף. אתם אמורים לראות קופסה כחולה עם טקסט לבן.

דוגמה: Grid כרטיסים רספונסיבי

הנה דוגמה מציאותית יותר – grid כרטיסים רספונסיבי שנערם במובייל ומציג שלוש עמודות במסכים בינוניים:

<div class="mx-auto max-w-5xl p-6">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
        <div class="rounded-lg bg-white p-6 shadow-lg">
            <h2 class="mb-2 text-xl font-bold">Card One</h2>
            <p class="text-gray-600">Content for the first card goes here.</p>
        </div>
        <div class="rounded-lg bg-white p-6 shadow-lg">
            <h2 class="mb-2 text-xl font-bold">Card Two</h2>
            <p class="text-gray-600">Content for the second card goes here.</p>
        </div>
        <div class="rounded-lg bg-white p-6 shadow-lg">
            <h2 class="mb-2 text-xl font-bold">Card Three</h2>
            <p class="text-gray-600">Content for the third card goes here.</p>
        </div>
    </div>
</div>

התאמה אישית של התבנית עם CSS

ב-v3, התאמתם צבעים, פונטים ומרווחים ב-tailwind.config.js. ב-v4, עושים את זה ישירות בקובץ ה-CSS באמצעות הדירקטיבה @theme:

@import "tailwindcss";

@theme {
    --color-brand: #a3316f;
    --color-brand-dark: #8a2a5e;
    --font-heading: "Inter", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
}

לאחר הוספת הערכים, תוכלו להשתמש בהם כקלאסים: bg-brand, text-brand-dark, font-heading, font-body. כל משתני ה-theme חשופים גם כ-CSS custom properties, כך שתוכלו לגשת אליהם מכל מקום עם var(--color-brand).

הוספת סקריפט Build ל-package.json

במקום להקליד את כל פקודת ה-CLI בכל פעם, הוסיפו סקריפט build ל-package.json שלכם:

{
    "scripts": {
        "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch",
        "build": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify"
    }
}

כעת תוכלו להריץ npm run dev בזמן הפיתוח ו-npm run build עבור build מוקטן לפרודקשן לפני הפריסה.

פתרון בעיות

בעיות נפוצות שאתם עלולים להיתקל בהן:

• שגיאת גרסת Node.js: Tailwind v4 דורש Node.js 20+. הריצו node -v ושדרגו במידת הצורך. אם אתם משתמשים ב-nvm, הריצו nvm install 20 ואחר כך nvm use 20.
• הסגנונות לא מופיעים: ודאו שתהליך ה---watch רץ. בדקו ש-dist/output.css קיים ונטען בדפדפן (בדקו את קוד המקור של הדף).
• קלאסים לא מזוהים: Tailwind v4 משתמש בזיהוי תוכן אוטומטי המבוסס על ה-.gitignore שלכם. אם התבניות שלכם נמצאות במיקום לא סטנדרטי, השתמשו בדירקטיבה @source בקובץ ה-CSS כדי לכלול אותן.
• שימוש בתבנית בת: אם התבנית שלכם היא תבנית בת, החליפו את get_template_directory_uri() ב-get_stylesheet_directory_uri() בפונקציית ה-enqueue כך שתצביע על תיקיית תבנית הבת.

שאלות נפוצות

שאלות נפוצות על Tailwind CSS v4 בוורדפרס:

סיכום

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

אם אתם רוצים להעמיק בהתאמה אישית, ה-תיעוד הרשמי של Tailwind CSS v4 מכסה הכל.