[css] tailwind css

**Utility-First Fundamentals**

css 를 직접 설정하지 말고 tailwind 에서 미리 만들어 놓은 css 들을 조합해라

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

장점

• css 를 별도로 작성하지 않아도 된다.
• class 이름 , style-component 이름 굳이 지정하지 않아도 됨
• tailwind 에서 제공한 CSS 만 가지고 사용하기 때문에, CSS 파일크기가 고정됨

단점

• html 부분의 code 가 길어져 가독성이 떨어질 수 있다.
• 별도로 tail-wind css 의 문법을 배워야 한다.
• 굳이 사용하지 않는 css 를 포함해야 할 수도 있다.
• 특정 상태에 여러 스타일을 한꺼번에 적용할 수 없다.
  • ex > focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500

그냥 inline 으로 하는거랑 뭐가 다름?

• 단위를 일정하게 가져갈 수 있다.
  • inline 으로 하게 되면 단위를 개발자 개인이 지정하게 되어 일관된 UI 를 작성하기 힘들다.
• inline style 에서는 미디어 쿼리 못씀
• inline style 에서는 element 의 상태변화 ( hover, focus … ) 를 기준으로 style 지정 못함

**Handling Hover, Focus, and Other States**

• 유틸리티 클래스는 조건적으로 적용할 수 있다.
• 조건이 되는 상태를 먼저쓰고, 그다음 적용할 유틸리티 클래스를 쓰면된다.
• 조건은 하나만 사용할 수 있는 것이 아니라 중첩해서 사용할 수 있다.
• https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference

// dark > md > hover 일 때 배경색 지정 
<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

• Pseudo-classes, like :hover, :focus, :first-child, and :required
• Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection
• Media queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
• Attribute selectors, like [dir="rtl"] and [open]

첫번째, 마지막

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <!-- Remove top/bottom padding when first/last child -->
    <li class="flex py-4 first:pt-0 last:pb-0">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

Form 상태에 따른 style

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>

부모 요소 상태 기준으로 자식 요소 style 지정

• 부모 요소 클래스에 group 지정하고
• 자식 요소에서 group-* 로 스타일 지정하면 된다.

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

인접요소 상태 기준으로 현재 요소 style 지정

• 인접요소 클래스에 peer 지정
• 현재요소 클래스에 peer-* 로 스타일 지정하면 된다.
• 인접요소는 html 에서 현재요소보다 이전에 위치해야 한다.
• (input with label)https://play.tailwindcss.com/cwqORB8ee7

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

Before and after

• ::after or ::before 로 html 에 없고 css 에서만 보이는 요소를 style 할 수 있다.
• 참고로 content:’’ 는 tailwind 에서 알아서 넣어준다.

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

• 사실 그냥 html 넣는게 가독성 측면에서는 좋을 수 있다.

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="relative">
    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

스타일 재사용

• react, vue 써라
• @apply 는 정말 꼭 필요할 때만 써라 ( 깔끔해질 것 같다고, 초기에 추상화를 진행하지 마라 )
  • custom 한 클래스를 만들게 되면 클래스 이름 지정안해도 되는 장점이 사라짐
  • 수정이 필요할 때 마다 custom 클래스 왔다갔다 하면서 수정해야 함
  • 테일윈드에서 제공하는 것 이외의 css 가 추가되면서 css 파일이 커짐
  • 솔직히 React 를 사용하면 component 별로 격리 시켜 재사용 가능하기 때문에 사용할 일이 없다.

**Functions & Directives**

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;