[TIL220407] Tailwind CSS

 

 

---

 

 

Tailwind CSS

 

 

A utility-first CSS framework

Tailwind CSS는 유틸리티 우선 CSS framework이다.

 

- 많은 classname을 추가하고 조합하여 css를 쉽게 완성한다.

- 반응형 사이트를 만들기가 쉽다.

 

 

 

 

---

 

 

 

 

 

setting

 

 

 

 

- 설치

npm install tailwindcss

// postcss.confing.js, tailwind.config.js 파일 자동생성

 

- CSS에 추가

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
module.exports = {
  content: [
  //pages와 components 폴더의 모든 파일에 적용
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

 

 

 

 

 

 

 

---

 

 

 

 

 

기본 사용법

 

 

 

 

• className에 미리 정의된 css 옵션들을 추가하여서 스타일링 한다.
• Tailwind CSS IntelliSense를 설치하여서 자동완성, 에러표시, Hover preview 등 편리한 기능 이용하기!

 

 

 

 

[ ex : 버튼만들기 ]

<div className="mt-5 bg-blue-500 p-3 rounded-xl w-2/4 mx-auto text-white text-center">
   Checkout
</div>

// mt-5
margin-top : 1.25rem;

// bg-blue-500 
background-color : blue;

// p-3 
padding : 0.75rem;

// rounded-xl 
border-radius : 0.75rem;

// w-2/4 
width : 50%;

// mx-auto (margin을 x축으로)
margin-left : auto;
margin-right : auto;

// text-center
text-align : center;

 

 

 

 

---

 

 

 

 

Modifiers

 

 

🔻 hover / active / focus

        <div
          /* className="mt-5 bg-blue-500 text-white p-3
          text-center rounded-xl w-3/4 mx-auto */
          hover:bg-teal-500 
          active:bg-yellow-400 
          focus:bg-red-400"
        >

 

 

일반

hover

active

 

 

 

 

🔻 hover시 특정부분 변화

 

   1.  hover하려는 대상을 group 지정한다.

       className='group' 만 추가해주면 된다.

      <div className="bg-white overflow-hidden rounded-3xl shadow-xl group">

 

2. hover시 변경될 target에 'group-hover:변경사항'을 추가한다.

<div className="h-24 w-24 bg-yellow-300  group-hover:bg-red-300" />
// hover시 yellow배경이 red로 변경된다.

 

 

 

---

 

 

🔻 List

 

- 홀수, 짝수로 스타일링

<ul>
   {[1, 2, 3, 4].map((i) => (
     <div key={i}
        className="flex justify-between my-2 
           odd:bg-blue-50 
           even:bg-yellow-50 
           first:bg-teal-50 
           last:bg-amber-50"
            >
       <span className="text-gray-500">kim</span>
       <span className="font-semibold">19</span>
      </div>))}
</ul>

 

 

 

 

- List에서 비어있는 항목 display: none = empty : hidden

 

        <ul>
          {['a', 'b', 'c', ''].map((c, i) => (
            <li className="bg-red-500 py-2 empty:hidden" key={i}>
              {c}
            </li>
          ))}
        </ul>

 

 

 

 

---

 

 

🔻 Input

 

- placeholder 자체 스타일링

className="placeholder:text-red-600"

 

 

- placeholder가 보일 때 input 스타일 변경

      <input
        type="text"
        required
        placeholder="Username"
        className="placeholder-shown:bg-teal-500 "
      />

 

 

- input창의 상태에따라 스타일링

          <input
            type="text"
            required
            placeholder="Username"
            className="required:bg-red-400 invalid:bg-orange-200 valid:bg-teal-500"
          />

 

---

 

 

 

 

 

 

ring

 

 

 

<button 
   className="w-5 h-5 rounded-full bg-yellow-300 
   hover:ring-2 
   ring-offset-2 
   ring-yellow-300"
/>

/* 처음의 ring-2에만 hover:를 적용해주면 된다.

기존

hover시 ring 적용

 

 

---

 

✔️ 더 많은 커스터마이징을 위해서 해당 적은 코드에 mouseover해서 어떤 variable로 이루어진지 확인하고 그것들을 수정한다.

 

hover:ring-2코드에 mouseover하면 여러 variable을 알 수 있다.

 

 

 

 

 

 

 

 

공식사이트

 

 

 

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.