Next.js 13 + tailwindcss 설정

James An·2023년 3월 3일

Installation

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

Configuring tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configuring next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

Update package.json

"scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input ./styles/input.css --output ./styles/output.css --watch\"",
    "build": "tailwindcss ./styles/input.css --output ./styles/output.css && next build",
    "start": "next start",
    "lint": "next lint"
},

Create ./styles/input.css

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

Create ./styles/output.css

빈 파일 생성

Create ./app/layout.tsx

import Header from "@/components/Header";
import Footer from "@/components/Footer";
import "@/styles/output.css";

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

Add styles to ./app/page.tsx

export default function Home() {
  return (
    <main>
      <h1 className=" text-blue-600">
        Welcome to NextJS 13 with tailwindcss and turbopack
      </h1>
    </main>
  );
}

Reference

James An

born 2 code :)

이전 포스트

Next.js 13 + tailwindcss 설정

Next.js 프로젝트에 Notion 페이지 연결하기

0개의 댓글