clone coding,

Tailwind3

Dahna Dahna Follow Jun 13, 2024 · 5 mins read
Tailwind3
Share this

Tailwind3

State Modifiers

had 선택기
has-[:invalid]:

  • 기본적으로 부모 요소가 특정 상태(여기서는 :invalid)를 가진 자식 요소를 포함할 때 스타일을 적용하는 방법이다.
  • has- 프리픽스는 부모 요소가 특정 조건을 만족하는 자식을 포함할 때 스타일을 적용한다.


Lists and Animations

 <div className="bg-white shadow-lg p-5 rounded-3xl w-full max-w-screen-sm flex flex-col gap-4">  
      {["Nico", "Me", "You", "Yourself", ""].map  
      ((person, index) => (  
        <div key={index} className="flex items-center gap-5">  
          <div className="size-10 bg-blue-400 rounded-full" />  
          <span className="text-lg font-medium empty:w-24 empty:h-5 empty:rounded-full empty:bg-gray-300">{person}</span>  
          <div className="size-6 bg-red-500 text-white flex items-center justify-center rounded-full relative">  
            <span className="z-10">{index}</span>  
            <div className="size-6 bg-red-500 rounded-full absolute animate-ping"/>  
          </div>  
        </div>  
  
      ))}  
        
       
    </div>
  • map 함수:
  • 배열 [“Nico”, “Me”, “You”, “Yourself”, ““]를 map 함수로 반복하여 각 요소에 대해 새로운 div를 생성
  • person: 현재 배열 요소(이름).

  • index: 현재 배열 요소의 인덱스.

  • 자식 div:
  • key={index}: 각 요소에 고유 키를 부여하여 React가 효율적으로 렌더링할 수 있게 한다.

  • flex items-center gap-5: 플렉스 박스를 사용하여 자식 요소를 가로 방향으로 정렬하고, 수직 중앙 정렬하며, 간격을 5단계로 설정한다.

  • ping효과 - 같은 도형을 하나 더 삽입해서 적용시키면 됨


Skeleton이란

Skeleton은 웹 개발에서 흔히 사용하는 UI 패턴
콘텐츠가 로드되기 전에 일시적으로 표시되는 자리 표시자이다.
이는 사용자에게 로딩 중임을 알리고, 전체 페이지가 로드되지 않았더라도 일관된 레이아웃을 유지함으로써 더 나은 사용자 경험을 제공할 수 있음.
Skeleton UI는 일반적으로 페이지나 컴포넌트가 로드되기 전에 표시되는 회색이나 컬러 블록 형태로 나타난다.


Group Modifiers

Tailwind CSS에서 group modifier는 요소 간의 상태를 공유할 수 있게 해준다.
주로 부모 요소와 자식 요소 간의 상호작용을 스타일링할 때 사용되는데,
group 클래스를 부모 요소에 적용하고, group-* 형식의 클래스를 자식 요소에 적용하여 부모 요소의 상태에 따라 자식 요소의 스타일을 변경할 수 있다.
예를 들어, 마우스가 부모 요소 위에 있을 때 자식 요소의 스타일을 변경하는 경우.

group-hover: 부모 요소가 호버 상태일 때 자식 요소에 적용
group-focus: 부모 요소가 포커스 상태일 때 자식 요소에 적용
group-active: 부모 요소가 활성화 상태일 때 자식 요소에 적용
group-disabled: 부모 요소가 비활성화 상태일 때 자식 요소에 적용


JIT

  • tailwind.config.ts의 content : Tailwind CSS가 어떤 파일을 검사하여 클래스 이름을 추출할지를 지정하는 부분. 이 설정을 통해 Tailwind CSS가 사용되지 않는 스타일을 제거하고 최종 빌드 파일의 크기를 줄이는 데 도움을 준다.

js: JavaScript 파일
ts: TypeScript 파일
jsx: JavaScript XML 파일 (React 컴포넌트)
tsx: TypeScript XML 파일 (React 컴포넌트)
mdx: Markdown 파일과 JSX를 혼합한 파일

Just-In-Time Compiler (JIT Compiler)란?
Just-In-Time (JIT) 컴파일러는 프로그램 실행 시점에 코드의 일부 또는 전체를 컴파일하는 기술. JIT 컴파일러는 컴파일러와 인터프리터의 장점을 결합하여, 코드가 실행될 때 필요한 부분만 컴파일하여 성능을 최적화한다.

Tailwind CSS에서 대괄호 사용
Tailwind CSS JIT 모드에서는 대괄호 표기법을 사용하여 임의의 값으로 스타일을 정의할 수 있다. 이는 기존의 클래스 네이밍 방식보다 훨씬 유연하고 강력한 스타일링을 가능하게 함

<button className="text-white py-2 rounded-full bg-[rgb(34,197,94)] hover:bg-[rgb(22,163,74)] transition-colors">Click Me </button>

tailwind.config.ts 파일에서 theme 객체를 사용
사용자 정의 클래스를 작성하여 기본 Tailwind CSS 유틸리티를 확장하거나 재정의할 수 있다.

theme: { extend: { colors: { customGreen: '#22c55e', customBlue: '#3b82f6', }, spacing: { '72': '18rem', '84': '21rem', '96': '24rem', }, fontSize: { 'xs': '0.75rem', 'sm': '0.875rem', 'tiny': '0.875rem', 'base': '1rem', 'lg': '1.125rem', 'xl': '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', '6xl': '4rem', '7xl': '5rem', }, }, },


Directives

Tailwind CSS의 globals.css 파일에 작성된
@tailwind base;,
@tailwind components;,
@tailwind utilities;
는 각각 Tailwind CSS의 다양한 스타일 계층을 포함시키기 위해 사용된다.

@tailwind base;:
기능: Tailwind CSS의 기본 스타일을 포함함
포함된 내용: 브라우저의 기본 스타일을 재설정하는 CSS와 Tailwind CSS의 기본 스타일 규칙이 포함된다. 예를 들어, normalize.css와 유사한 역할을 함
사용 목적: 브라우저 간의 스타일 차이를 없애고, 일관된 기본 스타일을 제공하기 위해 사용된다.

@tailwind components;:
기능: Tailwind CSS의 컴포넌트 스타일을 포함한다.
포함된 내용: 유틸리티 클래스보다는 좀 더 복잡한 스타일 규칙들이 포함된다.
예를 들어, 버튼, 카드, 폼 요소 등의 스타일이 여기에 포함될 수 있다.
사용 목적: 재사용 가능한 스타일 컴포넌트를 정의하고 포함하기 위해 사용

@tailwind utilities;:
기능: Tailwind CSS의 유틸리티 클래스를 포함한다.
포함된 내용: 다양한 유틸리티 클래스들이 포함된다. 예를 들어, 여백(margin), 패딩(padding), 텍스트 정렬(text alignment), 배경색(background color) 등의 클래스가 포함됨
사용 목적: 세밀한 스타일 조정을 위해 사용되는 다양한 유틸리티 클래스를 제공하기 위해 사용된다.

@apply : Tailwind CSS 유틸리티 클래스를 기존 CSS 규칙에 적용하는 데 사용된다. 재사용 가능한 스타일 조각을 작성하는 데 매우 유용하다.

@layer components { .btn { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; } .card { @apply shadow-lg p-6 bg-white rounded-lg; } }

@layer : 사용자 정의 CSS를 Tailwind CSS의 특정 계층(base, components, utilities)에 추가할 수 있게 한다. 이는 Tailwind CSS의 구성 요소를 확장하거나 재정의할 때 유용하다.


Plugins

Tailwind CSS의 플러그인 기능을 사용하면 Tailwind의 기본 유틸리티 클래스 세트를 확장하거나 커스터마이즈할 수 있다. 플러그인은 새로운 유틸리티 클래스를 추가하거나, 기존의 클래스를 확장하거나, 새로운 기능을 Tailwind에 추가하는 데 사용된다.

  • daisyUI : Tailwind CSS의 확장으로, Tailwind CSS와 함께 사용할 수 있는 UI 컴포넌트 라이브러리. daisyUI는 Tailwind CSS의 유틸리티 클래스와 결합하여 재사용 가능한 UI 컴포넌트를 제공한다. 이를 통해 빠르게 웹 페이지를 구축할 수 있으며, 스타일링을 Tailwind CSS 방식으로 유지할 수 있다.

1

  • tailwind forms plugin
    npm install -D @tailwindcss/forms 설치
    tailwind.config.ts의 plugins에 plugin 넣어주기

정리 config theme에서 사용자 정의 클래스 생성(Tailwind의 기본 테마를 확장하거나 재정의)

globals.css의
@tailwind base; - 기본 브라우저의 재설정
@tailwind components; - 재사용 가능한 컴포넌트 스타일(유틸보다 복잡한 css규칙 ex:특정 버튼 전체 스타일)
@tailwind utilities; - config theme과 비슷하지만 Tailwind CSS의 모든 유틸리티 클래스를 포함하고 커스텀 유틸리티 클래스를 추가하는 개념

featured
Dahna
Written by Dahna Follow
Hi, I am Dahna, the author of this blog!
Tailwind2
Authentication UI