필자는 create-react-app 과 Tailwind를 사용하는 방식에 맞게 작성하였다.

1. Tailwind 시작하기

1.1. create-react-app

npx create-react-app app_name
cd app_name

create-react-app을 사용하여 기본적인 개발환경을 직접 구축할 필요없이 편리하게 사용하겠다.

1.2. tailwind package 설치

yarn add -D tailwindcss postcss autoprefixer
yarn tailwind init -p

css framework인 tailwind를 사용하기위해 필요한 패키지들을 yarn 을 통해 install 해준다.

• yarn add -D package: 필요한 패키지를 install 한다.
• yarn tailwind init -p : tailwind.config.js 파일을 생성해준다.

1.3. tailwind.config.js 설정

yarn tailwind init -p 를 통해 자동으로 생성된 tailwind.config.js 파일에 내용을 아래와 같이 수정해 보겠다.

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

• src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx인 파일을 대상으로 한다.

1.4. css에 적용하기

// src/index.css

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

css파일을 import 해오는지 화인하기

// index.js

import './index.css'

...

@tailwind 지시문을 추가함으로써 index.css 파일을 import 하는 component는 tailwind를 사용할 수 있게 된다.

2. Component 작성

// src/App.js

function App() {
  return (
    <div className="space-y-4">
      <div className![](https://velog.velcdn.com/images/ahn0min/post/fb4ef0c4-78c3-4948-a75d-3ef1aa14b829/image.png)
="w-96 bg-white shadow rounded">
          w-96
      </div>
      <div className![](https://velog.velcdn.com/images/ahn0min/post/3fad4713-de6a-41f0-8cef-82022f625264/image.png)
="w-80 bg-white shadow rounded">
          w-80
      </div>
      <div className![](https://velog.velcdn.com/images/ahn0min/post/975cf4b5-41f5-43b6-9066-01154e401e8d/image.png)
="w-72 bg-white shadow rounded">
          w-72
      </div>
      <div className![](https://velog.velcdn.com/images/ahn0min/post/ba105d9c-ea93-48d4-82d7-e00e5356bcaf/image.png)
="w-64 bg-white shadow rounded">
          w-64
      </div>
      <div className![](https://velog.velcdn.com/images/ahn0min/post/54873540-b76c-4c08-8c98-1c3d4785cffe/image.png)
="w-60 bg-white shadow rounded">
          w-60
      </div>
      <div className![업로드중..](blob:https://velog.io/d06d650a-143b-48eb-b5e3-cf54ee008b2f)
="w-56 bg-white shadow rounded">
          w-56
      </div>
      <div className![업로드중..](blob:https://velog.io/d06d650a-143b-48eb-b5e3-cf54ee008b2f)
="w-52 bg-white shadow rounded">
          w-52
      </div>
      <div className![업로드중..](blob:https://velog.io/d06d650a-143b-48eb-b5e3-cf54ee008b2f)
="w-48 bg-white shadow rounded">
          w-48
      </div>
	</div>
  )
}

이제 yarn start 를 입력하여 리액트 서버를 실행!

yarn start

결과 화면

---

Reference

create-react-app으로 Tailwind 사용하기