[TIL035] Tailwind CSS

---

Tailwind CSS

Tailwind CSS가 뭐죠??

기존에 사용하던 Styled-Components와 같은 자바스크립트 내에서 CSS를 다룰 수 있는 기술 스택 (CSS in JS) 이다.
아직 제대로 사용은 안해봐서 장점을 모르겠지만, 태그의 클래스 내에서 유틸리티 퍼스트 CSS* (Utility First CSS) 를 통해 스타일을 바로바로 적용시킬 수 있다는 특징을 이용해 Styled-Components보다 더욱 더 빠른 스타일이 가능하다(고 한다. 안 써봐서 잘 모름 ㅋㅋ)

유틸리티 퍼스트 CSS (Utility First CSS) 란?

CSS 스타일링 접근 방식 중 하나로, 재사용 가능한 CSS 클래스(유틸리티 클래스)를 통해 간단한 스타일 속성을 개별적으로 적용하는 방식.
하나의 스타일 속성만을 정의해 조합하여 다양한 스타일을 빠르게 구성할 수 있다.

✅설치, 세팅 방법

1. 패키지 설치

yarn add -D tailwindcss postcss autoprefixer

npm install tailwindcss postcss autoprefixer

2. Tailwind 설정 파일 생성

npx tailwindcss init -p

Tailwind CSS 설정 파일(tailwind.config.js)과 PostCSS 설정 파일(postcss.config.js)을 생성한다.

3. Tailwind.config.js 파일 설정

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

4. src/index.css 파일에 Tailwind 지시어 추가

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

5. vite.config.js 파일 설정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
ㅤ 
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss(), autoprefixer()],
    },
  },
});

이와 같이 세팅하는 데에 소요시간이 걸리는 편이다.
이렇게 세팅에 시간이 걸리는데도 사용하는 것을 보면 정말 편리한가보다.

예시코드✅

function App() {
  return (
    <div className="header">
      <h1 className="text-white">Hello, World!</h1>
    </div>
  );
}

export default App;

위처럼 className 안에 유틸리티 클래스를 넣어주면 된다!
확실히 처음 봤을 때에는 복잡해보였는데 간편해 보이기 하는 것... 맞겠죠?

장단점!!

장점

1. 생산성 향상
   CSS를 직접 작성하지 않아도 되는 번거로움이 없기 때문에 빠르게 작성할 수 있다.
2. 파일 크기
   사용되지 않은 CSS 속성은 purge라는 설정으로 제거된다고 한다. 이로써 로딩 속도도 향상 가능하다.

단점

1. 학습
   아무래도 기존 CSS와 작성법이 다르기 때문에 학습하는 데에 시간이 소요된다는 단점이 있다.
2. 가독성
   유틸리티 클래스가 많아지면 가독성이 떨어질 수밖에 없다.
3. 디버깅
   스타일 우선순위에 있어 문제가 생겨 디버깅에 어려움이 있을 수 있다고 한다.
4. 설치
   세팅하는 데에 기존보다 시간 소모가 크기 때문에 아쉬움이 있다.

결론!!!!!!

높은 유연성, 높은 생산성이라는 장점이 있지만 그만큼 학습하는 데에 시간이 소요되고, 여러가지의 문제점이 있긴 하다. 그래서 프로젝트에 알맞는 스타일링 방식을 사용하는 것이 좋다.
지금은 완전 아는 것이 없기 때문에 여러가지 많이 배워보려고 한다!!! 빠샤!!

---

5분 기록

오늘은 팀 프로젝트 발제 날이었다..! 두근두근
카카오 맵 API를 활용한 팀 프로젝트를 세웠고 역할 분담까지 기획하였다.
기술은 처음 써보는 Tailwind CSS를 이용해서 스타일을 하는 것이다보니 오늘은 Tailwind CSS 공부를 하였다. 내일은 오늘 공부한 Tailwind CSS로 스타일을 작성하고 담당한 컴포넌트를 완성해볼까 한다.

---