Next.js + TypeScript + TailwindCSS 세팅하기

Next.js 앱 생성

1. 프로젝트 생성

"npx create-next-app@latest  --ts" 명령어로 Next.js 프로젝트를 생성한다.

❯ npx create-next-app@latest --ts
✔ What is your project named? … nextjs-init
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/user/Desktop/nextjs-init.

프로젝트 구성

 

2. 프로젝트 실행

❯ cd nextjs-init
❯ npm install

up to date, audited 272 packages in 2s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


❯ npm run dev

> nextjs-init@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:82636) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
event - compiled client and server successfully in 2.9s (170 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 773 ms (199 modules)

 

TailwindCSS 설치

😎 TailwindCSS 공식사이트

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS

1. TailwindCSS(이하 Tailwind) 모듈 설치

❯ npm install -D tailwindcss postcss autoprefixer

 

2. Tailwind config 파일 생성

❯ npx tailwindcss init -p

 

3. Tailwind.configs.js 수정

Tailwind를 적용시킬 파일들의 path를 추가한다.

./src/pages/**/*.{js,jsx,ts,tsx}의 뜻은 src/pages 라는 폴더내 모든 directory(**)의 모든 파일(*) 중 확장자명 js, jsx, ts, tsx인 파일을 대상으로 tailwind를 적용한다는 뜻

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. global.css 수정

globals.css는 _app.tsx에서 import할 경우 모든 page를 대상으로 적용하는 css이다.

Tailwind를 사용하는 경우에는 이 내용을 전부 지우고 다음과 같이 수정한다.

@tailwind base @tailwind component @tailwind utilities는 tailwind에서 제공하는 base, component 그리고 utilities를 사용 할 수 있도록 한다.

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

 

5. 테스트

index.tsx 파일의 내용을 아래와 같이 수정하여 npm run dev를 통해 확인해본다.

import { NextPage } from "next";

const Home: NextPage = () => (
  <div className="text-3xl font-bold underline p-10">
    <h1 className="text-blue-500"> Hello </h1>
  </div>
)

export default Home;