Tailwind CSS 튜토리얼: 입문서부터 전문가용까지의 최종 실용 가이드

Tailwind CSS는 무엇인가?

Tailwind CSS는 유틸리티 优先의 CSS 프레임워크로, HTML(또는 JSX, Vue 템플릿 등)에서 직접 조합하여 사용자 정의 인터페이스를 빠르게 구축할 수 있도록 하기 위한 일련의 저수준, 단일 용도의 CSS 클래스를 제공합니다. Bootstrap 등과 달리, Tailwind CSS는 버튼, 카드 등과 같은 미리 정의된 구성 요소를 제공하지 않지만, 모든 디자인을 구축하는 데 필요한 기본 도구 세트를 제공합니다.

이러한 실용주의적인 접근 방식은 개발자들이 구성 요소에 맞는 사용자 정의 CSS를 작성하거나, HTML 및 CSS 파일을 자주 전환할 필요가 없음을 의미합니다. 이러한 실용주의적인 접근 방식은 개발자들이 HTML 내에서 직접 다양한 구성 요소(예: <)를 적용할 수 있게 해줍니다. text-blue-600、p-4、bg-gray-100 해당 클래스를 사용하면, 텍스트 색상, 내부 여백 및 배경 색상을 설정할 수 있습니다. 이것은 개발 효율성을 크게 향상시키고, 스타일과 구조를 밀접히 연계하며, CSS 파일의 크기와 복잡성을 줄여줍니다.

Tailwind CSS의 핵심 디자인 철학은 “제한이 창의력을 만들어내는 것'입니다. 이 철학은 디자인 시스템의 간격, 색상, 글꼴 크기 등의 스케일을 준수하는 잘 설계된 규칙 세트를 통해 프로젝트 디자인의 일관성을 보장하며, 동시에 유연성을 제공합니다. 개발자들은 이러한 사전 정의된 규칙 전체를 기반으로 독특한 디자인을 만들 수 있고, 스타일의 통제되지 않는 확산에 대한 우려 없이 그렇게 할 수 있습니다.

Tailwind CSS를 사용하기 시작하는 방법

Tailwind CSS를 프로젝트에 통합할 수 있는 여러 방법이 있습니다. 가장 권장되는 방법은 PostCSS 플러그인으로 설치하는 것입니다. 이는 Tailwind의 최적화 기능을 최대한 활용할 수 있게 해 줍니다.

npm 또는 yarn을 사용하여 설치하세요.

먼저, 패키지 매니저를 통해 프로젝트를 초기화하고 Tailwind CSS와 그 종속 파일을 설치합니다. 주요 명령어는 설치입니다. tailwindcss、postcss 그리고 autoprefixer。

npm install -D tailwindcss postcss autoprefixer

설치가 완료되면, 아래 명령을 실행하여 Tailwind CSS 및 PostCSS의 구성 파일을 생성하십시오. 실행하세요. npx tailwindcss init -p 동시에 생성될 것입니다. tailwind.config.js 그리고 postcss.config.js 파일.

npx tailwindcss init -p

구성 템플릿 경로

생성된 tailwind.config.js 파일 내에서 당신은 구성해야 합니다. content 이 필드는 Tailwind가 어떤 파일의 클래스 이름을 스캔해야 하는지 알려줍니다. 일반적으로 HTML, JavaScript, JSX 또는 Vue 파일이 포함됩니다. 이는 매우 중요합니다. Tailwind는 생산 버전에서 “PurgeCSS'라는 메커니즘을 사용하여 사용되지 않은 CSS를 제거하여 최소한의 스타일 파일을 생성합니다.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

스타일 임포트 명령어

당신의 주 CSS 파일(예를 들어…)에서… src/styles.css 또는 src/index.css이 게임에서는 In this game, you use @tailwind Tailwind의 핵심 스타일을 인제트하기 위한 지시문입니다.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그런 다음 프로젝트의 인트로파일에 CSS 파일을 포함시키세요. 위의 단계를 완료한 후 HTML에서 Tailwind의 유틸리티 클래스를 사용할 수 있습니다.

핵심 실용 클래스 및 일반적인 패턴

Tailwind CSS의 클래스 이름은 매우 의미 있고 예측 가능하며, 단순한 명명 패턴인 속성-값(또는 속성-브레이크포인트-값)을 따른다.

레이아웃과 간격 (Layout and Spacing)

이것은 가장 많이 사용되는 클래스 집합입니다. 예를 들면,flex ελαστικ 박스 레이아웃을 설정하는 데 사용됩니다.p-4 표현하다 padding: 1rem마진을 사용하세요. m-*내부 여백을 사용하세요. p-*숫자는 일반적으로 비례적으로 조정된 간격 체계(예: 0, 1, 2, 4, 6)에 해당합니다.

<div class="flex justify-between items-center p-4">
  <div class="ml-2">왼쪽에</div>
  <div class="mr-2">오른쪽에</div>
</div>

색상과 배경

당신은 간단하게 텍스트 색상, 배경 색상 및 테두리 색상을 설정할 수 있습니다. 색상 시스템은 다양한 팔레트를 제공하며, 예를 들면 다음과 같습니다. text-blue-500、bg-gray-100、border-red-300숫자가 클수록 색상이 보통 더 깊습니다(예를 들면,blue-100 아주 얕습니다.blue-900 그것은 매우 깊습니다.

반응형 디자인

Tailwind는 모바일 优先 전략을 채택했습니다. 모든 유틸리티 클래스는 기본적으로 모바일 장치를 대상으로 합니다. 더 큰 화면에 스타일을 추가하려면 클래스 이름 앞에 브레이크포인트 접두사를 추가해야 합니다. md:、lg:이로 인해 반응형 인터페이스를 구축하는 것이 매우 간단해졌습니다.

<div class="text-base md:text-lg lg:text-xl">
  이 텍스트는 스마트폰에서 기본 크기로 표시되고, 태블릿에서 더 큰 크기로 표시되며, 데스크톱에서는 더 큰 크기로 표시됩니다.
</div>

悬停, 초점 등의 상태

상태 접두사를 추가하여 요소의 서로 다른 상태에 스타일을 적용할 수 있습니다. 예를 들어,hover:bg-blue-600 마우스를 오버할 때 배경색이 변합니다.focus:ring-2 요소에 포커스가 적용되면 원형 테두리가 추가됩니다.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

고급 기술 및 사용자 정의 설정

기초를 습득한 후에는 고급 기술 및 사용자 정의 설정을 통해 Tailwind의 잠재력을 최대한 발휘할 수 있습니다.

구성 요소 클래스 추출

실용주의가 핵심 개념이긴 하지만, HTML에서 긴 클래스 목록을 반복하지 않기 위해 다음과 같은 방법을 사용할 수 있습니다. @apply CSS에서 일반적인 스타일 조합을 추출하고 재사용하며, 자신만의 “구성 요소 클래스'를 만들 수 있는 지시사항입니다.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

그런 다음, HTML에서는 간단히 사용하기만 하면 됩니다. class="btn-primary" 그렇게 하면 됩니다.

커스텀 디자인 시스템 (Custom Design System)

Tailwind CSS의 모든 기본값은 설정할 수 있습니다. 이를 수정하기 위해서는… tailwind.config.js 문서를 통해 색상, 글꼴, 간격 등을 사용자 정의하여 브랜드나 디자인 가이드라인과 완벽히 일치하게 만들 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

정의가 완료되면 바로 사용할 수 있습니다. text-brand-blue 또는 p-84 이런 종류의 사용자 정의 클래스입니다.

JIT 모드를 사용하세요.

Tailwind CSS v2.1부터 실시간(Just-in-Time, JIT) 엔진이 도입되었습니다. 이전에는 모든 가능한 클래스가 포함된 거대한 CSS 파일을 미리 생성해야 했지만, 이제는 템플릿을 작성할 때 필요한 CSS를 동적으로 생성할 수 있습니다. 이를 통해 성능이 크게 향상되었고, 임의의 값 변형과 같이 기존 모드에서는 불가능했던 기능도 지원됩니다.

JIT 모드를 활성화하려면 그저 <에 있는 옵션을 선택하면 됩니다. tailwind.config.js 중국어 설정 mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

활성화된 후, 당신은 심지어 다음과 같은 것들을 사용할 수 있습니다. w-[200px] 또는 top-[-10px] 이러한 임의의 값 클래스는 개발에 큰 유연성을 제공합니다.

요약

Tailwind CSS는 그 독특한 유틸리티 우선 방식을 통해 프론트엔드 개발자들의 스타일링 방식을 완전히 바꿔놓았습니다. CSS 파일에서 스타일 결정을 분리하여 HTML 태그로 이동하며, 많은 단일 기능의 원자 클래스를 조합하여 효율적이고 일관되며 고도로 사용자 정의 가능한 인터페이스 개발을 실현했습니다. 간단한 설치 및 구성에서부터 핵심 레이아웃, 색상, 반응형 및 상태 클래스, 고급 사용자 정의 설정, 구성 요소 추출 및 JIT 모드에 이르기까지, Tailwind는 강력하고 유연한 도구 세트를 제공합니다. 잘 설계된 제한 조건 내에서 창작을 장려하며, 디자인의 일관성을 보장하고 개발자에게 충분한 자유를 제공하여 현대 웹 프로젝트의 신속한 프로토타이핑 및 제품 개발을 강력히 지원합니다.

자주 묻는 질문

Tailwind CSS가 HTML을 부풀리게 만들까요?

실제로 Tailwind CSS를 사용하면 HTML 요소에 많은 클래스 이름이 추가되므로 HTML이 다소 길어 보일 수 있습니다.

그러나 이러한 “불필요한 복잡성'은 구조적이고 예측 가능하며, 사실 CSS의 복잡성을 HTML로 옮겨주어 더 쉽게 관리할 수 있게 해줍니다. 더 중요한 점은, 구성을 통해 이를 실현할 수 있다는 것입니다. content 이 경로를 통해 제작 도구는 모든 사용되지 않은 CSS 클래스를 제거하며, 최종 생성된 CSS 파일은 일반적으로 기존 수동 작성 또는 구성 요소 라이브러리를 사용하는 경우보다 훨씬 크기가 작습니다. 따라서 성능 면에서 더 우수합니다.

Tailwind CSS의 기본 스타일을 어떻게 덮어쓰거나 수정할 수 있을까요?

여러 방법으로 기본 스타일을 재정의할 수 있습니다. 가장 추천되는 방법은 안에 코드를 추가하는 것입니다. tailwind.config.js 문서의 theme.extend 일부는 확장되어, 기존 시스템에 영향을 미치지 않으면서 새 값을 추가할 수 있습니다. 만일 색상 같은 주제 키를 완전히 교체하려는 경우에는 직접 교체하면 됩니다. theme 그것을 재정의하세요. 게다가, 실용적인 클래스 앞에 사용하세요. !important 수정자(예: ) !text-red-500또는 CSS의 더 높은 특정성 선택자를 사용하여 스타일의 오버라이드도 가능합니다.

Tailwind CSS는 어떤 프론트엔드 프레임워크와 함께 사용하기에 적합한가요?

Tailwind CSS는 거의 모든 현대적인 프론트엔드 프레임워크와 완벽하게 통합됩니다. React, Vue, Angular, Svelte 등을 기본적으로 지원합니다. 프레임워크의 템플릿 또는 JSX에서 클래스 이름을 올바르게 사용하고 빌드 프로세스에서 PostCSS와 Tailwind를 구성해야 합니다. 많은 프레임워크(Next.js, Vite 등)는 심지어 공식 Tailwind CSS 통합 예시나 플러그인을 제공하여 통합 과정을 더 원활하게 만듭니다.

Tailwind CSS를 사용하려면 수동으로 CSS를 쓰는 것을 포기해야 하나요?

전혀 필요 없습니다. 테일윈드 CSS는 수동으로 CSS를 쓰는 것을 방해하지 않고, 오히려 보완해 줍니다. 여전히 프로젝트에서 사용자 정의 CSS 파일을 작성할 수 있습니다. @apply 이 지시어를 통해 사용자는 CSS 사용자 정의에서 도구 클래스를 재사용할 수 있습니다. 아주 특정한 스타일이나 유용한 클래스 조합으로 구현할 수 없는 스타일, 혹은 키프레임 애니메이션 같은 복잡한 CSS 기능이 필요한 경우에는 여전히 수동으로 CSS를 작성해야 합니다. Tailwind는 프로젝트에서 90% 이상의 일반적인 스타일 요구사항을 더 효율적으로 처리할 수 있는 방법을 제공해 줍니다.