1. 리엑트 설치

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

2. tailwindcss 사용을 위한 필수패키지 설치

• my-app 폴더로 이동하여 아래 패키지를 설치해주세요.

npm install -D tailwindcss postcss autoprefixer

• postcss는 pure css로 변환해주는 전처리 패키지
• autoprefixer는 벤더 프리픽스 자동 삽입 패키지

아래 명령어를 사용해서 tailwind.config.js 생성해주세요. my-app 폴더 아래 있어야 합니다.

touch tailwind.config.js

파일을 모두 생성하셨다면 각각에 파일에 아래 설정을 입력해주세요.

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

index.css나, app.css 또는 global.css를 만들어 아래 문구를 넣습니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3. tailwindcss 사용하기

해당 파일을 원하는 곳에 불러와서 사용하면 됩니다.

import './index.css'

function App() {
  return (
    <div className="App">
      <h1 className="m-6 bg-yellow-500 text-blue-500">hello world</h1>
    </div>
  );
}

export default App;