[Carrot-Market] #3 SETUP

NextJS SetUp

NextJS를 우선 typescript로 개발하기 위해 아래 명령어로 프로젝트를 생성하도록 하겠습니다.

npx create-next-app@latest --ts

이 상태로 package.json을 가서 react18이 깔려 있는지 확인 후에, 17버전이 깔려있다면 rc로 다시 깔아주도록 합니다.

 

TailwindCSS Setup

npm install -D tailwindcss postcss autoprefixer

그 다음에 프로젝트 폴더에 postcss.config.js, tailwind.config.jsl가 생성되었는지 봅니다.

 

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js, jsx, ts, tsx}",
    "./components/**/*.{js, jsx, ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

contents는 page폴더 안의 모든 디렉토리 안의 모든 파일인데 확장자가 (js, jsx, ts, tsx)로 끝나는 모든 파일에서 Tailwind를 사용한 것 을 찾아낼 것이라는 이야기 입니다. components폴더도 동일하게 적용해 줍니다. 이번 프로젝트에서는 tsx만 사용하므로 .{tsx}만 해도 무방합니다.

 

global.css

이제 app.js에서 import해서 전역 스타일링을 해줄 global.css 파일을 수정하겠습니다.

우선 이해가 안되도 tailwind.css를 적용 시켜 주기 위한 사전 작업을 진행해 줍니다.

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

 

pages/index.tsx

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div className="bg-red-500">
      <h1 className="text-black">it works</h1>
    </div>
  );
};

export default Home;

 

Prettier SetUp for Tailwind

npm i -D prettier prettier-plugin-tailwindcss

Prettier를 통해 TailwindCss 의 클래스 자동 정렬 플러그인을 적용시켜줄 수 있습니다.

 

.prettier.config.ts

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

// 클래스 정렬 전
button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"

// 클래스 정렬 후
button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"

 

위에는 Tailwindcss의 클래스 이름이 어떻게 정렬 되는지 예시를 든 것 입니다.

 

Results

그리고 NextJS 프로젝트를 dev로 열어보게 되면 다음과 같은 화면을 보실 수 있게 됩니다.

npm run dev

local에서 tailwindcss가 정상 작동되는 것을 보실 수 있습니다.