[react] create-react-app & 타입스크립트 & tailwind css 로 프로젝트 셋팅하기

create-react-app으로 프로젝트 셋팅하고 tailwind css 추가하려고 하니까 별 에러가 다 나와서...

다 지우고 공식 문서에 나온대로만 따라했더니 이제야 잘 된다..

 

1. 타입스크립트가 적용된 리액트 프로젝트 셋팅하기

나는 create-react-app 을 사용해서 프로젝트를 셋팅할거다. create-react-app 홈페이지에 나와있는 아래의 명령어를 실행한다. 

 

npx create-react-app my-app --template typescript

 

 

2. tailwind css 설치하고 적용하기

tailwind css 공식 홈페이지에 나온대로 명령어를 실행한다. 

 

npm install -D tailwindcss postcss autoprefixer

 

그 다음 아래 명령어를 실행하면 tailwind.config.js 랑 postcss.config.js 파일이 생긴다.

 

npx tailwindcss init -p

 

tailwind.config.js 를 아래처럼 작성한다. 

 

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

 

 

그런 다음 리액트 프로젝트의 'src' 폴더 내의 index.css 파일 맨 위에 아래 3줄을 추가하고 저장한다. 

 

 

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

...

 

 

3. tailwind css 사용하기

App.tsx 파일의 App 컴포넌트를 아래처럼 작성하고 npm run start 해보면 tailwind css가 적용된 것을 볼 수 있다. 

 

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

 

 

 

 

결론: 역시 공식문서가 최고다...