[TIL #38] Tailwind

Tailwind 사용방법

<div className="bg-blue-500 text-white p-4">
  Hello, Tailwind CSS!
</div>

클래스 네임 충돌 없이, 독립적인 컴포넌트 스타일링이 가능

Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징이 가능

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
      },
    },
  },
};

이런식으로 색깔 지정하고 primary를 가져다가 쓰면 된다.

---

설치

$ yarn add tailwind
$ npm install tailwind

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

공식문서

사용방법

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

---

Tailwind CSS와 Styled-Components 비교

Tailwind CSS: 유틸리티 클래스를 사용하여 간편하게 스타일링을 적용 가능.

<div className="bg-blue-500 text-white p-4">
  Hello, Tailwind CSS!
</div>

Styled-Components: JavaScript 파일 내에서 스타일을 정의하고, 컴포넌트에 직접 스타일을 적용 가능하다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 1rem;
`;

function App() {
  return <Button> Hello, Styled-Components!</Button>;
}

---

장단점

Tailwind CSS

장점: 유틸리티 클래스 기반으로 쉽게 사용할 수 있으며, 성능이 최적화되어 있고 커스터마이징이 용이함.
단점: 클래스 이름이 길어질 수 있고, 프로젝트 초기 설정이 필요함.

Styled-Components

장점: JavaScript 파일 내에서 스타일링이 가능하고, 동적 스타일링을 지원하며, 컴포넌트 기반 설계가 가능함.
단점: 초기 설정과 학습 곡선이 있으며, 스타일링 시 성능 문제가 발생할 수 있음.

---