كيفية تثبيت Tailwind CSS في تطبيق Next.js الخاص بك

Tailwind CSS هو إطار عمل CSS يعتمد على الأدوات (utility-first) وهو متوافق بالكامل مع Next.js. سيرشدك هذا الدليل حول كيفية تثبيت Tailwind CSS في تطبيق Next.js الخاص بك.

تثبيت Tailwind

قم بتثبيت حزم Tailwind CSS اللازمة:

Terminal

npm install -D tailwindcss @tailwindcss/postcss postcss

معلومة مفيدة: إذا كنت تستخدم واجهة سطر الأوامر create-next-app لإنشاء مشروعك، سيسألك Next.js عما إذا كنت ترغب في تثبيت Tailwind وسيقوم تلقائيًا بتكوين المشروع.

تكوين Tailwind

قم بإنشاء ملف postcss.config.mjs في جذر مشروعك وأضف ملحق @tailwindcss/postcss إلى تكوين PostCSS الخاص بك:

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

بدءًا من Tailwind v4، لا يوجد حاجة إلى أي تكوين افتراضيًا. إذا كنت بحاجة إلى تكوين Tailwind، يمكنك اتباع التوثيق الرسمي لتكوين ملف CSS العام.

هناك أيضًا واجهة سطر أوامر للترقية ودليل إذا كان لديك مشروع يعمل بـ Tailwind v3.

استيراد الأنماط

أضف توجيهات Tailwind CSS التي سيستخدمها Tailwind لحقن الأنماط التي تم إنشاؤها إلى ملف الأنماط العام في تطبيقك، على سبيل المثال:

app/globals.css

@import 'tailwindcss';

داخل تخطيط الجذر (app/layout.tsx)، قم باستيراد ملف الأنماط globals.css لتطبيق الأنماط على كل مسار في تطبيقك.

import type { Metadata } from 'next'

// هذه الأنماط تنطبق على كل مسار في التطبيق
import './globals.css'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// هذه الأنماط تنطبق على كل مسار في التطبيق
import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

استخدام الفئات

بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات الأدوات الخاصة بـ Tailwind في تطبيقك.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

الاستخدام مع Turbopack

بدءًا من Next.js 13.1، أصبح Tailwind CSS وPostCSS مدعومين مع Turbopack.