קונפיגורציה של Tailwind בתבניות וורדפרס והתאמה אישית

Tailwind CSS הוא Framework שאני מאד אוהב העובד בגישת ״utility-first״, אך הקסם האמיתי מתחיל כאשר אתם מתאימים את קובץ ההגדרות לצרכים הייחודיים של הפרויקט שלכם.

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

Tailwind היא מערכת עיצוב שלמה בשליטתכם. התאמה של הקובץ tailwind.config.js תעניק לכם את הכוח לעשות כל מה שאתם רוצים.

הגדרת Tailwind בסיסית בוורדפרס

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

לדוגמה, אם התבנית משתמשת בקובץ header.php בשורש וכוללת תבניות בתוך template-parts, ההגדרה תיראה כך:

module.exports = {
  content: ["./template-parts/*.{php,html,js}","./*.{php,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind סורק את כל קבצי ה-PHP, JS ו-HTML שאתם מציינים, מאתר את הקלאסים, ומייצר קובץ CSS רק לפי הקלאסים שבשימוש. אם קובץ לא מצוין , הקלאסים בו לא ייכללו.

הוספת צבעים מותאמים אישית

כדי להתאים את העיצוב למיתוג שלכם, אפשר להגדיר פלטת צבעים מותאמת אישית בקובץ ההגדרות. הקלאסים יהיו זמינים מיד, כמו bg-primary ו-text-accent.

theme: {
  extend: {
    colors: {
      primary: '#1e40af',
      secondary: '#64748b',
      accent: '#f59e0b',
    },
  },
}

לאחר ההגדרה, ניתן להשתמש בקלאסים כמו כל utility של Tailwind. לדוגמה:

<div class="bg-primary text-accent p-4 rounded">
  <h2 class="text-white text-xl font-bold">Welcome</h2>
  <p class="text-secondary">This section uses custom colors from your Tailwind config.</p>
</div>

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

פונטים מותאמים אישית

אם אתם משתמשים ב-Google Fonts או פונטים מקומיים, אפשר לרשום אותם כך:

fontFamily: {
  sans: ['"Inter"', 'sans-serif'],
  serif: ['"Merriweather"', 'serif'],
}

ולאחר מכן להשתמש ב-font-sans או font-serif בקבצי התבנית.

ריווחים, גדלים ונקודות שבירה

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

spacing: {
  '128': '32rem',
  '144': '36rem',
},
screens: {
  'xs': '480px',
  '3xl': '1920px',
}

לאחר ההגדרה, אפשר להשתמש בקלאסים כמו mt-128 לריווח עליון, או max-w-3xl לעיצוב רספונסיבי בהתאמה אישית.

Z-Index ורדיוסים מותאמים

כדי להתמודד עם עיצובים מורכבים, ניתן להוסיף ערכים מותאמים ל-z-index ול-border-radius:

zIndex: {
  '60': '60',
  '70': '70',
},
borderRadius: {
  '4xl': '2.5rem',
},

שימור קלאסים דינמיים (safelist) עבור ACF או PHP

אם אתם משתמשים ב-ACF או מציגים קלאסים דינמיים דרך PHP, ייתכן וTailwind לא לכלול אותם בבניה. השתמשו באופציה safelist כדי להבטיח שלא יימחקו:

safelist: [
  'bg-blue-500',
  'text-center',
  /^text-(red|green|blue)-(100|200|300)$/,
]

הוספת מיקומים נוספים אותן Tailwind סורקת

Tailwind מייצר CSS רק לפי הקבצים שצוינו תחת content. בתבניות וורדפרס, חשוב לכלול את כל קבצי התבנית, חלקים דינמיים ו-JavaScript:

content: [
  "./*.php",
  "./template-parts/**/*.php",
  "./inc/**/*.php",
  "./blocks/**/*.php",
  "./js/**/*.js"
]

יצירת Utility משלכם עם פלאגינים

ניתן להוסיף קלאסים ייחודיים לפרויקט שלכם על ידי הגדרת פלאגינים:

plugins: [
  function ({ addUtilities }) {
    addUtilities({
      '.text-shadow': {
        textShadow: '2px 2px #000',
      },
      '.rotate-y-180': {
        transform: 'rotateY(180deg)',
      },
    });
  },
]

שמירה על עדכונים והפקת קובץ CSS סופי

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

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

לאחר מכן הריצו את הפקודה הבאה כדי להפיק את קובץ ה-CSS:

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

הדגל --watch מבטיח שהקובץ יעודכן אוטומטית בכל שינוי.

לבסוף, הוסיפו את הקובץ לפונקציות התבנית:

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

פיצול קובצי הגדרות Tailwind

בפרויקטים גדולים, מומלץ לחלק את הקונפיגורציה לקבצים נפרדים לפי קטגוריות:

// tailwind.config.js
const colors = require('./tailwind/colors');
const spacing = require('./tailwind/spacing');

module.exports = {
  theme: {
    extend: {
      colors,
      spacing,
    },
  },
}

שילוב Tailwind עם PostCSS Plugins

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

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {},
  },
};

ההגדרות האלו מעבדות את הקובץ עם Tailwind, מוסיפות התאמה לדפדפנים ומאפשרות תחביר מקונן.

קובץ tailwind.config.js לדוגמה מלאה

הנה קובץ tailwind.config.js מלא הכולל את כל ההתאמות שנגענו בהן עד כה. אתם יכולים להשתמש בו כבסיס להגדרה עבור תבנית הוורדפרס שלכם:

module.exports = {
  content: [
    "./*.php",
    "./template-parts/**/*.php",
    "./inc/**/*.php",
    "./blocks/**/*.php",
    "./js/**/*.js"
  ],
  darkMode: 'class',
  safelist: ['bg-blue-500', 'text-center'],
  theme: {
    extend: {
      colors: {
        primary: '#1e40af',
        secondary: '#64748b',
        accent: '#f59e0b',
      },
      fontFamily: {
        sans: ['"Inter"', 'sans-serif'],
        serif: ['"Merriweather"', 'serif'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      screens: {
        'xs': '480px',
        '3xl': '1920px',
      },
      zIndex: {
        '60': '60',
        '70': '70',
      },
      borderRadius: {
        '4xl': '2.5rem',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.text-shadow': { textShadow: '2px 2px #000' },
        '.rotate-y-180': { transform: 'rotateY(180deg)' },
      });
    },
  ],
}

טיפים לניהול נכון של tailwind.config.js בתבנית וורדפרס

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

• בדקו ומחקו ערכים שאינם בשימוש: אם אינכם משתמשים עוד בצבע או גופן מסוים – הסירו אותו מקובץ tailwind.config.js.
• השתמשו ברכיבי תבנית חלקיים: פצלו תבניות גדולות לקבצים קטנים ב-/template-parts או /blocks כדי לשמור על סדר בקבצים ובהגדרות הנתיבים.
• הכינו build מותאם לסביבת פרודקשן: השתמשו בפקודה כמו NODE_ENV=production npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify כדי להקטין את הקובץ לפני העלאה לאתר חי.
• נטרו עודף בקלאסים: Tailwind מאפשרת עבודה מהירה, אבל קל להפריז בשימוש בקלאסים דומים. בצעו רפקטורינג מדי פעם כדי לצמצם שכפולים.

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

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

סיכום

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

כרגיל, אם יש לכם שאלות – אתם מוזמנים לשאול בתגובות!