🌐Tailwind CSS (2024. 6. 27.)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 
학습주제 : React 심화주차

학습내용 : Tailwind CSS 설치, 초기세팅, 사용법(간단 요약)

학습일 : 2024. 6. 27.

---

배운 내용 요약

(새로 생긴 부분 표시!)

1.  Tailwind CSS 설치 및 초기 세팅- Terminal, tailwind.config.js, src/index.css

// Terminal - Bash
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p

<Gemini>  

yarn add tailwindcss postcss autoprefixer는 다음과 같은 의미를 가집니다.

• tailwindcss: Tailwind CSS는 CSS 유틸리티 클래스 라이브러리로, HTML 요소에 직접 클래스를 적용하여 스타일을 정의함
• postcss: PostCSS는 CSS를 변환하고 처리하는 도구입니다. Tailwind CSS와 함께 사용하여 코드를 최적화하고 브라우저 호환성을 보장함
• autoprefixer: Autoprefixer는 CSS 코드를 자동으로 브라우저별로 호환되는 형식으로 변환하는 도구

// tailwind.confige.js

/** @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;

 

2. 사용법 --- 예시 참고

// src > components > Header.jsx
// 변경 전

// ... 생략
<header
  style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0 20px",
    backgroundColor: "lightgray",
  }}
>

// ... 생략

// src > components > Header.jsx
// 변경 후

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

// ... 생략

---

오늘의 회고

- 칭찬 : 딴짓 예방 차원으로 웹캠 켜기, 화면공유 하기를 실천하여 오전/오후 시간을 100% 활용함

- 반성 : 저녁시간 집중 부족!

- 보충 : 개인과제(favorite countries) 카드 원래 위치로 돌아가는 로직 구현하기