오늘은 tailwindcss에 대해 알아봅시다. ~~꼬리바람 ㅋㅋㅋ 낄낄~~

tailwindcss가 뭐죠?

CSS를 작성하지 않고 클래스명을 제공하여 HTML에 필요한 CSS 유틸리티만 입혀도 스타일이 완성되는 특징을 가진 유틸리티 우선 CSS 프레임워크이다.

<style>
div {
   width: 100%;
   height: 100px;
   margin-bottom: 10px;
}
.jbGrad01 {
   background: linear-gradient( to right, yellow, red, purple, blue );
}
</style>

<body>
     <div class="jbGrad01">to yellow, red</div>
</body>

기존은 위처럼 스타일을 작성해야 하지만 tailwindcss를 사용하면 아래 코드처럼 작성하면 된다.

<body>
     <div class="bg-gradient-to-r from-yellow-400 to-red-400"></div>
</body>

html태그 안 class 부문에 tailwindcss 구문을 작성하면 된다.

tailwindcss 설치

공식 문서에도 나와있지만 아직 찾아보지 못한 핑프들을 위해 내가 직접 설명해 주겠다.

tailwindcss 설치
```
npm install -D tailwindcss
npx tailwindcss init
```
설치가 완료 되었다면 아마 프로젝트 하위에 'tailwind.config.js' 가 생성되어 있을 것이다.

템플릿 경로 구성하기

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

모든 템플릿 파일의 경로를 조금 전에 생성 되었던 'tailwind.config.js'에 추가 해보자.

css에 tailwind 지시문을 추가하기.

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

css 파일은 src/ 하위에 input.css파일을 생성하고 작성하면 된다.

React, Vue.js와 같은 프레임워크는 아래 공식 문서를 참고하도록 하자.
https://tailwindcss.com/docs/installation/framework-guides

Tailwind CLI 빌드 프로세스 시작하기.
```
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```
CLI도구를 실행해 템플릿 파일의 클래스르 스캔하고 css를 빌드하자.

html에서 tailwindcss 사용하기.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet"> <!-- css 파일 경로 -->
</head>
<body>
  <h1 class="text-3xl font-bold underline"> <!-- tailwindcss 구문 작성 -->
    Hello world!
  </h1>
</body>
</html>

컴파일된 css 파일을 html <head> 태그 안에 추가하면 끝!

유틸리티 우선

Tailwind CSS는 "유틸리티 우선(Utility-First)"이라는 독특한 스타일링 접근 방식을 제공한다. 이 철학은 작은 단위의 유틸리티 클래스를 조합해 웹사이트 디자인을 구성하는 데 초점을 맞추고 있는데, 별도의 CSS 파일을 작성하거나 스타일을 오버라이드하지 않아도 HTML에서 바로 디자인 작업을 진행할 수 있다는 점이 큰 장점이다.

작고 명확한 유틸리티 클래스
- Tailwind CSS는 스타일의 역할이 명확히 정의된 클래스들로 구성되어 있다. 예를 들어, text-center는 텍스트를 가운데 정렬하고, pt-4는 상단 패딩을 추가하며, text-blue-500은 텍스트 색상을 파란색으로 설정한다. 이런 클래스를 필요에 따라 조합해 원하는 스타일을 구현할 수 있다.
빠르고 간단한 프로토타이핑
- HTML에서 유틸리티 클래스를 추가하기만 하면 스타일이 적용되기 때문에, 빠르게 디자인을 테스트하고 결과를 확인할 수 있다. 별도의 CSS 파일을 작성하거나 코드 구조를 고민할 필요 없이, 바로 UI 작업을 진행할 수 있다는게 최고다.
스타일의 일관성
- 동일한 클래스들을 여러 곳에서 재사용하기 때문에, 프로젝트 전반에서 스타일의 일관성을 유지할 수 있으며 중복된 CSS 코드를 작성하는 수고를 덜 수 있어 관리가 편리하다.
반응형 및 상태 기반 디자인
- Tailwind는 반응형 디자인을 쉽게 구현할 수 있도록 다양한 접두사를 제공한다. 예를 들어, sm:, md:, lg:와 같은 접두사는 화면 크기에 따라 다른 스타일을 적용할 수 있게 해준다. 또한, hover:나 focus:와 같은 상태 기반 클래스도 지원해 더욱 세밀한 사용자 경험을 제공한다.

아래 코드는 유틸리티 우선 스타일링 예제이다.

<div class="bg-gray-200 p-4 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold text-blue-500">안녕하세요, Tailwind CSS!</h1>
  <p class="text-gray-700 mt-2">유틸리티 클래스를 활용하면 빠르고 효율적으로 작업할 수 있습니다.</p>
</div>

상태 기반 스타일링?

상태 기반 스타일링은 요소가 특정 상태에 도달했을 때(예: 마우스 오버, 포커스, 활성화 등) 스타일이 변경되도록 하는 방식이다. Tailwind CSS에서는 클래스에 상태 접두사를 추가하여 이러한 스타일을 손쉽게 정의할 수 있다.

hover

사용자가 요소 위에 마우스를 올렸을 때 적용되는 스타일이다.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover Me
</button>

focus

요소가 focus를 받을 때 적용되는 스타일이다.

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">

active

요소가 클릭된 상태에서 적용되는 스타일이다.

<button class="bg-blue-500 active:bg-blue-800 text-white font-bold py-2 px-4 rounded">
  Active State
</button>

disable

비활성화된 요소에 적용되는 스타일이다.

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:opacity-50" disabled>
  Disabled
</button>

group-hover

부모 요소가 hover 상태 일때 자식 요소에 스타일을 적용 시키는 스타일링이다.

<div class="group">
  <div class="bg-gray-200 p-4 group-hover:bg-gray-400">
    Parent Hover Changes Me
  </div>
</div>

기타 상태 접두사

focus-visible: 키보드로 포커스된 경우에만 스타일을 적용.
focus-within: 요소 안의 자식 중 하나가 포커스를 받았을 때 적용.
checked: 체크박스 또는 라디오 버튼이 선택된 상태에서 적용.
first: 및 last: 첫 번째 또는 마지막 요소에 스타일 적용.
odd: 및 even: 홀수/짝수 순서의 요소에 스타일 적용.

반응형 디자인

반응형 웹 디자인을 간단하고 직관적으로 구현할 수 있도록 강력한 도구를 제공한다. 미디어 쿼리를 사용하지 않고도 특정 화면 크기에 따라 스타일을 다르게 적용할 수 있도록 반응형 접두사(Responsive Prefixes)를 제공한다.

Tailwind CSS의 기본 브레이크포인트는 아래와 같다.

이 브레이크포인트를 사용해 반응형 스타일을 적용할 수 있다.

반응형 스타일을 적용하려면, 기본 유틸리티 클래스 앞에 접두사를 추가하면 된다.예를 들어, 화면 크기에 따라 텍스트 크기를 변경하려면 아래와 같이 작성할 수 있다.

<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  반응형 텍스트 크기
</p>

기본 텍스트 크기는 text-base.
화면 크기가 sm 이상일 때는 text-lg.
md 이상일 때는 text-xl로 커진다..

반응형 레이아웃은 Tailwind CSS의 유틸리티 클래스와 접두사를 조합해 쉽게 구성할 수 있다.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
</div>

기본적으로 한 줄에 하나의 열(grid-cols-1).
sm 이상에서는 두 열(grid-cols-2).
md 이상에서는 세 열(grid-cols-3).
lg 이상에서는 네 열(grid-cols-4)이 배치된다.

Tailwind 구성 파일을 수정해 자신만의 브레이크포인트를 설정할 수도 있다.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px', // 새 브레이크포인트 추가
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
};

위와 같이 xs 브레이크포인트를 추가하면, xs: 접두사를 사용해 480px 이상에서만 적용되는 스타일을 지정할 수 있다.

마지막으로 최적화 파트를 진행하고 오늘 포스팅을 마치겠다.

최적화 하기

tailwindcss는 성능에 매우 중점을 두고 있으며 프로젝트에서 실제로 사용하는 css만 생성하여 가능한 한 가장 작은 css파일을 생성하는 것을 목표로 한다.

최소화 및 네트워크 압축과 결합하면 일반적으로 대형 프로젝트의 경우에도 10kB 미만의 css파일이 생성된다. 예를 들어 Netflix는 Netflix Top 10 에 Tailwind를 사용 하고 전체 웹사이트는 네트워크를 통해 6.5kB의 css만 제공한다.

css 파일이 이렇게 작으면 각 페이지마다 css를 코드 분할하는 것과 같은 복잡한 솔루션에 대해 걱정할 필요가 없으며, 대신 한 번 다운로드하여 사이트를 다시 배포할 때까지 캐시하는 작은 css파일 하나만 제공할 수 있다.

뭐 일단 최적화를 진행 해봅시다.

Tailwind CLI를 사용하는 경우 다음 --minify플래그를 추가하여 css를 최소화할 수 있습니다.

npx tailwindcss -o build.css --minify

tailwind를 PostCSS 플러그인으로 설치한 경우에는 postcss.config.js의 'cssnano' 플러그인을 아래 코드처럼 추가 해주자.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

React, Vue.js와 같은 프레임워크를 사용할 경우 공식 문서를 참고해보자. 빌드 과정에서 자동으로 처리 될 수 있기 때문에 위 코드는 무의미해지기 때문이다.

다음에는 다크모드와 여러가지 내용들을 들고 오겠다.

TailwindCSS에 대해 알아보자