풀스택 캐럿마켓 클론코딩 #3 Tailwind 테일윈드

들어가기 전에...

- Next.js: https://nextjs.org
- Prisma: https://www.prisma.io
- PlanetScale: https://planetscale.com
- Vercel: https://vercel.com
- Cloudflare: https://www.cloudflare.com/ko-kr

PlantScale 유료화 됨. DB를 단순히 대체해서 해보고싶다면 Vercel에서 제공하는 무료 DB를 사용해도 된다. 계정당 1개까지 Storage에서 postgreSQL기반 DB제공한다.

 

Nextjs설치 방법

1. npx create-next-app@latest [your app name]

주의: nextjs설치 시 turboWebpack설치 유무가 뜰 때 무조건 No를 선택하자. tailwind적용이 안되서 결국엔 turbo webpack없는 새 프로젝트 만들어서 tailwind 적용한거 확인함...

---

#3.0 Introduction

- TailwindCSS

신속한 UI개발을 위한 유틸리티 퍼스트 CSS프레임워크

---

#3.1 IntelliSense

-Tailwind CSS IntelliSense
Tailwind CSS IntelliSense는 Visual Studio Code 사용자에게 자동 완성, 구문 강조, Linting과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상한다.

-Headwind
Headwind는 Visual Studio Code용 Tailwind CSS 클래스 분류기이다.
코드를 구문 분석하고 클래스 태그를 지정된 순서에 따라 다시 리페인팅하여 일관된 클래스 순서를 적용한다.

-Tailwind CSS Explorer
프로젝트의 tailwind 설정에서 사용할 수 있는 클래스를 탐색

-Window에서 TailwindCSS 자동완성 열기
ctrl + space bar

---

#3.2 Card Component

-Tailwind Play (Tailwind CSS 플레이그라운드)
Tailwind CSS 테스트 해보기
https://play.tailwindcss.com

---

#3.3 Modifiers

-Handling Hover, Focus, and Other States
유틸리티를 사용하여 마우스 오버, 포커스 등에 대한 요소의 스타일을 지정합니다.

-Dark Mode
Tailwind CSS를 사용하여 Dark Mode에서 사이트 스타일을 지정합니다.

 

윈도우 유저의 경우 윈도우10기준 
설정>개인 설정>색>색선택을 다크로 적용하면 NextJS app에 반영이 된다. 크롬 앱 자체에서 다크 모드로 설정하는건 아쉽게도 적용이 안된다.

---

#3.4 Tailwind Variables

-Ring Width
박스 그림자를 사용하여 아웃라인 링을 생성하는 유틸리티이다.

 

-tailwind css v3이상부터 "bg-opacity-50" 클래스가 제거되었다.
v2 이전 : class="bg-blue-500 bg-opacity-50"
v3 이후 : class="bg-blue-500/50" 이렇게 사용해야 한다.

 

-tailwind class들 중에서 정적으로 스타일을 지정하는 것 뿐만 아니라 css 변수를 사용하여 동적으로 지정할 수 있다.
이 때 사용하는 변수의 값도 tailwind class로 지정할 수 있다.

---

#3.5 Responsive Modifiers

-Responsive Design
반응형 유틸리티 variants를 사용하여 적응형 사용자 인터페이스를 구축한다.

sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

<main className='
 bg-gray-100 sm:bg-red-100 md:bg-green-100 lg:bg-cyan-100 xl:bg-orange-100 2xl:bg-purple-100
 h-screen flex items-center justify-center p-5' />

 

-tailwind는 모바일 first이다.

---

#3.6 Form Modifiers(invalid, peer)

-invalid

tailwind속성이 아니다. hover, active 처럼 sudo class이다. 브라우저가 유효하지 않다고 판단하는 입력값에 대해 작동한다.

두 개의 modifire를 사용할 수 있다.

invalid:red-500 // modifier 한 개
invaild:focus:ring-red-500 // modifier 두 개(invalid, focus)
invalid:md:focus:...  // 이렇게 사용할 수도 있다.

 

-형제 상태에 따른 스타일 지정(peer-{modifier})

형제 요소의 상태에 따라 요소의 스타일을 지정해야 하는 경우 형제를 peer 클래스로 표시하고 peer-invalid와 같은 peer-* 수정자를 사용하여 대상 요소의 스타일을 지정한다.

<div>
 <input/>
 <span/>
</div>

// 위 코드에서 input과 span은 peer이다.

-주의!
peer 마커는 이전 형제에서만 사용할 수 있다는 점을 유의!

// 작동하지 않습니다. 이전 형제 자매만 peer로 표시될 수 있다.
// input이 span보다 앞에 있어야 함.
<label>
 <span class="peer-invalid:text-red-500 ..." >Email</span>
 <input type="email" class="peer ..."/>
</label>

---

#3.7 State Modifiiers

-* 연산자

" * "은 자식 선택자이다. 모든 직계 하위 항목을 선택한다는 뜻이다.

 

-has() variant
:has()는 sudo class이고, Flexbox 이후 CSS에 추가된 가장 강력한 것이다.
최초로 부모를 기준으로 하는 것이 아니라 자식을 기준으로 요소의 스타일을 지정할 수 있다.

해당 컨테이너에서 특정 조건을 만족하는 자식을 확인 할 수 있다.
has()를 사용해서 코드에서 엄청난 양의 JavaScript를 대체했다.

---

#3.8 Lists and Animations

-odd, even, first, last

odd:bg-gray-200 
even:bg-cyan-200
first:pb-0 
last:border-0

-Animation(bounce, none, ping, pulse, spin

spin을 사용하면 모래시계 이모지를 사용했을 때 빙글빙글 돌릴 수 있다. 로딩 할 때 시각적 표현으로 좋을 듯.

pause를 사용하면 스켈레톤 ui를 쉽게 만들 수 있다.

-:empty
:empty CSS 수도 클래스는 자식이 없는 모든 요소를 ​​나타낸다.
하위 항목은 엘리먼트 노드이거나 텍스트(공백 포함)일 수 있다.

---

#3.9 Group Modifiers

-상위 상태에 따른 스타일 지정(group-{modifier})
일부 상위 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 상위 요소를 group 클래스로 표시하고 group-hover와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정한다.

 

-group-focus-within

유용하다. group container의 어떤 자식이건 포커스 되었는지 확인하도록 해준다.

JS에서 포커스 감지를 했던걸 css만으로도 충분히 가능하다.

 

-?

Q: map을 이용해서 목록을 만들었을 때, 1번 index에 hover했을 때, 1번 person text만 바꾸는 건?

A: first:group or your can use JS {index === 1 ? "group" : ""}

---

#3.10 JIT

-Just-in-Time Mode
Tailwind CSS v2.1에서 초기 빌드 시점에 모든 것을 미리 생성하는 대신 템플릿을 작성하는 즉시 필요에 따라 스타일을 생성하는 Tailwind CSS용 새로운 JIT(Just-In-Time) 컴파일러를 도입했다.

 

-JIT 컴파일러 특징 및 tailwind css의 작동 방식 이해

jit compiler는 개발환경에서 저장할 때마다 config > content에 지정된 모든 파일들의 class들을 읽어서 css 파일로 변환한다.
compiler는 자체 class 뿐만 아니라 입력한 arbitrary value를 기반으로도 class를 생성해주므로 커스터마이징이 굉장히 편리하다.
tailwind.config.ts > theme > extend에 커스텀 class를 정의할 수 있다.

---

#3.11 Directives

-Functions & Directives(@tailwind, @apply, @layer)
지시어(Directives)는 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 CSS에서 사용할 수 있는 사용자 정의 Tailwind 관련 at-규칙이다.

-@tailwind
@tailwind 지시문을 사용하여 Tailwind의 base, components, utilities 및 variants 스타일을 CSS에 삽입할 수 있다.

utilites directive안에 컴파일러는 모든 utility class name들을 넣을것이다.

base는 컴파일러가 tailwind와 함께 제공되는 기본적인 스타일(base style. reset 및 기본값의 일종이다.) 종류를 두는 곳이다.

-@apply
기존 유틸리티 클래스를 사용자 커스텀 CSS에 인라인하려면 @apply를 사용하면 된다.

ex) globals.css
.btn{
  @apply w-full bg-black...
}

-@layer
@layer 지시문을 사용하여 사용자 정의 스타일 세트가 속한 '버킷'을 Tailwind에 알린다.

base style을 추가하고 싶다면 base layer를 확장할 수 있다. 그리고 또 다른 utility를 추가하고 싶다면 utility layer를 확장할 수 있다. components도 마찬가지.

ex)globals.css
@layer base{
  a{
    @apply text-blue-500;
  }
}

@layer utilites{
  .text-bigger-hello{
     @apply text-3xl font-semibold;
  }
}

@layer components{
  .btn{
    @apply w-full bg-black...
  }
}

---

#3.12 Plugins

-tailwindcss/forms
유틸리티를 사용하여 form 요소를 쉽게 재정의할 수 있도록 form 스타일에 대한 기본 reset을 제공하는 플러그인이다.
npm install -D @tailwindcss/forms

-tailwindcss/forms 테스트
https://tailwindcss-forms.vercel.app

-Official plugins
플러그인은 npm을 통해 설치한 후 tailwind.config.js 파일에 추가하여 프로젝트에 추가할 수 있다.

-daisyUI
Tailwind CSS용 가장 인기있는 컴포넌트 라이브러리
npm i -D daisyui@latest
https://daisyui.com

require('@tailwindcss/forms') 부분 오류 해결 방법 nextjs v.14

// 1. 상단에서 import를 통해 @tailwindcss/forms 가져오기
import forms from "@tailwindcss/forms";

// 2. 가져온 @tailwindcss/forms를 plugins에 추가하기
plugins: [forms],

---

#3.13 Conclusions

TailwindCSS 공식 플러그인
- @tailwindcss/typography
- @tailwindcss/forms
- @tailwindcss/aspect-ratio
- @tailwindcss/container-queries
https://tailwindcss.com/docs/plugins#official-plugins

daisyUI
https://daisyui.com