✍️ 2주차 복습

💡배운점

이번주는 일반적인 css를 만들지 않고 Tailwindcss를 적용해보는 시간을 가졌다.

⚙️ Tailwind CSS

Tailwind CSS: "유틸리티 퍼스트(Utility-First)" 방식의 CSS 프레임워크

쉽게 말하면,
👉 하나하나의 CSS 속성이 이미 클래스 이름으로 준비되어 있어서, 그걸 HTML에 바로 써서 스타일링할 수 있는 방식이다.

<div class="bg-blue-500 text-white px-5 py-2 rounded-lg">버튼</div>

장점

🎯 빠르게 스타일링 가능
🎨 일관된 디자인 시스템
📱 반응형도 간단하게

css를 안 만들어도 되서 빠르게 스타일링이 가능하다. 또한, 색상/폰트/여백 다 정해져 있기 때문에 일관된 디자인이 가능하다. 마지막으로 sm:, md:, lg: 같은 접두사 사용하여, 화면 크기에 따라 웹사이트의 모습이 자동으로 바뀌는 반응형도 구현 가능하다.

단점

단점은 클래스가 길어진다는 것이다.

class="bg-blue-500 text-white px-4 py-2 rounded-lg"

적용

먼저 Tailwindcss를 설치한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설치가 완료되면,

tailwind.config.js
postcss.config.js

이 두가지 파일이 생긴다.

tailwind.config.js 안에

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

를 입력한다.

마지막으로 src/index.css에

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

를 추가하면 Tailwindcss가 적용된 웹을 실행할 수 있다!

✍️느낀점

스타일을 따로 정의하는 기존 css 방식과 달라 불편했지만, 스타일을 빠르게 적용할 수 있어 개발 속도를 빠르게 할 수 있다는 점이 매력적이였다. 특히 디자인에 자신이 없는 나 같은 사람도 쉽고 예쁜 UI를 만들 수 있다는 점에서 좋았다. 또한, 아이패드, 노트북, 핸드폰 등 다양한 기기를 사용하는 최근 트렌드에 알맞게 반응형 css를 쉽게 구현할 수 있어서 앞으로도 자주 사용해보아야겠다라는 생각이 들었다.