[Tailwind CSS] Tailwind CSS란

개요

사용자가 애플리케이션을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 CSS 프레임워크입니다.

 

Tailwind CSS에서 제공하는 기능인 유틸리티 클래스를 사용하면 레이아웃, 색상, 간격, 글자 등을 제어가 가능합니다.

하지만 직접 CSS 파일을 생성하지 않고 Tailwind CSS 기능만 사용하면 완전한 사용자 정의 구성 요소 디자인을 구성할 수 있습니다.

 

Tailwind CSS는 모든 HTML 파일, 자바스크립트 구성요소 등 필요한 내용을 모두 분석하여 클래스 이름에 해당하는 스타일을 생성한 다음 일반 CSS 파일에 분석한 내용을 저장합니다.

장점

1. 별도의 CSS 작성 시간 축소

Tailwind CSS를 사용하면 기존 CSS 내용을 HTML에 직접 적용하여 요소의 스타일을 지정할 수 있습니다. 왜냐하면 일반 CSS 구문처럼 많은 내용을 요구하지 않기 때문입니다.

Tailwind CSS 적용 전

Tailwind CSS 적용 후

<div class="chat-notification">   <div class="chat-notification-logo-wrapper">     <img src="/img/logo.svg" alt="ChitChat Logo">   </div>   <div class="chat-notification-content">     <h4 class="chat-notification-title">ChitChat</h4>     <p class="chat-notification-message">You have a new message!</p>   </div> </div> <style>   .chat-notification {     display: flex;   }   .chat-notification-logo-wrapper {     flex-shrink: 0;   }   .chat-notification-content {     margin-left: 1.5rem;     padding-top: 0.25rem;   }   .chat-notification-title {     color: #1a202c;     font-size: 1.25rem;     line-height: 1.25;   }   .chat-notification-message {     color: #718096;     font-size: 1rem;     line-height: 1.5;   } </style>

<div class="flex">   <div class="shrink-0">     <img src="/img/logo.svg" alt="ChitChat Logo">   </div>   <div>     <div class="text-xl font-medium text-black">ChitChat</div>     <p class="text-slate-500">You have a new message!</p>   </div> </div>

 

출처 : https://tailwindcss.com/docs/utility-first

이러한 방식으로 유틸리티 클래스를 사용하면 CSS를 작성하지 않고도 사용자 정의 디자인을 구축할 수 있습니다.

 

2. 작은 용량을 유지하는 CSS 파일

기존 CSS를 개발할 때에는 새로운 기능과 구성 요소를 추가할 때마다 CSS를 추가적으로 작성해야 합니다. 그러므로써 용량은 점점 늘어나게 됩니다.

하지만 Tailwind에서 제공하는 유틸리티를 사용하면 적은 내용으로 구성이 가능하며 그 와중에 재사용도 가능합니다.

/* Tailwind CSS 작성 */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* 실행한 Tailwind CSS의 결과물  */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

적은 내용으로 구성 - (Padding 유틸리티)

Tailwind CSS Padding Utility

 

Tailwind CSS 작성

실행한 Tailwind CSS의 결과물

.btn { @apply font-bold py-2 px-4 rounded !important; } input[type="button"] { @apply btn; }

.btn { font-weight: 700 !important; padding-top: .5rem !important; padding-bottom: .5rem !important; padding-right: 1rem !important; padding-left: 1rem !important; border-radius: .25rem !important; } input[type="button"] { font-weight: 700 !important; padding-top: .5rem !important; padding-bottom: .5rem !important; padding-right: 1rem !important; padding-left: 1rem !important; border-radius: .25rem !important; }

/* Tailwind CSS 작성 */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

input[type="button"] {
  @apply btn;
}

/* 실행한 Tailwind CSS의 결과물  */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

input[type="button"] {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

공식 문서에서는 아래와 같이 설명을 합니다.

 

최소화 및 네트워크 압축과 결합하면 대규모 프로젝트에서도 일반적으로 10kB 미만의 CSS 파일이 생성됩니다. 예를 들어, 넷플릭스가 제공하는 페이지 중 '넷플릭스 TOP 10' 페이지에서 Tailwind CSS를 사용하고 있는데 전체 웹사이트가 사용하고 있는 CSS 용량은 6.5kB의 CSS의 제공한다.

 

3. 생각이 필요없는 클래스 네이밍

맨 위에서 설명드린 HTML 소스에 Tailwind CSS 문법을 적용한다면 직접 생각해내야 하는 Class 이름이 필요없게 됩니다.

 

 

사용방법

다양한 방법이 존재하지만 처음부터 Tailwind CSS로 시작하고 실행하는 가장 간단하고 빠른 방법은 Tailwind CLI 도구를 사용하는 것입니다.

1. 설치

> curl -O tailwindcss-windows-x64.exe https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-windows-x64.exehttps://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-windows-x64.exe > > Rename-Item .\tailwindcss-windows-x64.exe tailwindcss.exe

2. config 파일 생성

> ./tailwindcss.exe init Created Tailwind CSS config file: tailwind.config.js

3. input.css 파일 생성

.btn {   @apply font-bold py-2 px-4 rounded !important; }

4. CSS 파일 변환

> ./tailwindcss.exetailwindcss -i input.css -o output.css --minify Rebuilding... Done in 166ms.

5. 변환된 파일 확인

> Get-Content .\output.css .btn{border-radius:.25rem!important;font-weight:700!important;padding:.5rem 1rem!important}

ref.

https://tailwindcss.com/docs/installation  

https://blog.hubspot.com/website/what-is-tailwind-css   

https://tailwindcss.com/blog/standalone-cli