Tailwind v 준비하기

작사: Oscar Jite-Orimiono✏️

'순풍'이라는 단어는 말 그대로 비행기나 배의 이동 경로와 같은 방향으로 부는 바람을 의미합니다. 이는 물체가 더 빠르게 이동하고 목적지에 더 빨리 도달하도록 도와 속도와 효율성을 보장합니다.

Tailwind CSS는 "HTML을 떠나지 않고도 최신 웹사이트를 신속하게 구축"할 수 있게 해주는 유틸리티 우선 프레임워크입니다. 모든 개발자가 좋아하는 것은 아니지만 Tailwind CSS는 2019년 출시 이후 상당한 인기를 얻었습니다.

오늘은 '상위 [번호 삽입] CSS 프레임워크'를 검색하면 Bootstrap 및 Bulma와 같은 유명 이름과 함께 Tailwind CSS가 나열되어 있는 것을 발견할 수 있습니다.

이 기사에서는 다음 버전인 Tailwind v4.0에 대한 미리보기와 심층 분석을 제공합니다. 기존 프로젝트를 마이그레이션하기 위한 전략과 Tailwind v4.0의 새로운 기능을 보여주는 예시를 다루겠습니다. 또한 이를 유사한 CSS 프레임워크와 비교하고 이 프레임워크 사용의 이점과 한계를 살펴보겠습니다.

Tailwind v4.0 시작하기

Tailwind v4.0은 수개월에 걸쳐 개발되었으며, 첫 번째 공개 베타 버전은 2024년 11월에 출시되었습니다.

자세한 내용은 출시 전 문서를 참조하세요. 하지만 이 가이드에서는 개발자가 Tailwind CSS v4.0에서 기대할 수 있는 새롭고 흥미로운 여러 기능 중 일부를 강조합니다.

새로운 성능 엔진

Tailwind 팀은 2024년 3월에 새로운 성능 엔진인 Tailwind Oxide를 발표했습니다. 일부 이점에는 빌드 프로세스 속도를 높이기 위한 통합 도구 체인과 단순화된 구성이 포함됩니다.

CSS 우선 구성

현재 Tailwind 버전에서는 tailwind.config.js 파일을 사용하여 Tailwind의 기본 디자인 토큰을 재정의할 수 있습니다. 사용자 정의 유틸리티 클래스 및 테마를 추가하고 플러그인을 비활성화하는 등의 작업을 수행할 수 있는 사용자 정의 허브입니다.

가장 중요한 기능은 Tailwind가 관련 유틸리티 클래스 이름을 검색하고 올바른 출력을 생성할 수 있도록 프로젝트의 콘텐츠 소스를 정의하는 것입니다.

Tailwind v3를 사용하여 새 프로젝트를 설정할 때 tailwind.config.js 파일의 기본 코드는 다음과 같습니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

제거된 지시어

구성 파일을 설정한 후 다음 단계에서는 Tailwind 지시문을 index.css 파일에 추가했습니다.

Tailwind v3의 명령은 다음과 같습니다.

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

Tailwind v4에서는 tailwind.config.js 파일과 @tailwind 지시어가 필요하지 않습니다. 기본 CSS 파일로 "tailwindcss"만 가져오기만 하면 됩니다.

@import "tailwindcss";

이렇게 하면 새 프로젝트를 설정할 때의 단계 수와 파일 수가 줄어듭니다.

JS 구성 파일을 계속 사용할 수 있습니다. 예를 들어 이미 기존 v3 프로젝트가 있는 경우 새로운 @config 지시어를 사용하여 CSS 파일에 로드하면 됩니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

그러나 corePlugins, important 및 구분 기호와 같은 모든 기능이 전체 v4.0 릴리스에서 지원되는 것은 아닙니다. 허용 목록과 같은 일부 옵션은 동작 변경으로 반환될 수 있습니다.

소스 감지

포함하고 싶지 않은 파일이 있는 경우 Tailwind를 가져올 때 source() 함수를 사용하여 자동 감지를 제한할 수 있습니다.

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

Tailwind가 기본적으로 감지하지 못하는 추가 소스(예: .gitignore 파일의 소스)의 경우 @source 지시문을 사용하여 추가할 수 있습니다.

@import "tailwindcss";

소스 감지를 완전히 비활성화할 수도 있습니다.

@import "tailwindcss";

@config "../../tailwind.config.js";

프리플라이트 비활성화

프로젝트에 필요한 특정 개별 레이어를 가져오고 Tailwind의 기본 스타일을 비활성화할 수 있습니다.

@import "tailwindcss" source("../src");

테마 사용자 정의

새로운 CSS 우선 접근 방식을 사용하면 Tailwind 프로젝트에 맞춤 스타일을 더 쉽게 추가할 수 있습니다. 모든 사용자 정의는 JavaScript 구성 파일 대신 기본 CSS 파일에 직접 추가됩니다.

예를 들어 Tailwind CSS v3에서 맞춤 테마에 대한 새로운 색상을 구성하려면 tailwind.config.js 파일의 테마 섹션에서 새 유틸리티 클래스를 정의해야 합니다.

JavaScript 구성 파일에서 수행하는 방법은 다음과 같습니다.

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

HTML 파일에 클래스를 추가하는 방법은 다음과 같습니다.

@import "tailwindcss" source(none);

이 예에서 유틸리티 클래스는 bg-ground, text-light 및 text-lilac입니다.

Tailwind CSS v4.0에서는 새로운 @theme 지시어를 사용하여 CSS의 모든 맞춤설정을 구성합니다.

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

그런 다음 유틸리티 클래스가 HTML에 추가됩니다. 기본 Tailwind 색상처럼 동일한 색상의 다양한 색조를 선택할 수 있습니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

VS Code로 테스트하는 경우 @import 지시문이 오류로 강조 표시될 수 있지만 걱정하지 마세요. 제대로 작동할 것입니다.

위의 예는 Tailwind CSS 및 React를 사용하여 생성되었으므로 HTML에 클래스가 아닌 className이 있는 이유입니다. 작업 중인 프레임워크에 관계없이 유틸리티는 동일하게 유지됩니다.

테마 변수

이전 예에서 CSS 변수가 Tailwind v4.0의 모든 테마 스타일을 구동한다는 것을 알 수 있습니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

v4.0에서는 특정 테마 네임스페이스, 즉 색상, 글꼴, 텍스트 등에 대한 기본 유틸리티 또는 전체 Tailwind 테마를 재정의하고 직접 구성할 수 있습니다. 기본 CSS 파일에서 기본적으로 모든 Tailwind 유틸리티에 대해 사용자 정의 스타일을 쉽게 구성할 수 있습니다. 전체 기본 테마를 재정의하려면 --*:initial을 사용하세요. 기본 Tailwind 글꼴을 재정의하고 자신만의 글꼴을 정의하려면 --font-*:initial과 사용자 정의 스타일을 차례로 사용하세요.

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

이 경우 글꼴 표시는 프로젝트에서 사용할 수 있는 유일한 글꼴 모음 유틸리티입니다.

이중 대시를 사용하여 사용자 정의 속성에 대한 기본 스타일을 설정할 수 있습니다. 다음은 기본 Tailwind CSS 글꼴과 텍스트 스타일이 적용된 페이지입니다. 이 페이지의 HTML 마크업은 다음과 같습니다.

@import "tailwindcss";

이전 예의 사용자 정의 색상을 사용하고 새로운 글꼴 및 텍스트 스타일을 구성합니다.

@import "tailwindcss";

@config "../../tailwind.config.js";

이 예에서는 두 개의 글꼴을 가져와 로고와 h1 헤더에 사용할 --font-display 및 --font-logo 변수에 저장합니다. 또한 두 가지 모두에 대해 새로운 텍스트 크기와 기본 스타일을 구성하고 있습니다.

따라서 HTML에 유틸리티 클래스 text-logo를 추가하면 기본적으로 요소의 글꼴 크기는 1.5rem, 글꼴 두께는 700이 됩니다. 마찬가지로 클래스 이름이 text-big인 모든 요소는 기본적으로 글꼴 크기가 6rem, 글꼴 두께가 700, 문자 간격이 -0.025em입니다.

이제 HTML 파일에 새 유틸리티 클래스를 추가합니다.

@import "tailwindcss" source("../src");

다음은 사용자 정의 스타일이 적용된 페이지의 스크린샷입니다. Tailwind v4.0에서는 여러 클래스를 하나의 사용자 정의 유틸리티로 대체할 수 있으므로 기본 Tailwind 값에 대한 종속성이 줄어듭니다. 이 예에서는 text-big 클래스 이름이 h1 헤더의 text-5xl 및 text-bold 유틸리티 클래스를 대체합니다.

이 역시 특정 네임스페이스에만 국한되지 않고 모든 유틸리티에서 이 작업을 수행할 수 있습니다.

단순화된 테마 구성

일부 유틸리티는 더 이상 Tailwind v4.0의 테마 구성을 기반으로 하지 않습니다. 추가 구성 없이 HTML 파일에서 직접 원하는 것을 정확하게 지정할 수 있습니다.

Tailwind v3에서는 tailwind.config.js 파일의 열 수를 정의해야 하지만 Tailwind v4.0에서는 아주 작은 것부터 Grid-cols-5만큼 큰 것까지 모든 숫자를 사용할 수 있습니다. 그리드-열-73. 이는 z-index 유틸리티(예: z-40) 및 opacity-*에도 적용됩니다.

Tailwind v4.0에는 data-*와 같은 변형에 대한 지원도 내장되어 있습니다. 임의의 값 없이 사용할 수 있습니다.

이러한 변경의 주요 이점은 개발자가 필수적이지 않거나 핵심이 아닌 디자인 토큰을 구성하는 데 소요되는 시간을 줄일 수 있다는 것입니다.

동적 간격 스케일

m-*, w-*, mt-*, px-* 등과 같은 간격 유틸리티는 기본 Tailwind v4에 정의된 기본 간격 값 0.25rem을 사용하여 동적으로 생성됩니다. 0 테마.

기본 간격 값의 모든 배수는 간격 척도에서 사용할 수 있습니다. 따라서 mt-1이 0.25rem이면 mt-2는 0.25rem에 2를 곱한 값인 0.5rem이 되고 mt-21은 5.25rem이 됩니다.

명시적으로 정의되지 않은 값으로 간격 유틸리티를 사용할 수 있습니다. Tailwind v3에서는 mt-[5.25rem] 또는 맞춤 테마와 같은 임의의 값을 사용해야 합니다. 추가 구성이 필요 없으며 보다 일관된 디자인을 만들 수 있습니다.

사용 가능한 간격 값을 제한하려면 기본 변수를 비활성화하고 사용자 정의 배율을 정의할 수 있습니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 설정을 사용하면 모든 Tailwind 간격 유틸리티는 특별히 정의된 값만 사용합니다.

업데이트된 색상 팔레트

Tailwind v4는 기본 RGB 색상 팔레트에서 oklch로 이동하여 더 생생한 색상을 제공하고 RGB보다 제한이 적습니다.

컨테이너 쿼리 지원

이제 Tailwind CSS v4.0에서는 컨테이너 쿼리가 기본적으로 지원됩니다. 반응형 컨테이너를 생성하기 위해 @tailwindcss/container-queries 플러그인이 필요하지 않습니다.

컨테이너 쿼리는 상위 컨테이너의 크기에 따라 요소에 스타일을 적용하는 데 사용됩니다. 이는 사이트의 레이아웃이 전체 뷰포트가 아닌 개별 구성 요소에 맞춰 조정된다는 의미입니다.

v4.0에서는 상위 요소에 @container 유틸리티를 추가하여 컨테이너 쿼리를 생성합니다. 하위 요소의 경우 @sm 및 @lg와 같은 반응형 유틸리티를 사용하여 상위 요소의 크기에 따라 스타일을 적용합니다.

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

Tailwind v4.0에는 최대 너비 컨테이너 쿼리를 위한 새로운 @max-* 변형도 도입되었습니다. 컨테이너가 특정 크기 이하로 줄어들면 스타일을 추가하기가 더 쉬워집니다. @min-* 및 @max-*를 결합하여 컨테이너 쿼리 범위를 정의할 수 있습니다.

@import "tailwindcss";

이 코드에서는 상위 컨테이너의 너비가 md와 xl(768px 및 1280px) 사이에 있을 때 하위 div가 숨겨집니다.

컨테이너 쿼리의 사용 사례에는 탐색, 사이드바, 카드, 이미지 갤러리, 반응형 텍스트가 포함됩니다. 또한 더 많은 유연성을 제공하고 여러 브라우저에서 잘 지원되므로 v4.0 프로젝트에서 사용할 수 있습니다.

v3에서 Tailwind CSS v4.0으로 마이그레이션

v3 프로젝트를 v4로 업그레이드하려는 경우 Tailwind에서 대부분의 작업을 수행할 수 있는 업그레이드 도구를 제공합니다. 프로젝트를 업그레이드하려면 다음 명령을 실행하세요.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

업그레이드 도구는 종속성 업데이트, JS 구성 파일을 CSS로 마이그레이션, 템플릿 파일의 변경 사항 처리와 같은 여러 작업을 자동화합니다.

Tailwind에서는 업그레이드를 위해 새 브랜치를 사용하고 기본 브랜치를 그대로 유지하며 차이점을 주의 깊게 검토할 것을 권장합니다. git diff 명령을 실행하면 프로젝트의 변경 사항을 보고 이해하는 데 도움이 됩니다. 또한 브라우저에서 프로젝트를 테스트하여 모든 것이 제대로 작동하는지 확인하고 싶을 것입니다.

복잡한 프로젝트에서는 수동 조정이 필요할 수 있으며, Tailwind에서는 주요 변경 사항과 이에 적응하는 방법을 설명했습니다. 이에 대해서는 아래에서 다루겠습니다.

종속성 변경

PostCSS 플러그인: v4.0에서는 이제 PostCSS 플러그인을 전용 패키지 @tailwindcss/postcss로 사용할 수 있습니다. 기존 프로젝트의 postcss.config.mjs 파일에서 postcss-import 및 자동 접두사를 제거할 수 있습니다.

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

새 프로젝트를 시작하는 경우 이제 다음 명령을 실행하여 PostCSS 플러그인과 함께 Tailwind를 설치할 수 있습니다.

@import "tailwindcss";

Vite 플러그인: Tailwind CSS v4.0에는 새로운 전용 Vite 플러그인도 있으므로 PostCSS 플러그인에서 마이그레이션하는 것이 좋습니다.

@import "tailwindcss";

@config "../../tailwind.config.js";

PostCSS에서 본 것처럼 새 프로젝트를 설정할 때 Vite 플러그인과 함께 v4.0을 설치할 수 있습니다.

@import "tailwindcss" source("../src");

Tailwind CLI: CLI 도구를 사용하는 것은 Tailwind CSS를 설정하는 가장 쉽고 빠른 방법이며, 이제 전용 @tailwind/cli 패키지에 있습니다. 이에 따라 빌드 명령을 업데이트해야 합니다.

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

더 이상 사용되지 않는 유틸리티

오래되었거나 문서화되지 않은 여러 유틸리티가 제거되고 최신 대안으로 대체되었습니다.

컨테이너 유틸리티 구성

v4.0에서는 @utility를 사용하여 컨테이너 유틸리티를 구성합니다.

@import "tailwindcss" source(none);

v4.0에는 중앙 및 패딩과 같은 구성 옵션이 없습니다.

기본 배율 변경

모든 그림자, 흐림 및 테두리 반경 유틸리티에 기본 배율 조정이 적용되어 명명된 값이 있는지 확인했습니다. 프로젝트의 각 유틸리티를 교체하여 문제가 발생하지 않도록 해야 합니다. 달라보여요.

기본 테두리 색상 변경

v3에서는 기본 테두리 색상이 회색-200입니다. 테두리 유틸리티를 사용할 때 색상을 명시적으로 설정할 필요가 없습니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSS v4에서는 테두리 색상이 currentColor로 업데이트되며, 테두리 유틸리티를 사용하는 위치에 색상을 지정하지 않으면 현재 프로젝트의 시각적 변화가 발생할 수 있습니다.

v4.0의 기본 테두리 색상은 다음과 같습니다. v3 기본 동작을 유지하려면 프로젝트에 다음 CSS 줄을 추가할 수 있습니다.

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

기본 링 너비 변경

링 유틸리티는 v3에서 3px 링을 추가하지만 v4에서는 기본값이 1px입니다. 프로젝트를 업데이트할 때 링 유틸리티의 사용을 ring-3으로 대체하여 모양을 유지하세요.

기본 자리 표시자 변경

v4에서는 자리 표시자 텍스트가 기본적으로 불투명도 50%의 현재 텍스트 색상을 사용합니다. v3에서는 회색-400 색상을 사용하며, 이 동작을 유지하려면 다음을 CSS에 추가하세요.

@import "tailwindcss";

개요 변경

또한 v4에서는 개요 없음 유틸리티가 v3에서처럼 투명한 2px 윤곽선을 추가하지 않습니다. v4에는 v3의 개요 없음처럼 작동하는 새로운 개요 숨김 유틸리티가 있습니다.

프로젝트를 업그레이드할 때 개요를 완전히 제거하려는 경우를 제외하고는 현재 상태를 유지하기 위해 개요 없음을 개요 숨김으로 바꿔야 합니다.

사용자 정의 유틸리티 추가

이제 사용자 정의 유틸리티가 @layer 유틸리티 대신 새로운 @utility API와 함께 작동합니다. 이러한 변경으로 인해 기본 캐스케이드 레이어와의 호환성이 보장됩니다.

이제는 단일 클래스 이름일 뿐이며 더 이상 복잡한 선택자가 아닙니다.

@import "tailwindcss";

@config "../../tailwind.config.js";

순서에 따른 변형 스태킹

Tailwind v4.0은 첫 번째 및 마지막과 같은 변형을 왼쪽에서 오른쪽으로 스택하므로 프로젝트에서 변형을 주문해야 합니다.

임의 값의 CSS 변수

새로운 CSS 표준의 모호함을 피하기 위해 임의 값의 변수 구문이 대괄호에서 괄호로 변경되었습니다. 프로젝트에서 이를 업데이트해야 합니다:

@import "tailwindcss" source("../src");

theme() 함수 사용하기

Tailwind CSS v4.0은 모든 테마 값에 대한 변수를 생성하므로 theme() 함수가 필요하지 않습니다. Tailwind에서는 가능한 경우 프로젝트의 모든 theme() 함수를 CSS 변수로 대체할 것을 권장합니다.

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Tailwind v4.0의 변경 사항에 대한 자세한 내용은 출시 전 문서를 참조하세요.

Tailwind 및 대체 CSS 프레임워크

Tailwind CSS의 가장 확실한 대안은 세계에서 가장 인기 있는 CSS 프레임워크인 Bootstrap입니다. 여기에는 사전 정의된 구성 요소의 광범위한 라이브러리가 있습니다.

Bootstrap은 아마도 Tailwind CSS보다 초보자에게 더 친숙할 것입니다. 구체적이고 간단한 클래스 이름을 사용하여 즉시 사용 가능한 구성 요소를 만들 수 있습니다. Tailwind를 사용하려면 유틸리티와 기본 CSS 규칙을 이해해야 합니다.

Tailwind CSS에 비해 Bootstrap의 또 다른 장점은 기본적으로 JavaScript가 포함되어 있어 더 많은 백엔드 작업을 수행할 수 있다는 것입니다. Tailwind CSS는 JS 프레임워크와 결합되어야 합니다.

그러나 Bootstrap은 Tailwind CSS만큼 사용자 정의가 가능하거나 유연하지 않습니다. 모든 부트스트랩 사이트가 동일하게 보인다는 오랜 주장이 있습니다. 유틸리티 우선 접근 방식을 통해 Tailwind는 더 많은 유연성과 제어 기능을 제공합니다.

순풍 CSS 단점

최근에는 Missing.css 및 Mojo CSS와 같이 유틸리티 중심의 CSS 프레임워크가 더 많이 등장했습니다. 누구도 Tailwind에서 왕관을 차지할 수 없었지만, 그렇다고 해서 상당한 제한이 없는 것은 아닙니다.

가파른 학습 곡선: 앞서 언급했듯이 유틸리티 우선 접근 방식과 많은 수업 수는 초보자가 배우기 어려울 수 있습니다.

코드 가독성: 주로 HTML 파일에서 작업하기 때문에 각 요소에 유틸리티가 누적되면 코드를 읽기가 어려워질 수 있습니다.

일관되지 않은 디자인: Tailwind CSS의 유연성으로 인해 주의하지 않으면 프로젝트 전반에 걸쳐 디자인이 일관되지 않을 수 있습니다.

프레임워크 전환: 프로젝트가 Tailwind CSS와 긴밀하게 결합되어 다른 프레임워크로 전환하기 어려울 수 있습니다.

Tailwind CSS v4.0으로 전환

기존 프로젝트를 Tailwind의 새 버전으로 업그레이드하는 것은 어려운 작업처럼 보일 수 있으며, 이는 복잡한 프로젝트가 있는 경우에도 마찬가지이지만 이점은 그만한 가치가 있습니다. Tailwind는 추가 도구와 파일을 제거하고 보다 명확한 구문을 제공하여 모든 것을 더 빠르고 간단하게 만들고 있습니다.

---

프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?

웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.

LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.

웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작해 보세요.

위 내용은 Tailwind v 준비하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!