[React] Tailwind CSS

Tailwind CSS

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다.

기존의 css 스타일링 방식과 달리, 미리 정의된 작은 클래스들을 조합하여서 스타일할 수 있다는 점이 특징이다.

이 특징만으로 Tailwind를 사용하게되면, 빠른 개발 속도와 일관된 디자인이라는 결과를 얻을 수 있다.

 

 

 

Install & Setting

npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init

 

설치 후 생성되는  tailwind.config.js  파일을 다음과 같이 수정해준다.

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

참고로 이  tailwind.config.js  파일은 다양한 커스터마이징에 사용된다.

 

 postcss.config.js  파일은 다음과 같이 작성되어 있으면 된다.

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

마지막으로,  src/index.css  등에 핵심 지시어를 넣어주면 된다.

 

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

 

Using

tailwind css 사용법은 간단하다.

기존의 className(혹은 class)에는 해당 컴포넌트의 이름을 적었다면, tailwind에서는 컴포넌트에 적용하고 싶은 클래스를 조합하여주면 된다. 아래는 예시이다.

function App() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-800 text-center mb-2">게시판</h1>
          <p className="text-gray-600 text-center">자유롭게 글을 작성해보세요</p>
        </div>
        ...
      </div>
    </div>
  );
};

 

대체로 평소 사용하던 일반 CSS 문법으로부터 유추해볼 수는 있기는 하지만, 어쨌든 달라진 패턴으로 인해 러닝커브가 존재한다.

VSCode나 Cursor 등의 사용자라면 이를 보완해주기 위해서,  Tailwind CSS Inteillisense  Extension을 사용해보자.

 

Tailwind CSS의 자동완성을 돕는 익스텐션이다.

 

이런 식으로 자동완성을 도우며, 어떤 선택지가 있는지, 또, 해당 문법이 일반 CSS문법에서는 어떻게 사용되었었는지 등을 보여준다.

 

 

 

State

마우스의 호버나 클릭 후 액티브 상태에 대한 처리도 가능하다.

<div className="hover:bg-gray-50 active:bg-blue-700"></div>

 

이런 식으로  hover: active:  를 이용하면 된다.

 

 

 

Responsive

Tailwind CSS 에서의 반응형 디자인은 접두사를 이용한다.

<p className="text-sm sm:text-base md:text-lg lg:text-xl">
  반응형 텍스트
</p>

 

Tailwind에서 반응형 디자인의 특징은 모바일 우선 접근 방식이라는 것이다. 위의 코드는 가장 작은 모바일 환경 → 640px → 768px(태블릿) → 1024px (데스크탑) 순으로 적용된다.

 

이에 관한 설정은 여기 에서 확인해볼 수 있다.

 

 

 

 

Arbitrary values

항상 사전 정의되어있는 클래스로만 구성해야하는 것은 아니다. 상황에 따라 px단위의 디자인이 필요할 때도 있고, 세부적인 비율의 조절이 필요할 수도 있다. 이럴때는  Arbitrary values  기능을 이용하면 된다.

<div className="w-[100px] p-[10px] text-[10px] bg-[#007355] ></div>

이런 식으로  '[ ]'  안에 값을 제공하여 사용한다.

 

 

 

Customizing

위의 예시에서 백그라운드 색상  'bg-[#007355]'  은 또 사용될 확률이 높은 스타일링이다.

이런 변수를 임의로 지정해둘 수 있는 방법도 존재한다.

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        primaryColor: {
          100: '#007355'
        },
      },   
      spacing: {
        '10px': '10px',
        '100px': '100px',
      },
      fontSize: {
        '10px': '10px',
      },
    },
  },
};

 

처음에 세팅했던 tailwind.config.js 파일은 여러가지 커스터마이징을 설정할 수 있는 파일이다.

위에서 보이는 것처럼 미리 값을 설정해 여러 곳에서 사용하도록 할 수 있다.