#3 TAILWIND

1, 모듈 설치 및 사용법

Tailwind CSS IntelliSense
Tailwind CSS IntelliSense는 Visual Studio Code 사용자에게 자동 완성, 구문 강조, Linting과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상합니다.
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

-->만약 className부분에 자동 완성이 안되면 ctrl + space를 쳐보자.

 

Headwind
Headwind는 Visual Studio Code용 Tailwind CSS 클래스 분류기입니다.
코드를 구문 분석하고 클래스 태그를 지정된 순서에 따라 다시 리페인팅하여 일관된 클래스 순서를 적용합니다.
https://github.com/heybourn/headwind

Tailwind CSS Explorer
프로젝트의 tailwind 설정에서 사용할 수 있는 클래스를 탐색
https://marketplace.visualstudio.com/items?itemName=PeterMekhaeil.vscode-tailwindcss-explorer

 

2. Modifiers

modifier 기능을 활용해서, hover를 통해 마우스 올려두면 글씨가 커지거고 색깔도 바꿀 수 있는 기능이 구현 가능하다. (노마드코더 홈페이지 가보면, 강의에 마우스 올릴 때 확대 되는 기능) 그리고 다크모드도 가능. 향 후 실제 프로젝트에서 다룰 예정.

 

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

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

 

3. Responsive Modifiers

화면 크기에 따라 디자인을 변경할 수 있는 반응형 디자인도 쉽게 구현 가능하다.

sm: ~~ / md:~~ / lg:~~ 이런식으로,,, 할 수 있고, 여기서 크기는 그 크기부터 더 큰 크기를 뜻한다(sm이면 sm부터 큰사이즈 적용)

 

Responsive Design
반응형 유틸리티 variants를 사용하여 적응형 사용자 인터페이스를 구축합니다.
https://tailwindcss.com/docs/responsive-design

Responsive Design - Tailwind CSS

 

4. Form Modifiers

invalid를 통해서 input 부분이 유효하지 않은 경우 디자인이 가능하고, peer를 통해 같은 쌍의 데이터에 따라서 다른 부분의 디자인을 변경할 수 있다. (ex: 인풋 부분이 유효하지 않으면 버튼 부분이 빨간색으로 보이기) - 아래 강의 참조

https://nomadcoders.co/carrot-market/lectures/4736

 

이 방법을 통해서, 데이터가 유효 하지 않은 경우 경고 문구를 보였다 사라졌다 하게 할 수 있다. (자바스크립트로 구현 안해도됨)

 

5. State Modifiers

자식에 특정 상태가 되면 그 부모컨테이너가 그 값을 가지고 디자인을 변경 할 수 있다.

예를 들면 자식1, 자식2가 invalid 되면 부모 컨테이너의 배경색이 빨간색이 되게끔 가능.

 

has() variant
:has() 수도 클래스는 Flexbox 이후 CSS에 추가된 가장 강력한 것입니다.
최초로 부모를 기준으로 하는 것이 아니라 자식을 기준으로 요소의 스타일을 지정할 수 있습니다.
has()를 사용해서 코드에서 엄청난 양의 JavaScript를 대체했습니다.

https://tailwindcss.com/blog/tailwindcss-v3-4#new-has-variant

 

Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS

 

이와 반대로, group을 써서, 부모 컨테이너의 상태에 따라 자식의 디자인을 바꿔줄 수도 있다.

 

 

6. 배열을 map함수로 뿌려줄 때 index가 홀수 짝수에 따라서 디자인을 다르게 해줄 수 있다. (odd, even 사용)

https://nomadcoders.co/carrot-market/lectures/4734

All Courses – 노마드 코더 Nomad Coders

 

7. first last 를 통해서 map 함수에서 첫번째나 마지막 값에 대해 디자인을 다르게 적용 할 수 있다. (마지막 값 border bottom 값 없애기)

 

8. 애니메이션을 응용한  스켈레톤 ui도 만들기도 쉽고, loader창도 만들기 쉬움 애니메이션 spin 활용. 그리고 notification에 쓰일만한 애니메이션 ping 도 있음.

 

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

 

10. global.css 부분 해석

*여기서 @tailwind부분에 에러가 난다면, vsc 하단에 css -> tailwind로 변경하면됨

@tailwind base;

@tailwind components;

@tailwind utilities;

 

1) tailwind를 통해 컴파일된 css데이터는 해당 global.css파일에 담기게 되는데

- base는 기본 웹에서 제공하는 디자인으로 보면되고

- utilities는 tailwind에서 사용한 className값들이 담긴다고 보면 되고, (단일 목적)

- components는 내가 그룹화 해놓은 것을 아래와 같이, className에 적용할 수 있게 해주는 것이다. (다른 곳에서 재사용 할 경우, 해당 컴포넌트 + 추가 디자인 할 때) 아래 케이스를 보면, btn을 className에 적게되면 사용자가 직접 그룹화 해놓은 것을 쓸 수 있음.

(스타일 관련해서 별도 컴포넌트 폴더를 만들필요 없이, 해당 파일에 쭉 적어 내려가면 될듯하다.)

 

@layer components {
  .btn {
    @apply w-full bg-black h-10 text-white rounded-sexy-name mt-tomato;
  }
}

 

위와 같은 방법으로, 해당 파일에서 base와 utilities도 확장이 가능하다. 다시 말하지만 base는 특정 클래스가 아니라 a (html 링크) 이런 웹에서 제공하는 기본 디자인을 바꿀 수 있는 것임.

 

11. 플러그인을 설치해서, 남들이 만들어 놓은 tailwind class 들을 쉽게 사용할 수 있다. (이미 꾸며져 있는 버튼이나 인풋 디자인 등)

 

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

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

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

 

*shadcn

https://ui.shadcn.com/