react에 tailwind css 적용

1. tailwind.css

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

2. tailwind.config.js

module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. package.json

  "scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "start": "npm run build:tailwind && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

4. App에 tailwind.output.css import 해주기
   

자주 사용하는 부분만 익히면 반응형으로 적용할 수 있어서 좋지만
컴포넌트별로 스타일링 하기 어려워서 emotion을 쓰는게 더 나은거 같기도 함!