[NextJS + Typescript + TailwindCSS ] NextJS Project에 TawilwindCSS 적용하기

1. NextJS에 TawilwindCSS 적용하기

TailwindCSS 공식 문서 참고하여 작성하였습니다.

Install Tailwind CSS with Next.js - Tailwind CSS

 

2. Create NextJS Project

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

 

3. Install TailwindCSS and PostCSS

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

 

4. Configure template path

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

5. Add Tailwind directive to CSS

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

 

6. Start the build process

npm run dev

 

7.  프로젝트에 TailwindCSS 잘 적용되는지 확인하기

// index.tsx
import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <div className="flex items-center justify-center h-screen bg-white">
      <h1 className="font-bold text-blue-800">Hello Tailwind!</h1>
    </div>
  )
}

export default Home