Tailwind CSS는 웹 개발 세계를 휩쓸었지만 ?️ 하지만 그 성격에 대한 오해는 여전히 남아 있습니다. 최근 디자인 시스템 계획 토론 중에 동료가 Tailwind CSS를 Bootstrap 및 Materialise ?와 무심코 비교했을 때 저는 차를 거의 마실 뻔했습니다 찻잔(저는 커피를 마시지 않습니다. 죄송합니다). 이 충격적인 계시는 내 고양이가 자기를 개라고 생각한다는 사실을 발견한 것과 같았습니다! ??

그럼 팝콘을 드세요? 기록을 바로잡고 Tailwind CSS의 진정한 정체성을 공개합니다!

작은 소개

이 기사에서는 Tailwind CSS가 실제로 무엇인지 자세히 알아보고, 스타일링에 대한 고유한 접근 방식과 기존 CSS 프레임워크와 차별화되는 이유를 살펴보겠습니다. 결국에는 Tailwind CSS를 Bootstrap 또는 기타 구성 요소 기반 프레임워크와 비교하는 것이 사과와 오렌지를 비교하는 것과 같은 이유를 이해하게 될 것입니다. ??

Tailwind CSS가 아닌 것 ❌

Tailwind의 본질을 탐구하기 전에 몇 가지 오해를 풀어보겠습니다.

• 구성요소 라이브러리 아님: Bootstrap 또는 Materialize와 달리 Tailwind CSS는 기본적으로 사전 구축된 구성요소를 제공하지 않습니다. ?
• 디자인에 중점을 두지 않음: 프로젝트에 특정 시각적 스타일을 강요하지 않습니다. ?
• 단순한 CSS 프레임워크가 아님: 기술적으로는 CSS 프레임워크이지만 유틸리티 우선 접근 방식은 기존 프레임워크와 차별화됩니다. ?

다음은 흔히 듣는 오해입니다.

• ? "Tailwind CSS는 인라인 스타일과 같습니다.": 아니요, 그렇지 않습니다. 인라인 스타일과 달리 Tailwind를 사용하면 의사 클래스, 미디어 쿼리, 애니메이션과 같은 고급 기능을 사용할 수 있습니다. 인라인 스타일에 비해 CSS 클래스 수가 적은 유틸리티 우선 접근 방식을 제공합니다
• ? "Tailwind를 사용하기 위해 CSS를 알 필요는 없습니다": 이는 false입니다. Tailwind CSS4를 효과적으로 사용하려면 CSS에 대한 확실한 이해가 중요합니다. 스타일 지정의 여러 측면을 단순화하지만 CSS 기본 사항을 아는 것은 유틸리티 클래스의 작동 방식과 필요할 때 이를 사용자 정의하는 방법을 이해하는 데 도움이 됩니다.
• ? 'Tailwind CSS는 맞춤설정할 수 없습니다.': 이는 사실과 다릅니다. 실제로 고도의 확장성과 사용자 정의가 가능하도록
설계되었습니다.

이제 몇 가지 오해가 해소되었으므로 Tailwind CSS가 진정으로 독특한 이유와 이것이 개발자의 웹 스타일링 접근 방식에 혁명을 일으키는 이유를 살펴보겠습니다.

유틸리티 우선 CSS 프레임워크

Tailwind CSS는 기본적으로 유틸리티 우선 CSS 프레임워크입니다. 이는 HTML에서 직접 사용자 정의 디자인을 작성하는 데 사용할 수 있는 저수준 유틸리티 클래스 세트를 제공한다는 의미입니다. 각 요소에 대해 사용자 정의 CSS를 작성하는 대신 특정 스타일 속성을 처리하는 사전 정의된 클래스를 적용합니다. 스위스 군용 칼을 갖고 있는 것과 같나요? 당신의 CSS를 위해!

예를 들어 다음과 같이 작성하는 대신:

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

HTML에서 Tailwind 클래스를 사용합니다.

Click me

위장된 디자인 시스템

Tailwind는 사전 제작된 구성 요소를 제공하지 않지만 포괄적인 디자인 시스템을 제공합니다. 색상, 간격, 타이포그래피 등에 대해 신중하게 만들어진 기본값 세트가 함께 제공됩니다. 이러한 기본값은 사용자 정의가 가능하므로 Tailwind를 프로젝트의 특정 디자인 요구 사항에 맞게 조정할 수 있습니다.

다음 맞춤 구성을 살펴보세요.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

Tailwind CSS가 다른 이유

유연성과 맞춤화

독보적인 구성 요소 세트를 제공하는 Bootstrap 또는 Materialise와 달리 Tailwind는 자신만의 고유한 디자인을 만들 수 있는 구성 요소를 제공합니다. 이러한 유연성은 더 많은 창작의 자유를 허용하고 많은 웹사이트가 빠지는 '부트스트랩 모양'을 피하는 데 도움이 됩니다.

성능상의 이점

유틸리티 우선 접근 방식은 특히 내장된 제거 기능과 결합할 때 CSS 파일 크기를 더 작게 만들 수 있습니다. 이 기능은 제작 과정에서 사용되지 않는 스타일을 제거하여 더 간결하고 성능이 뛰어난 스타일시트를 만듭니다. 귀하의 웹사이트는 마치 스테로이드를 사용하는 것처럼 느껴질 것입니다! ?

개발자 경험 향상제

다음을 통해 개발자 경험이 크게 향상됩니다.

• 컨텍스트 전환 감소: HTML을 종료하지 않고도 요소의 스타일을 지정할 수 있습니다. 더 이상 여러 파일을 저글링하지 마세요! ?‍♂️
• 일관성 증진: 사전 정의된 클래스는 프로젝트 전체에서 일관된 간격, 색상 및 기타 디자인 요소를 장려합니다. 당신의 디자인은 잘 조율된 오케스트라처럼 조화를 이룰 것입니다. ?
• 개발 속도 향상: 손쉽게 사용할 수 있는 유틸리티 클래스를 통해 신속하게 프로토타입을 제작하고 디자인을 반복할 수 있습니다. 당신은 초능력을 가지고 있는 것처럼 느낄 것입니다!⚡ 그리고 Tailwindcss Intellisense vscode 확장을 사용하면 해당 클래스에 대한 자동 완성 및 Linting을 얻을 수 있으며 사용자 정의 클래스
를 추가할 수 있습니다.

그리고 그게 마무리야?

Tailwind CSS는 단순한 CSS 프레임워크가 아닙니다. 낮은 수준의 유틸리티 클래스 세트를 제공함으로써 개발자는 기존 CSS 프레임워크의 제약 없이 독특하고 효율적이며 유지 관리가 가능한 디자인을 만들 수 있습니다.

따라서 다음에 누군가 Tailwind와 Bootstrap을 비교할 때 그 비교가 왜 빗나갔는지, 그리고 왜 Tailwind가 프로젝트에 필요한 판도를 바꿀 수 있는지 설명할 수 있는 준비를 갖추게 될 것입니다. 즐거운 코딩하세요! ??‍?