개발/React
🌐Tailwind CSS (2024. 6. 27.)
글쓰는쿼카 joymet33
2024. 6. 28. 08:22
#스파르타코딩클럽 #내일배움캠프(프론트엔드_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) 카드 원래 위치로 돌아가는 로직 구현하기