TailwindCSS란?

 

TailwindCSS란?

HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있습니다

Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크이다. 유틸리티 클래스를 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등 을 제어하여 HTML을 벗어나거나 사용자 정의 CSS를 한 줄도 작성하지 않고 완전한 사용자 정의 구성요소 디자인을 만들 수 있다.

 

Tailwindcss 설치하기 

설치하는 방법은 프레임워크 별로 달라서 공식 문서를 참고하는게 가장 좋다.

 

1. 패티지 설치

npm install -D tailwindcss

 

 

2.tailwind.config.js 파일 생성 

npx tailwindcss init

 

3. tailwind.config.js 파일에 Tailwind CSS를 사용할 템플릿들이 존재하는 경로를 적어준다. 

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

4.최상위 혹은 글로벌 CSS 파일에 @tailwind 지시어를 추가한다. 

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

※react에서 tailwindCSS 설치하기 

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

 

Tailwindcss 장점

• 앱에 최적화 되어있음. (모바일 + 웹)
• html class태그안에 스타일을 줘서 오직 html문서만 보면 된다.
• 속성을 클래스에 직관적으로 표현해서 효율적이다.
• style에 맞는 class명이 정해져 있기 때문에 가독성 좋다.
• 유지보수 용이하다. 협업에 있어 문제가 없다.
• reset css가 기본으로 포함 되있음.
• 빠른 개발 , 프로젝트 시간 촉박할 때 좋다.

Tailwindcss 단점

• 익스플로어 호환 안됨.
• 클래스명이 길어져 가시성이 떨어질 수 있음.
• js변수값 활용 불가하다고함

 

Tailwindcss 적용예시 

<button
   class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
   key={operator}
   onClick={() => handleOperatorClick(operator)} > {operator}
</button>

 

 

flex의 속성들도 아래 처럼 줄여서 사용이 가능하다. 

justify-content: center        - justify-center
justify-content: space-between - justify-between
align-items: flex-start        - items-start
align-items: center            - items-center
align-self: auto               - self-auto
align-slef: flex-start         - self-start
align-slef: flex-end           - self-end
flex: 1 1 0%                   - flex-1
flex: 1 1 auto                 - flex-auto
flex: 0 1 auto                 - flex-initial
flex: none                     - flex-none

 

width값도 이렇게 백분율,뷰포트 너비로 사용할 수 있어서 레이아웃 짜기에 편하다. 

w-1/4	width: 25%;
w-2/4	width: 50%;
w-3/4	width: 75%;

 

 

참고자료 

• https://tailwindcss.com/docs/configuration
• https://velog.io/@heezin/Tailwindcss-란-장단점-사용하기