[React] tailwindcss 설치

공식 문서에도 있지만 좀 더 세세하게 설치 하는 방법을 적어두려한다. 

 

1. tailwindcss 설치 방법

npx create-react-app my-project
cd my-project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p // tailwind.config.js 생성 됨

 

위의 명령어 대로 입력 하면 tailwind.config.js가 생성된다.

 

 

2. tailwind.config.js 생성이 되면 다음과 같이 작성

// tailwind.config.js

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

 

위의 파일의 content부분이 비어있을텐데, 이 부분을 위의 코드대로 수정해주자.

 

3. index.css파일에 모듈 추가

// index.css

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

.....

그리고 간헐적으로 저렇게 수정한 후 index.jsx 파일에 index.css 모듈을 추가 안해줘서 안되는 경우가 있는데 꼭 넣어주자.

 

4. 프로젝트 시작

yarn start

 

5. 테스트

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