[React]Tailwind.css의 필요성

css 프레임워크는 웹 어플리케이션 개발에서 매우 중요하다. 

작은 규모의 css는 관리가 간단하지만, 규모의 개발로 가서, 규모가 커지고, 참가하는 이해관계자들이 늘어나면 

그에 따라 css 관리가 더 복잡해진다. 

 

여기서 Tailwind css 의 필요성이 대두가 된다. 

기존에 강력한 css in js 라이브러리인 styled-components는 강력하고 편리하지만, 복잡하고, 유연하고 직관적이지 못하다.

-> tailwind처럼 class로 간단하고 직관적으로 css를 설정할 수 있는 시스템이 아니라,
const newDiv = styled.div`display:"fixed"` 같은 느낌으로 코드를 작성하고 , 선언한 스타일 코드를 다른데서 선언하거나, 함수형 컴포넌트로 사용하는 경우가 보통인 경우인 것 같다. 

하여 Tailwind css는 여기에 유연하고, 직관적인 스타일링을 제공한다.

 

// 예시 코드

<div className="bg-blue-500 text-white p-4">

  Hello, Tailwind CSS!

</div>

위와 같이  className="bg-blue-500 text-white p-4"> 선언한 부분이 Tailwind.css를 사용한 부분이다. 보통 이러한 경우처럼 사용을 하곤 한다. 현재 해외 국내 가릴 것 없이 css framework계에서 강력한 1인자다. 점유율 그래프를 본 적이 있다.  

 

설치법

yarn add tailwindcss postcss autoprefixer

npx tailwindcss init -p

 

tailwind.config.js 변경

/** @type {import('tailwindcss').Config} */

export default {

  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

 

 

기본사용법

@tailwind base;

@tailwind components;

@tailwind utilities;

index.css와 같은 전체 프로젝트 적용이 되는 css파일 상단에 해당 코드를 넣어주면 된다.

 

styled-components를 사용했던 과거 

// src > components > Header.jsx

// 변경 전

// ... 생략

<header

  style={{

    display: "flex",

    justifyContent: "space-between",

    alignItems: "center",

    padding: "0 20px",

    backgroundColor: "lightgray",

  }}

>

// ... 생략

Tailwind.css를 사용하는 현재

// src > components > Header.jsx

// 변경 후

// ... 생략

<header className="flex justify-between items-center px-5 bg-gray-200">

// ... 생략