Tailwind CSS

Tailwind CSS هو إطار عمل CSS يعتمد على الأدوات (utility-first) ويعمل بشكل استثنائي مع Next.js.

تثبيت Tailwind

قم بتثبيت حزم Tailwind CSS وشغل الأمر init لإنشاء ملفات tailwind.config.js و postcss.config.js:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تكوين Tailwind

بداخل ملف tailwind.config.js، أضف مسارات الملفات التي ستستخدم أسماء فئات Tailwind CSS:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // ملاحظة: تمت إضافة دليل `app`.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // أو إذا كنت تستخدم دليل `src`:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

لا تحتاج لتعديل ملف postcss.config.js.

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

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

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

بداخل ملف التطبيق المخصص (pages/_app.js)، قم باستيراد صفحة الأنماط globals.css لتطبيق الأنماط على كل مسار في تطبيقك.

// هذه الأنماط تطبق على كل مسار في التطبيق
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

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

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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

بعد تثبيت 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.