ChatGPT로 Tailwind CSS 알아보기

ChatGPT로 Tailwind CSS 알아보기

이번 포스트에서는 필자가 가장 좋아하는 Tailwind CSS에 대해서 간단하게 알아보고자 한다.
필자가 적당히 정리해서 작성해도 되지만 ChatGPT를 통해 요약된 내용을 받아 정리해 보겠다.
노션에 따로 노트해놓은 내용들이 있긴 한데...
공부할 때 빨리빨리 작성해서 그런지 뭔가 건너뛴 부분이 좀 많기도 해서 복습 겸 살짝 공부해 보려 한다.

Question

Tailwind css에 대해서 설명해줘

Answer

Tailwind CSS는 저수준의 유틸리티 기반의 CSS 프레임워크입니다.
이는 개발자가 빠르게 사용자 정의 디자인을 구축할 수 있도록 도와줍니다.
Tailwind는 사전 정의된 디자인 템플릿이나 테마를 제공하지 않는 대신, 작은 단위의 유틸리티 클래스를 제공하여 개발자가 필요한 디자인을 직접 구축할 수 있게 합니다.

Tailwind의 주요 특징

● 유틸리티 기반

Tailwind는 작은, 재사용 가능한 클래스를 제공하여 복잡한 디자인을 구축한다.
이는 디자인을 더 유연하고 재사용 가능하게 만들어 준다.

<div class="text-center bg-red-500 text-white p-5">Hello, Tailwind CSS!</div>
	

class의 이름으로 무슨 스타일인지 추측해볼 수 있다.
위 Tailwind class를 CSS로 변환하면 다음과 같다.

<div style="
	text-align: center; 
	background-color: #f56565; 
	color: #ffffff; 
	padding: 1.25rem;
	">Hello, Tailwind CSS!</div>

• text-center는 text-align: center;로 변환되어 텍스트를 중앙에 배치.
• bg-red-500는 background-color: #f56565;로 변환되어 배경색을 빨간색으로 설정.
• text-white는 color: #ffffff;로 변환되어 텍스트 색상을 흰색으로 설정.
• p-5는 padding: 1.25rem;로 변환되어 요소에 패딩을 추가.
  Tailwind의 패딩 유틸리티는 rem 단위를 사용하며, p-5는 1.25rem에 해당.

● 임의 값 지원

Tailwind는 class에 임의의 값을 넣어 적용할 수 있다.

<div class="bg-[#123456] text-white">Hello, Tailwind CSS!</div>
	

위의 코드에서 bg-[#123456]는 배경색을 #123456으로 설정하게 된다.

• 색상 유틸리티
  text-, bg-, border-, from-, via-, to-, placeholder-, ring-, ring-offset-, divide-, gradient- 등의 클래스에 임의의 색상 값을 지정할 수 있다.
  예를 들어, text-[#1da1f2]는 텍스트 색상을 #1da1f2로 설정한다.
• 스페이싱 유틸리티
  p-, px-, py-, pt-, pr-, pb-, pl-, m-, mx-, my-, mt-, mr-, mb-, ml-, space-x-, space-y- 등의 클래스에 임의의 스페이싱 값을 지정할 수 있다.
  예를 들어, p-[13px]는 패딩을 13px로 설정한다.
• 사이즈 유틸리티
  w-, h-, min-w-, min-h-, max-w-, max-h- 등의 클래스에 임의의 크기 값을 지정할 수 있다.
  예를 들어, w-[300px]는 너비를 300px로 설정한다.
• 그리드 유틸리티
  grid-cols-, col-span-, col-start-, col-end-, grid-rows-, row-span-, row-start-, row-end- 등의 클래스에 임의의 그리드 값을 지정할 수 있다.
  예를 들어, grid-cols-[3]는 그리드 열을 3개로 설정한다.
• z-Index 유틸리티
  z- 클래스에 임의의 z-index 값을 지정할 수 있다.
  예를 들어, z-[999]는 z-index를 999로 설정한다.
• 기타
  scale-, rotate-, translate-, skew-, flex-, order-, opacity-, blur-, brightness-, contrast-, grayscale-, hue-rotate-, invert-, saturate-, sepia-, backdrop-blur-, backdrop-brightness-, backdrop-contrast-, backdrop-grayscale-, backdrop-hue-rotate-, backdrop-invert-, backdrop-opacity-, backdrop-saturate-, backdrop-sepia- 등의 클래스에 임의의 값을 지정할 수 있다.

● 사용자 정의

Tailwind CSS에서 사용자 정의는 주로 설정 파일(tailwind.config.js)에서 이루어진다.
예를 들어, 색상 팔레트를 사용자 정의하려면 다음과 같이 설정할 수 있다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': '#123456',
      },
    },
  },
  variants: {},
  plugins: [],
}

아래는 필자가 공부할 때 사용했던 custom class 들이다.
참고용으로 함께 작성해 두겠다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'custom-top' : '#FFCF00',
        'custom-mid' : 'white',
        'custom-low' : '#fc8c03',
        'custom-low-yellow' : '#feeea6f7',
        'custom-font-gray' : 'rgb(31 41 55 / var(--tw-text-opacity))',
        'custom-font-brown' : '#bf7404'
      },
      fontSize: {
        'custom-big' : '1.2rem',
        'custom-medium' : '0.95rem',
        'custom-small' : '0.7rem'
      }
    },
  },
  darkMode: "media",
  plugins: [require("@tailwindcss/forms")],
}

● 반응형 디자인

Tailwind는 모바일 우선의 반응형 디자인을 쉽게 구현할 수 있다.
각 유틸리티 클래스는 다양한 화면 크기에 대응할 수 있도록 설계되어 있다.

<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl">
	Responsive Text
</div>

위의 코드는 화면 크기에 따라 텍스트 크기를 변경한다.
작은 화면에서는 text-sm 클래스를 사용하여 작은 텍스트 크기를 설정하고, 화면 크기가 커질수록 텍스트 크기를 점차 증가시킨다.

sm: = 640px 이상의 화면 크기에 적용

md: = 768px 이상의 화면 크기에 적용

lg: = 1024px 이상의 화면 크기에 적용

xl: = 1280px 이상의 화면 크기에 적용

2xl: = 1536px 이상의 화면 크기에 적용

● 플러그인 시스템

Tailwind는 사용자 정의 플러그인을 지원하여 프레임워크를 확장할 수 있다.
이를 통해 공유 컴포넌트, 사용자 정의 유틸리티 등을 쉽게 추가할 수 있다.
아래는 tailwindcss/forms 플러그인을 추가한 예시이다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  plugins: [require("@tailwindcss/forms")],
}

Tailwind CSS의 특징을 간단하게 알아보았다.
필자의 경우 Tailwind CSS가 처음에는 class 이름 외우기도 힘들었는데 막상 여러번 해보니 이제 그냥 술술 잘 되고, 무엇보다 너무 편했다.
그래서 아마 개인 프로젝트를 할 때는 Tailwind만 사용할 것 같다.

다만, Tailwind CSS의 경우 유틸리티 기반의 접근 방식을 사용하므로, 이에 익숙하지 않은 개발자에게는 초기 학습 곡선이 다소 가파를 수 있으며, HTML 내에 수 많은 class를 사용하게 되면 코드가 복잡해져서 가독성이 떨어질 수 있다.

그럼에도 필자는 Tailwind를 사용하겠다...