React Tailwind 사용하기

npm i -D postcss autoprefixer tailwindcss
>>postcss autoprefixer 는 브라우저 호환 해결 위해 설치

npx tailwindcss init -p
>>tailwind.config.js   postcss.config.js 파일 생성

npm i -D daisyui @tailwindcss/line-clamp
>>테일윈드에 없는 css컴포넌트 제공, line-clamp 여러 줄의 텍스트를 지정한 줄 수로 잘라서 표시해줌

---

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [require('@tailwindcss/line-clamp'), require('daisyui')]
};

src/index.css

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

이렇게 설정하면 준비 완료

---

   <div className="p-4 bg-sky-700">
      <p className="w-full p-4 text-3xl text-white">Color</p>
      <div className="mb-4">
        <p className="text-white">Email address</p>
        <input type="email" className="text-gray-900 border-sky-200 border-4" />
        <p className="text-rose-500">This field is required</p>
      </div>
    </div>

이런 식으로 tailwind에서 지정한 className을 참고해서 써주면 된다