react tailwind 설치 및 세팅

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

공식문서 참조하기

 

1. 터미널 

npm install -D tailwindcss
npx tailwindcss init
// 터미널에입력

2. tailwind.config.js 파일에 아래 복붙 html 은 안 쓸 거니깐 js, jsx로 수정해서 붙이기

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 최상위 css 최상단에 복붙후 npm start로 작업 다시 실행

4. 추가로

 

 

세팅한 index 작업

  @apply flex flex-col items-center;
  @apply bg-zinc-900 text-gray-50;
}
#root {
  @apply w-full max-w-screen-2xl;
}

바디와 루트에 각각 추가

 <header className="w-full flex p-4 text-2xl border-b border-zinc-600 mb-4">
      <Link className="flex items-center" to="/">
        <FaYoutube className="text-4xl text-brand" />
        <h1 className="font-bold ml-2 text-3xl">youtube</h1>
      </Link>
      <form
        action=""
        onSubmit={handleSubmit}
        className="w-full flex justify-center">
        <input
          className="w-7/12 p-2 outline-none bg-black text-gray-50"
          type="text"
          placeholder="검색어를 입력하삼"
          onChange={(e) => {
            setText(e.target.value);
          }}
          value={text}
        />
        <button className="bg-zinc-600 px-4">
          <FaSearch />
        </button>
      </form>
    </header>

사용예시 (다크모드 내비게이션바 )