[Tailwind CSS] Tailwind CSS 알아보기 (with React)

 

Tailwind CSS 알아보기

(with React)

 

---

 

# Tailwind CSS란

 

 Tailwind CSS란 CSS를 쉽게 다룰 수 있게 해주는 CSS 프레임워크이다. 원래 React 프로젝트에 CSS를 적용하기 위해서는 CSS 파일을 따로 지정하거나, inline style으로 CSS를 적용하지만 Tailwind CSS는 className으로 스타일을 지정한다.

 

React 프로젝트에 Tailwind CSS를 적용한 모습

 

 예시를 위해 개인 프로젝트의 코드 일부를 가져왔다. className로 작성된 것이 전부 Tailwind CSS로 작성한 스타일이다. CSS의 flex, width, height, overflow 등등의 요소들을 className으로 적어준 것이다.

 

 

# 장점1 : 귀찮음 해결

 

 사용해보고 가장 장점이라고 느꼈던 건 당연히 간단함이다. class의 이름을 따로 지정할 필요도 없고 자바스크립 파일과 CSS 파일을 계속해서 왔다갔다 할 필요도 없다. Tailwind CSS는 그러한 귀찮음이 없고 직관적으로 바로바로 스타일을 지정할 수 있어 매우 편리하다.

 

 

# 장점 2 : 간단히 반응형 디자인 가능

 

 웹페이지 제작에 빠질 수 없는 반응형 디자인! Tailwind CSS는 반응형 디자인도 간단하게 구현할 수 있다.

 

md lg가 반응형 디자인을 구현하는 코드이다

 

 예시를 보면 md:라고 적힌 것과 lg:라고 적힌 것이 있다. 이렇게만 적어주면 반응형 디자인이 완성된다. md와 lg가 무슨 뜻인지는 공식문서를 통해 알아보자.

 

 

 각각 min-width의 반응형 디자인에 해당하는 코드이다. sm:으로 적어주면 640px 이상부터는 이런 디자인~ md:라고 적어주면 768px부터는 또 다른 디자인~  이라고 적용되는 것이다. flex나 각 컴포넌트의 크기를 지정할 때 굉장히 편리하다.

 

 또한, 값을 커스텀할 수 있다. 기본적으로는 min-width가 제공되지만, 값을 커스텀하면 min-width 뿐만 아니라 max-width도 가능하고, 이름과 크기도 변경할 수 있다.

 

 

module.exports = {
  theme: {
    screens: {
      mobile: { max: "767px" },
      tab: "800px",
    },
  },
};

 

 이렇게 module에서 바꿀 수 있다.

 

 

# 장점 3 : 버튼 구현에 이용

 

 단순 디자인 뿐만 아니라 기능을 구현할 때도 유용하게 쓸 수 있다. 메뉴 버튼을 예시로 들면,

 

const handleClick = () => {
  menuRef.current.classList.add("hidden");
};

// 생략

<div ref={menuRef}>메뉴</div>
<div onClick={handleClick}>메뉴 안 보이게 하는 버튼</div>

 

 hidden은 display: none;이다. 버튼을 클릭하면 menuRef의 classList.add로 hidden을 추가해서 컴포넌트를 화면에서 안 보이도록 할 수 있다.

 

const handleClick = () => {
  menuRef.current.classList.remove("hidden");
};

// 생략

<div ref={menuRef}>메뉴</div>
<div onClick={handleClick}>메뉴 보이게 하는 버튼</div>

 

 classList.remove로 hidden을 제거해주면 화면에서 보이도록 할 수 있다. 이렇게 Tailwind CSS로 화면에서 나타나게/사라지게 하는 기능을 구현할 수 있다.

 

 

# 장점 4 : 색깔 내장되어 있음

 

 Tailwind CSS에는 색상이 내장되어있어 디자인을 할 때 편리하다.

 

 

 

공식홈페이지 참고 https://tailwindcss.com/docs/customizing-colors 

Customizing Colors - Tailwind CSS

 

 글자 색을 바꾸고 싶다면 text-orange-300 배경색을 바꾸고 싶다면 bg-orange-300 이렇게 넣어줄 수 있다. 이렇듯 기존의 CSS 기능 + 장점 덕분에 프로젝트를 만들 때마다 Tailwind CSS를 항상 잘 사용하고 있다.

 

 

# CSS 파일이나 inline style을 Tailwind CSS와 같이 사용할 수 있는지?

 

 같이 사용할 수 있다. 나는 개인적으로 font family는 CSS 파일로 따로 설정해주고, 애니메이션 효과는 inline style 혹은 CSS 파일로 넣고, 나머지 스타일은 전부 Tailwind CSS 방식을 사용한다. CSS 방식을 3가지나 섞어 쓰는 게 괜찮은가 고민해봤는데 딱히 별 문제는 없는 것 같아서(아마도), 섞어 쓰니까 편해서 하나의 프로젝트에도 3가지 방식을 모두 사용한다.

 

 (font family를 Tailwind CSS로 설정하는 법이 있긴 한데 그냥 개인적으로 CSS로 넣어주는 게 편해서😅)

 

CSS 파일로 font family 설정해주고

font family에 해당하는 class 이름 넣어주기 (그 뒤는 tailwind css)

 

이렇게 Tainwind CSS와 일반 CSS 방식을 병행할 수 있다.

 

 

# 단점

 

 위 예시를 보면 알겠지만 CSS가 길어질수록 가독성이 나빠진다. class에 바로 CSS를 넣어버리다 보니 복잡해지는 게 어쩔 수 없는 부분이다. 그런데 그 이외의 단점은 아직까지 딱히 못 느껴서 굉장히 추천하는 프레임워크이다.

 

 

# React에서 사용하는 방법

 

 개인적으로 Tailwind CSS의 공식 페이지가 정말 잘 되어있는 편이라고 생각한다. 가독성도 좋고 내용도 정말 자세하게 설명되어있음! 그래서 잘 모르는 게 있다면 공식 홈페이지를 자세히 읽어보는 것을 추천한다. 우선 설치 방법을 간단히 정리하고 공식 문서의 어떤 부분을 읽어보면 좋은지 소개하려 한다.

 

 

1. React 프로젝트의 폴더를 열어주고, 터미널에 npm install -D tailwindcss를 입력한다.

 

npm install -D tailwindcss

 

2. 그 다음 터미널에 npx tailwindcss init을 입력한다.

 

npx tailwindcss init

 

3. init이 완료되면 tailwind.config.js 로 들어간다. content가 비어있을 텐데, content에 다음과 같이 "./src/**/*.{js,jsx,ts,tsx}", 를 입력해준다.

 

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. index.css 파일에 아래 내용을 입력해준다. 노란색 밑줄이 생길 수도 있는데 괜찮음! 작동되는 것에는 문제가 없으니 넘어가도 괜찮다.

 

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

 

이렇게 하면 끝! 공식문서에 나온 내용을 그대로 설명한 것이니 공식 문서도 읽어보는 것을 추천한다.

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

 

# 공식 문서 활용하기

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

 사실 CSS의 모든 문법을 다 외울 수는 없다. 그러니 필요할 때마다 공식 문서에서 검색해서 찾아 쓰면 되는데, 앞서 말했듯 공식 문서가 굉장히 깔끔해서 이용하기에 편하다. 위의 링크를 타고 공식 문서에 들어가보면 왼쪽 사이드바에 정리가 잘 되어 있다.

 

필요한 CSS 있으면 검색해서 보면 됨!

 

 예를 들어, 일반 CSS의 justify-content: flex-start; 를 Tailwind CSS에서는 어떻게 표현할까? justify content를 검색하면 바로 나온다.

 

왼쪽: Tailwind CSS, 오른쪽: 일반 CSS

 

예시도 자세히 나와있다

 

 일반 CSS 내용을 잘 알고 있다면 Tailwind CSS를 사용하는 것도 어렵지 않다. 검색해서 사용하면 됨! 예시도 자세히 나와 있어서 이해하기 쉽다.

 

 

# 후기

 

 이미 개인 프로젝트에 항상 사용하고 있고, 앞으로도 계속 사용할 것 같은 프레임워크이다. 가독성이 문제이긴 하지만 적응되니 많이 불편하진 않다. 그리고 무엇보다도 클래스 이름을 하나하나 지정할 필요가 없다는 것과 파일을 왔다갔다 하지 않아도 된다는 이 2가지 장점이 굉장히 크다. 웹 페이지를 제작한다면 한 번쯤은 관심 가져볼만한 프레임워크라고 생각한다.