מדריך Next.js 13 | מה זה Tailwind CSS? והוספת Tailwind CSS לפרוייקט Next.js

תמיכה ב-Tailwind CSS התווספה לחלונית של פרויקט Next.js

שלב 1: התקנת Tailwind CSS

נתחיל עם התקנת החבילה של Tailwind CSS באמצעות npm או yarn:


npm install tailwindcss

או

yarn add tailwindcss


שלב 2: הוספת Tailwind CSS לקובץ התצורה של Next.js

בקובץ tailwind.config.js ניתן להגדיר את הגדרות ה-Tailwind CSS שלנו:


// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}


שלב 3: שינוי הקובץ העיקרי של Next.js

כדי להשתמש ב-Tailwind CSS נצטרך להוסיף את הקובץ הסטטי שלנו (כמו קובץ ה-CSS) לקובץ העיקרי של Next.js:


// pages/_app.js
import '../styles/globals.css'


שלב 4: הוספת סגנונות לקובץ ה-styles שלנו

בקובץ ה-styles שלנו נצטרך לייבא את הסגנונות של Tailwind CSS ולהוסיף סגנונות משלנו:


/* styles/globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


סיכום

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