테일윈드 CSS

어떻게 만원짜리 e book 책 페이지 수가 1279쪽 ... 

 

vite + react + typescript 세팅 

npm create vite@latest
npm install tailwindcss @tailwindcss/vite
# src/index.css 를 @import "tailwindcss"; 아래로 대체
npm install -D @types/node

 

src/index.css

@import "tailwindcss";

 

 

tsconfig.json

    "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }

 

tsconfig.app.json

# compileOption 아래
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },

 

vite.config.ts

import path from "path" // 추가 
import tailwindcss from "@tailwindcss/vite" // 추가 
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()], // tailwindcss() 추가 
  resolve: { // 추가 
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

 

1장 : Tailwind CSS 소개 

반응형 디자인 

작은화면과 큰 화면에서 서로 다른 패딩을 갖는 div 를 원하면 

<div className="p-4 md:p-6 lg:p8">
	Responsive Padding
</div>

 

p-4 는 작은 화면의 패딩 적용, md lg 는 중간 및 큰 화면의 패딩을 조정합니다. 

 

사용자 정의

tailwind.config.js 파일을 통해 기본테마 수정할 수 있습니다. 

 

내장된 다크 모드 지원 

구성에서 다크 모드를 활성화한 다음 dark: 접두사를 사용하여 스타일을 조건부로 적용할 수 있습니다. 

 

JIT 모드(즉시 생성)

유틸리티 클래스 내에서 임의의 값도 직접 사용할 수 있어 개발자에게 강력합니다. 

 

CSS 컴파일 

npx tailwindcss build styles.css -o output.css

 

예제 프로젝트 구조

• my-project
  • node_modules/
  • src/
    • index.html
    • styles.css
    • tailwind.config.js
    • package.json
    • output.css

 

테일윈드 CSS 로 구축하기 

 

반응형 레이아웃 만들기 

 

플렉스 박스 유틸리티 

그리드 유틸리티 

이차원 레이아웃

 

애니메이션 및 전환 

추가 CSS 를 작성하지 않고도 호버 효과, 포커스 상태 등을 쉽게 추가할 수 있습니다. 

• hover:xxx 

 

사용자 정의 및 테마

 

사용자 정의 유틸리티 

프리셋 및 플러그인

plugins: [
	require('@tailwindcss/forms')
],

 

테일윈드 CSS로 최적화

 

퍼지 CSS

실제로 사용하는 클래스만 포함되므로 CSS 파일 크기가 크게 줄어듭니다.

 

성능 고려 사항

로드 시간을 단축하고 사용자 경험을 개선합니다.

 

테일윈드 CSS 와 기타 프레임워크 비교 

 

2. Tailwind CSS 사용의 이점

유틸리티 중심 접근 방식

 

 

맞춤형 디자인 시스템

 

 

탁월한 반응형 디자인 

 

브레이크포인트 유틸리티

테일윈드는 정의된 브레이크포인트 (sm, md, lg, xl, 2xl) 가 미리 포함되어 있어 즉시 사용할 수 있습니다. 

이 기능은 개발자들이 정의된 화면 크기에 따라 서로 다른 유틸리티 클래스를 적용할 수 있도록 하여 반응형 디자인 생성 과정을 단순화합니다.

 

향상된 개발자 경험 

 

성능 최적화

 

협업 향상 

 

다양한 프레임워크 지원 

 

포괄적인 생태계

 

플러그인 및 확장 

직관적인 도구 

Visual Studio Code 를 위한 테일윈드 CSS intelliSense 플러그인은 유틸리티 클래스의 자동 완성과 타입 안전성을 제공하여 오류를 최소화하면서 개발자 경험을 크게 향상시킵니다. 

 

3. Tailwind CSS 대 다른 CSS 프레임워크 

4. 개발 환경 설정 

사전 요구 사항 

 

• Node.js 
• npm

 

새 프로젝트 생성 

 

mkdir tailwind-project
cd tailwind-project
npm init -y 
touch index.html
...
npm install tailwindcss
npx tailwindcss init
...

 

styles.css 를 dist.styles.css 파일로 컴파일합니다. 

 

프레임워크와 함께 사용하기

 

React 

Vue.js 

Laravel

추가 프레임워크 통합

2장 : 시작하기 

필수 조건 

 

1. Node.js 
2. 패키지 관리자: npm 또는 Yarn
3. HTML/CSS 기본 지식 

 

설치 메서드

 

 

프로젝트 설정하기

 

기본 설정

생성된 tailwind.config.js 에서 기본 구성을 필요에 따라 수정할 수 있습니다. 

 

PostCSS 설정

 

postcss.config.js 가 올바르게 설정되어 있는지 확인하는 것이 중요합니다. 

그 다음 Tailwind 의 기본 스타일을 가져올 CSS 파일 (예: styles.css) 을 만듭니다. 

 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

변경 사항 감시하기

 

styles.css 파일의 변화를 감시하고, 컴파일된 CSS 파일 (output.css) 을 dist 폴더에 출력합니다. 

 

다음 단계

 

1. 컴포넌트 구축 시작하기
2. 플러그인 탐색하기
3. 프로덕션 최적화 

2. Tailwind 를 프로덕션에 구성하기 

Tailwind CSS 아키텍처 이해하기 

 

Tailwind CSS 주요 구성 요소는 다음과 같습니다.

• 유틸리티: 특정 스타일을 적용하는 단일 목적 클래스
  • p-4, mt-2, flex
• 컴포넌트: 재사용할 수 있는 유틸리티 그룹으로, 사용자 정의 CSS 에서 정의할 수 있습니다. 
• 플러그인: Tailweind 의 기능을 확장하여 추가 유틸리티 컴포넌트를 제공합니다. 

 

Tailwind 구성 설정하기 

 

구성 파일은 일반적으로 tailwind.config.js 라는 이름이며, 테마 사용자 지정, 안전 리스트, 제거 옵션 등의 다양한 측면을 제어할 수 있게 합니다. 

 

초기 설정

구성 파일을 만들기 위해 이 명령어를 실행하세요.

npx tailwindcss init

 

 

빌드 프로세스 최적화하기 

 

PostCSS 사용하기

PostCSS 는 자바스크립트 플러그인을 사용하여 CSS 를 변형하는 도구입니다. 

 

4. 첫 번째 Tailwind 컴포넌트 만들기

구성 파일 만들기

npx tailwindcss init

 

tailwindcss v4 부터는 CLI 가 포함되지 않으며, 따로 설치해야한다.

 

npm install -D tailwindcss-cli

 

 

그럴듯한 버튼이 되었다.

Class name 

• 배경색: bg-blue-500
• 텍스트 색상: text-white
• 폰트 스타일: font-bold
• 패딩: py-2, px-4
• 테두리 반경: rounded
• 호버 효과: hover:bg-blue-700 

상호작용성을 가진 버튼으로 강화하기 

 

React 에서는 클릭 이벤트를 이렇게 한다. 

Click 이벤트도 구현성공

function App() {
  return (
    <>
      <button
        className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
        onClick={() => alert("Button Clicked!")}
      >
        Click Me
      </button>
    </>
  );
}

 

카드 컴포넌트 만들기 

 

콘텐츠를 표시하는 데 사용할 수 있는 카드 컴포넌트를 만들어 보겠습니다.

 

카드 HTML 구조 

Class name

• 최대 너비: max-w-sm: 카드 크기 제한 
• 오버플로우 숨기기: overflow-hidden 카드 경계를 초과하는 모든 컨텐츠를 잘라냅니다. 
• 그림자: shadow-lg 는 깊이를 생성하는 큰 그림자 효과를 적용합니다. 
• 마진: mx-0, my-0, mt-0, ml-0, mr-0, mb-0 
• 폰트 사이즈: text-XXX, xs, sm, base, lg, xl, 2xl ~ 9xl  

 

 

3장 : 핵심 개념 

4장 : 레이아웃 및 디자인 

1. Flexbox 유틸리티 

유연한 박스 레이아웃은 ㅡ컨테이너 안의 아이템을 효율적으로 정렬하고 공간을 분배할 수 있는 강력한 레이아웃 모듈입니다. 

기본 Flex 컨테이너 유틸리티 

 

Flexbox 활성화 

각각의 아이템에 적용된 flex-1 클래스 덕분에 균등하게 배치됩니다. 

    <div className="flex">
      <div className="flex-1">Item 1</div>
      <div className="flex-1">Item 2</div>
    </div>

 

방향 유틸리티 

flex-direction 속성은 Flex 아이템이 배치되는 방향을 변경합니다. 

테일윈드는 네 가지 주요 방향: row, row-reverse, column, column-reverse 에 대한 유틸리티를 제공합니다. 

 

 

    <div className="flex flex-col">
      <div className="flex-1">Item 1</div>
      <div className="flex-1">Item 2</div>
    </div>

 

래핑 유틸리티

flex-wrap 속성은 Flex 아이템이 여러 줄로 래핑될지를 정의합니다. 테일윈드는 이를 위해 두 가지 유틸리티를 제공합니다.

1. 래핑 없음: 아이템은 한 줄에 유지됩니다.
2. 래핑: 아이템은 여러 줄로 래핑됩니다. 

default 는 nowrap 이므로, 여러줄로 하고싶다면 flex-wrap 을 쓴다. 

    <div className="flex flex-wrap">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
      <div>Item 3</div>
    </div>

 

Flex 아이템 유틸리티 

 

Felx 컨테이너 설정 후, Flexbox 아이템 유틸리티를 사용하여 개별 아이템을 스타일링할 수 있습니다.

 

정렬

Flexbox 는 Flex 아이템을 정렬하기 위한 몇 가지 옵션을 제공합니다. 

 

주 축 정렬

justify-content 속성은 Flex 아이템을 주 축을 따라 정렬합니다. 

• justify-start: 아이템이 Flex 컨테이너의 시작 쪽으로 배치됩니다. 
• justify-end: 아이템이 끝 쪽으로 배치됩니다. 
• justify-center: 아이템이 중앙에 배치됩니다.
• justify-between: 아이템이 균등하게 분배되며, 첫 번째 아이템은 시작에, 마지막 아이템은 끝에 위치합니다.
• justify-around: 아이템은 그들 사이에 공간을 두고 균등하게 분배됩니다. 
• justify-evenly: 아이템은 그들 주위에 균등한 공간을 두고 분배됩니다. 

 

교차 축 정렬

align-items 속성은 Flex 아이템을 교차 축을 따라 정렬합니다. 

• items-start: 아이템을 시작 쪽으로 정렬합니다. 
• item-end
• item-center
• item-baseline
• item-stretch: 기본 동작 

align-content 속성은 여러 줄의 Flex 아이템이 있을 때 수직으로 간격을 설정하는 데 사용됩니다. 

• content-start
• content-end
• content-center
• content-between
• content-around
• content-evenly 

    <>
    <div className="flex flex-wrap h-100 content-end">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
      <div>Item 7</div>
      <div>Item 8</div>
      <div>Item 9</div>
    </div>
    </>

 

성장 및 축소 

Flex 아이템이 성장하고 줄어드는 능력은 flex-grow, flex-shrink, flex 프로퍼티로 제어됩니다.

• flex-grow: Flex 아이템이 필요한 경우 성장할 능력을 정의합니다.
• flex-shrink: Flex 아이템이 필요할 경우 줄어들 능력을 정의합니다. 

Flex 성장

    <div className="flex">
      <div className="flex-grow">Item 1</div>
      <div className="flex-grow-0">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
      <div>Item 7</div>
      <div>Item 8</div>
      <div>Item 9</div>
    </div>

 

 

순서

order 속성은 HTML 구조를 변경하지 않고 아이템의 순서를 재배치할 수 있게 해줍니다. 

    <div className="flex">
      <div className="order-2">Item 1</div>
      <div className="order-1">Item 2</div>
    </div>

 

반응형 Flex 유틸리티 

 

Tablet 728px

Mobile L 425px

 

    <div className="flex md:flex-row flex-col">
      <div className="order-2">Item 1</div>
      <div className="order-1">Item 2</div>
    </div>

 

md 이하는 flex-row 가 된다. 

 

Flexbox 의 일반적인 패턴 

 

중심 아이템

아이템을 수직 및 수평으로 모두 중앙에 배치 하려면: 

    <div className="flex h-screen items-center justify-center">
      <div>Centered Item</div>
    </div>

 

동일한 너비의 열 

반응형 동일 너비의 열을 만들려면 

    <div className="flex flex-wrap">
      <div className="flex-1">Column 1</div>
      <div className="flex-1">Column 2</div>
      <div className="flex-1">Column 3</div>
    </div>

 

중첩된 Flex 레이아웃

    <div className="flex">
      <div className="flex-1">
        <div className="flex flex-col">
          <div>Item A</div>
          <div>Item B</div>
        </div>
      </div>
      <div className="flex-1">
        Item 2
      </div>
    </div>

 

테일윈드 CSS Flexbox 유틸리티의 장점 

 

2. 그리드 레이아웃 유틸리티 

 

 

5장 : 타이포그래피 및 텍스트 

6장 : 요소 스타일 지정

7장 : 컴포넌트 및 플러그인 

8장 : 고급 기술 

9장 : 모범 사례 

10장 : 리소스 및 커뮤니티 

부록