개발/NextJS
Next.js + TypeScript + TailwindCSS 세팅하기
멍멍이코더
2023. 3. 16. 13:30
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
Setting up Tailwind CSS in a Next.js v10+ project.
tailwindcss.com
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;
반응형