[토이 프로젝트 | Task-ing.] #2. Tailwind 와 Daisy UI 적용

롱 롱 타임 노 씨🫥
오늘은 토이 프로젝트에 적용한 CSS 프레임워크와 라이브러리 이야기를 해보려한다.

CSS 프레임워크의 필요성

프론트엔드라면 누구나 다 한땀한땀 CSS를 깎아본 적 있을 것이다. 나 또한 마찬가지이다. react를 공부하기 전에 HTML+CSS+JS 콤보로 프로젝트를 구상했을 때는 한땀 한땀 장인정신으로 CSS를 깎아왔다.(궁금해서 이전에 한 프로젝트에서 CSS 코드가 몇 줄 정도 될까 찾아봤는데 파일 하나에 700줄이 다되어간다.)
프레임워크를 공부하긴 해야하는데 하는 생각이 들던 와중 강의를 듣다가 Ant Design을 써봤는데 너무너무 신세계인 것이다. 예쁘게 깎아진걸 가져다 쓰기만 하면 된다니. Carousel 같은건 CSS로 깎으라해도 못하겠는데 이걸 이걸 갖다 쓰면 된다고...? 쩐다. 하는 생각과 함께 토이 프로젝트에 함께 버무릴 CSS 프레임워크를 찾아봤다.

💨 Tailwind

코딱지만큼이나마 써본 Ant Design을 써볼까 하다가 예전부터 관심이 있었던 Tailwind를 써보기로 했다. 회사의 모집공고를 보면 꽤나 Tailwind가 자주 등장해서 저게 뭔데.. 하는 생각을 가지고 있었기 때문이다. Tailwind는 최근에 떠오르고 있는 CSS 프레임 워크 중 하나로 Utility-First 컨셉을 가진 프레임워크이다. 스타일 적용을 위해 클래스 이름을 고민하지 않아도 되는 점, 스타일시트를 오갈 필요가 없는 점이 대박적인 장점이다. 다만 미리 세팅된 유틸리티 클래스를 잘 모르는 초반에는 스타일시트 오가듯 공식 문서를 불티나게 오다녀야 하기에 러닝 커브가 높은 편이다.(뼛속까지 실감 중)
짧게 써보았지만 좋았던 점 몇가지를 말하자면
1. 일관적인 디자인
2. hover, focus, active 등의 기능 구현이 용이
3. 반응형과 다크 모드 등의 구현이 간편
4. 세밀한 디자인 또한 가능

⚙️ 세팅

Get started with Tailwind CSS
사용하는 프레임워크 등에 따라 설치 방법이 조금씩 상이하며 공식 홈페이지에 프레임워크 별로 잘 설명되어있다. 다만, 기본적으로 PostCSS 플러그인으로 설치하는 것을 권장한다.(auto prefix와 같은 편리한 기능을 사용할 수 있음) 본 설명은 Create-React-App 기준이다.

1. 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. postCSS 플러그인에 Tailwind CSS 추가
   생성된 postcss.config.js를 수정한다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. tailwind.config.js 수정

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

4. Tailwind CSS 스타일 추가
   ./src/index.css 수정

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

✏️ 사용

이제 tailwind 공식 문서를 문지방 닳도록 드나들면서 클래스들을 적용해주면 된다.

<main className="w-10/12 sm:w-10/12 md:w-4/6 lg:w-1/3 p-10 lg:p-20 rounded-lg border border-zinc-200  dark:bg-white">
	<h2 className="mt-6 sm:mt-6 md:mt-8 text-center text-zinc-800 text-sm sm:text-sm md:text-md lg:text-lg">
		Sign in to Task-ing.
	</h2>
</main>

예시로 요런 느낌이고 md, lg 등을 통해 반응형 웹 구현이 아주 용이한 점, dark 등을 통해 dark 모드 구현이 용이한 점 등이 장점이다.

VSCode 사용자라면 Intelli Sense Extension을 꼭 설치해주자. 미리보기, 자동완성 등을 지원하기 때문에 유틸리티 클래스를 찾아 헤매는 뉴비에게 광명을 준다.

Tailwind 관련해서는 간간히 사용법을 포스팅하면서 정리하려한다. 추후에.. 또 봅시다..

🌼 Daisy UI

요것은 Tailwind CSS component 라이브러리인데 Tailwind와 함께 버무려 사용하면 편하다고 추천받아서 사용중이다. 아직 로그인 페이지 정도 밖에 구현하지 않아서 이거 없으면 영혼이 죽어.. 까지 느끼진 못했지만 자잘한 버튼이나 checkbox 같은 컴포넌트가 대박 예쁘게 슝 만들어진다.

⚙️ 세팅

Install daisyUI as a Tailwind CSS plugin

1. 플러그인 설치

npm i daisyui

2. tailwind.config.js 수정

module.exports = {
  //...
  plugins: [require("daisyui")],
}

✏️ 사용

daisy UI docs
만들어져 있는 코드를 가져온 후 그대로 사용하거나 다른 유틸 클래스를 적용해서 스타일 일부 수정도 가능하다.
만들어져있는 것들이 예뻐서 꽤나 잘 쓸 것 같다!

➕ 참고

tailwind
daisy UI
Hello Tailwind CSS! | 장점, 단점, 사용법
Tailwind CSS 사용법, 장점과 단점
Tailwind CSS 사용기