MATIN MOLKARA
SERIES: آموزش Next js — PART 4 OF 28

قسمت چهارم - نصب Tailwind CSS و انتخاب Layout اصلی درNext.js

نصب Tailwind در پروژه مطابق با داکیومنت رسمی

نصب Tailwind CSS و ساخت Layout آبی تیره در Next.js 16

در این پست، مطابق داکیومنت رسمی Tailwind پیش می‌رویم، برای پرتفولیو یک تم آبی تیره (dark blue) طراحی می‌کنیم.

خروجی این پست:

  • Tailwind به‌درستی روی Next.js 16 تنظیم می‌شود
  • RootLayout حرفه‌ای با هدر و فوتر ساخته می‌شود
  • یک Container برای کنترل عرض محتوا داریم
  • صفحه اصلی با یک تم آبی تیره مدرن استایل‌دهی می‌شود

۱. نصب Tailwind CSS مطابق داک رسمی

اگر پروژه را قبلاً ساختی، فقط این بخش‌ها را چک/اجرا کن؛ اگر تازه شروع می‌کنی، از اول انجام بده.

۱.۱. ساخت پروژه Next.js (اگر هنوز نداری)

npx create-next-app@latest my-portfolio --typescript --eslint --app
cd my-portfolio

۱.۲. نصب Tailwind و PostCSS Plugin رسمی

مطابق مستند Tailwind:

npm install tailwindcss @tailwindcss/postcss postcss

۱.۳. تنظیم PostCSS

در ریشه پروژه فایل postcss.config.mjs بساز و این را داخلش قرار بده:

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

export default config

۱.۴. وارد کردن Tailwind در globals.css

در app/globals.css:

/* app/globals.css */
@import "tailwindcss";

/* تنظیمات پایه ساده */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

۱.۵. اجرای پروژه

npm run dev

حالا کلاس‌های Tailwind آماده استفاده هستند.

۲. طراحی تم آبی تیره برای کل سایت

برای این آموزش، theme اصلی را بر پایه آبی تیره می‌گیریم:

  • پس‌زمینه کلی: آبی خیلی تیره
  • کارت‌ها و سطح‌های بالا: آبی تیره‌تر با کمی شفافیت
  • متن اصلی: خاکستری خیلی روشن / سفید
  • رنگ accent برای دکمه‌ها: آبی روشن یا فیروزه‌ای

در RootLayout این را اعمال می‌کنیم.

// app/layout.tsx
import type { Metadata } from 'next'
import './globals.css'
import { Header } from '@/components/layout/header'
import { Footer } from '@/components/layout/footer'
import { Container } from '@/components/layout/container'

export const metadata: Metadata = {
  title: 'Matin Portfolio',
  description: 'Personal portfolio, blog, and dashboard built with Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-slate-950 text-slate-100">
        <Header />

        <main className="min-h-[calc(100vh-4rem-3rem)] py-8">
          <Container>{children}</Container>
        </main>

        <Footer />
      </body>
    </html>
  )
}

نکات تم:

  • bg-slate-950: پس‌زمینه بسیار تیره، نزدیک مشکی اما کمی آبی/خاکستری.
  • text-slate-100: متن روشن برای خوانایی روی پس‌زمینه تیره.
  • فضای عمودی با py-8 برای تنفس بین هدر و فوتر.

۳. ساخت Container برای کنترل عرض محتوا

mkdir -p components/layout

// components/layout/container.tsx
import type { ReactNode } from 'react'

export function Container({ children }: { children: ReactNode }) {
  return (
    <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
      {children}
    </div>
  )
}

این کانتینر را در کل صفحات استفاده می‌کنیم تا عرض محتوا منظم و centered باشد.

۴. هدر با تم آبی تیره

یک هدر شفاف روی پس‌زمینه تیره می‌سازیم، با accent آبی برای لینک‌ها:

// components/layout/header.tsx
import Link from 'next/link'
import { Container } from './container'

export function Header() {
  return (
    <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur">
      <Container>
        <div className="flex h-16 items-center justify-between">
          {/* لوگو / برند */}
          <Link
            href="/"
            className="text-lg font-semibold tracking-tight text-slate-50"
          >
            Matin
          </Link>

          {/* ناوبری */}
          <nav className="flex items-center gap-4 text-sm font-medium">
            <Link
              href="/projects"
              className="text-slate-300 hover:text-cyan-300"
            >
              Projects
            </Link>
            <Link href="/blog" className="text-slate-300 hover:text-cyan-300">
              Blog
            </Link>
            <Link href="/about" className="text-slate-300 hover:text-cyan-300">
              About
            </Link>
            <Link
              href="/contact"
              className="text-slate-300 hover:text-cyan-300"
            >
              Contact
            </Link>
            <Link
              href="/dashboard"
              className="rounded-md bg-cyan-500 px-3 py-1.5 text-xs font-semibold text-slate-950 hover:bg-cyan-400"
            >
              Dashboard
            </Link>
          </nav>
        </div>
      </Container>
    </header>
  )
}

پالت:

  • پس‌زمینه هدر: bg-slate-900/80 + backdrop-blur برای حس شیشه‌ای روی بک‌گراند تیره.
  • متن: text-slate-50 برای لوگو، text-slate-300 برای لینک‌ها.
  • hover accent: hover:text-cyan-300.
  • دکمه Dashboard: bg-cyan-500 روی پس‌زمینه تیره، با متن تیره برای کنتراست.

۵. فوتر با تم تیره و اشاره به تکنولوژی‌ها

// components/layout/footer.tsx
import { Container } from './container'

export function Footer() {
  return (
    <footer className="border-t border-slate-800 bg-slate-900/80">
      <Container>
        <div className="flex h-12 items-center justify-between text-xs text-slate-400">
          <p>© {new Date().getFullYear()} Matin. All rights reserved.</p>
          <p>
            Built with{' '}
            <span className="text-cyan-400">Next.js</span> &{' '}
            <span className="text-cyan-400">Tailwind CSS</span>
          </p>
        </div>
      </Container>
    </footer>
  )
}

اینجا:

  • فوتر روی همان پس‌زمینه تیره هدر قرار گرفته (bg-slate-900/80).
  • متن خاکستری روشن (text-slate-400).
  • نام Next.js و Tailwind با accent آبی (text-cyan-400) برای تاکید.

۶. استایل صفحه اصلی با تم آبی تیره

حالا صفحه اصلی را برای این تم طراحی می‌کنیم تا حس یک پرتفولیوی تکنیکال مدرن را بدهد.

// app/page.tsx
export default function HomePage() {
  return (
    <section className="space-y-10">
      {/* Hero section */}
      <div className="space-y-4">
        <p className="text-xs uppercase tracking-[0.2em] text-cyan-400">
          Portfolio • Blog • Dashboard
        </p>

        <h1 className="text-3xl font-semibold tracking-tight text-slate-50 sm:text-4xl">
          Hi, I’m Matin — building modern web apps with Next.js.
        </h1>

        <p className="max-w-2xl text-sm text-slate-300">
          This portfolio showcases my projects, technical blog posts, and an
          admin dashboard built using Next.js, React, Prisma, Tailwind CSS, and
          other modern tools. Follow along as I document the architecture and
          development of this platform step by step.
        </p>
      </div>

      {/* دو کارت برای Projects و Blog */}
      <div className="grid gap-6 md:grid-cols-2">
        <div className="rounded-lg border border-slate-800 bg-slate-900/80 p-5 shadow-sm">
          <h2 className="text-sm font-semibold text-slate-50">
            Featured Projects
          </h2>
          <p className="mt-2 text-xs text-slate-300">
            Explore dashboards, CMS systems, and portfolio websites built with
            Next.js, Prisma, and Tailwind CSS.
          </p>
          <div className="mt-4">
            <a
              href="/projects"
              className="inline-flex items-center text-xs font-semibold text-cyan-400 hover:text-cyan-300"
            >
              View projects →
            </a>
          </div>
        </div>

        <div className="rounded-lg border border-slate-800 bg-slate-900/80 p-5 shadow-sm">
          <h2 className="text-sm font-semibold text-slate-50">
            Technical Blog
          </h2>
          <p className="mt-2 text-xs text-slate-300">
            Read about Next.js routing, architecture decisions, Prisma schema
            design, and deployment strategies.
          </p>
          <div className="mt-4">
            <a
              href="/blog"
              className="inline-flex items-center text-xs font-semibold text-cyan-400 hover:text-cyan-300"
            >
              Read articles →
            </a>
          </div>
        </div>
      </div>

      {/* یک بخش کوچک برای Dashboard */}
      <div className="rounded-lg border border-slate-800 bg-slate-900/80 p-5 shadow-sm">
        <h2 className="text-sm font-semibold text-slate-50">Admin Dashboard</h2>
        <p className="mt-2 text-xs text-slate-300">
          Manage blog posts, portfolio projects, and media assets from a
          dedicated dashboard with authentication and role-based access.
        </p>
        <div className="mt-4">
          <a
            href="/dashboard"
            className="inline-flex items-center rounded-md bg-cyan-500 px-3 py-1.5 text-xs font-semibold text-slate-950 hover:bg-cyan-400"
          >
            Go to dashboard
          </a>
        </div>
      </div>
    </section>
  )
}

در این صفحه:

  • Hero با تایپوگرافی واضح و رنگ‌های آبی/خاکستری روی پس‌زمینه تیره.
  • کارت‌ها با bg-slate-900/80، border-slate-800، و متن روشن.
  • لینک‌ها با accent text-cyan-400 و hover ملایم.

۷. وضعیت فعلی پروژه بعد از پست ۴

ساختار UI اکنون این است:

app/
├── layout.tsx        # RootLayout با تم آبی تیره، Header, Footer, Container
├── globals.css       # Tailwind import و تنظیمات پایه
└── page.tsx          # صفحه اصلی با استایل آبی تیره

components/
└── layout/
    ├── container.tsx # کنترل عرض محتوا
    ├── header.tsx    # هدر با ناوبری و accent آبی
    └── footer.tsx    # فوتر سازگار با تم تیره

یعنی:

  • Tailwind مطابق داک رسمی نصب و تنظیم شده است.
  • تم کلی سایت آبی تیره و یکپارچه است.
  • Layout اصلی قابل استفاده برای همه صفحات (بلاگ، پروژه‌ها، داشبورد) است.

جمع‌بندی

در این آموزش:

  • Tailwind CSS را با Next.js 16 بر اساس راهنمای رسمی نصب و کانفیگ کردیم.
  • postcss.config.mjs و globals.css را برای Tailwind آماده کردیم.
  • یک RootLayout با تم آبی تیره ساختیم.
  • کامپوننت‌های Header, Footer, و Container را اضافه کردیم.
  • صفحه اصلی را با یک UI آبی تیره مدرن و مناسب پرتفولیو طراحی کردیم.
// 0 comments
#tailwind#Next.js

نظرات (0)

نظر خود را بنویسید