نحوه اضافه کردن Tailwind CSS به یک پروژه Next.js

8 مارس 2023

تیلویند سی‌اس‌اس یک فریم‌ورک کاربردی بسیار محبوب CSS است که به توسعه‌دهندگان اجازه می‌دهد به سرعت رابطهای کاربری‌ سفارشی و واکنش‌گرا یا ریسپانسیو ایجاد کنند.

این مقاله شامل دستورالعمل‌های گام به گامی برای راه‌اندازی Tailwind CSS در یک پروژه Next.js است، که شامل نصب وابستگی‌های لازم و انجام تنظیمات است.

در آموزش‌های قبلی، نحوه ساخت یک سایت و وبلاگ استاتیک توضیح داده شد. در ادامه قصد داریم به پروژه وبلاگی که ساخته بودیم تیلویند را اضافه کنیم.

در ابتدا Tailwind CSS و تمامی پکیج‌های مورد نیاز را با استفاده از پکیج منیجر نصب کنید.

pnpm add --save-dev tailwindcss postcss autoprefixer

پس از آن با استفاده از دستور زیر فایل‌های tailwind.config.js و postcss.config.jsرا با تنظیمات پیش فرض ایجاد کنید.

pnpx tailwindcss init -p

حالا باید مسیرهای همه فایل‌های قالب را به قسمت ‍‍content در فایل tailwind.config.js اضافه کنید.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
}

این کد به تیلویند می‌گوید که تنها کلاس‌های CSS استفاده شده در فایل‌های پروژه شما را شامل شود. آرایه content فایل‌های مورد اسکن برای کلاس‌های CSS استفاده شده را مشخص می‌کند.

گام بعدی، ایپورت کردن استایل‌های تیلویند خواهد بود. برای ایمپورت استایل‌ها کد زیر را با محتوای فایل globals.css در پوشه styles در دایرکتوری ریشه پروژه جایگزین کنید.

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

حالا می‌توانید از کلاس‌های تیلویند در کل پروژه استفاده کنید. حالا که تیلویند به پروژه اضافه شد، بیاید کمی ظاهر پروژه را بهبود دهیم.

ابتدا فایل layout.tsx در پوشه components را باز کنید، سپس محتوای آن را به شکل زیر تغییر دهید.

import Head from 'next/head'
import React, { ReactNode } from 'react'

type Props = {
  title: string
  children?: ReactNode
}

const Layout: React.FC<Props> = ({ title, children }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="My static site" />
      </Head>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl">
          <div className="flex flex-col">
            <header className="relative mx-auto max-w-7xl py-24 px-6 sm:py-32 lg:px-8">
              <h1 className="text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
                My Static Site
              </h1>
            </header>
            <main>{children}</main>
            <footer>
              <p className="mt-10 text-center text-xs leading-5 text-gray-500">
                © {new Date().getFullYear()} My Static Site
              </p>
            </footer>
          </div>
        </div>
      </div>
    </>
  )
}

export default Layout

سپس محتوای فایل index.tsx در پوشه pages را نیز به صورت زیر به روزرسانی کنید.

import type { NextPage } from 'next'
import Layout from '../components/layout'

const Home: NextPage = () => {
  return (
    <>
      <Layout title="My Static Site">
        <div className="mt-6 max-w-3xl text-center text-xl">
          <p>Welcome to my static site!</p>
        </div>
      </Layout>
    </>
  )
}

export default Home

با استفاده از دستور زیر در ترمینال قادر خواهید بود تا نکست را در حالت توسعه فعال کنید و نتیجه تغییرات خود را در لحظه در مرورگر مشاهده کنید.

pnpm run dev