tailwindcss

tailwind 설정법

1. 터미널에서 리액트로 프로젝트 생성

npx create-react-app my-project

2. 터미널에서 테일윈드 인스톨

npm install -D tailwindcss

3. tailwind.config.js 열어준 후 content 에 아래 코드 붙이기

"./src/**/*.{js,jsx,ts,tsx}"

4. index.css 파일 생성 후, 아래 코드 붙이기

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

5. 터미널에 아래와 같이 입력

npm run start

---

아래 처럼 겹치는 코드가 있다면,

            <ul className="bg-indigo-300 px-2 py-1 rounded-md text-red-100 shadow-inn cursor-pointer">
              Introduce
            </ul>
            <ul className="bg-purple-300 px-2 py-1 rounded-md text-red-100 shadow-inn cursor-pointer">
              Portfolio
            </ul>
              

index.css 에서 겹치는 부분만 뽑아와서 선언

@layer components {
  .btn-style {
    @apply px-2 py-1 rounded-md text-gray-100 cursor-pointer;
  }

그리고 가져오면 겹치는 코드 없이 간단하게 작성 할 수 있다.

<ul className="bg-indigo-300 btn-style></ul>