🧐 Tailwind CSS?
Tailwind CSS는 이름에서 부터 알 수 있듯이 CSS Framework 입니다.
소개
Tailwind CSS는 사용자 정의 가능한 CSS 프레임워크로, HTML 요소에 빠르고 쉽게 스타일을 적용할 수 있도록 도와줍니다. 기존의 CSS 프레임워크와 달리 클래스 기반으로 스타일을 적용하며, 효율적인 작업 흐름과 재사용 가능한 컴포넌트를 제공합니다. 이번 포스트에서는 Tailwind CSS의 주요 기능, 설치 방법, 사용법, 그리고 몇 가지 유용한 팁과 트릭에 대해 알아보겠습니다.
주요 기능
- 클래스 기반 스타일링: 각 HTML 요소에 적용할 스타일을 클래스로 지정하여 사용합니다.
- 맞춤형 디자인 시스템: 미리 정의된 클래스를 사용하여 스타일을 커스터마이징하거나 새로운 클래스를 생성할 수 있습니다.
- 효율적인 유틸리티 클래스: 넓은 범위의 유틸리티 클래스를 제공하여 여러 기능을 쉽게 구현할 수 있습니다.
- 반응형 디자인: 미디어 쿼리를 사용하지 않고도 반응형 디자인을 구현할 수 있습니다.
- 테마 커스터마이징: 테마 파일을 통해 색상, 글꼴, 간격 등을 쉽게 변경할 수 있습니다.
1. tailwind 설치
npm install -D tailwindcss // 한 후에
npx tailwindcss init
2. tailwind.config.js 에서 초기 설정
/* @type {import('tailwindcss').Config} /
module.exports = {
content: ["./src/*/.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
3. CSS 파일 최상단에 tailwind 유틸리티 저장
index.css 파일 최상단에
@tailwind base;
@tailwind components;
@tailwind utilities;
4. HTML 파일에서 Tailwind CSS 클래스를 사용하여 스타일을 적용합니다:
<div class="bg-gray-200 p-4">
<h1 class="text-2xl font-bold">Welcome to Tailwind CSS!</h1>
<p class="text-gray-700">Tailwind CSS makes styling easy and efficient.</p>
</div>필요에 따라 클래스를 수정하거나 커스텀 클래스를 생성하여 원하는 스타일을 적용할 수 있습니다.
결론
이번 포스트에서는 Tailwind CSS의 주요 기능, 설치 방법, 사용법에 대해 알아보았습니다. Tailwind CSS는 강력한 CSS 프레임워크로, 클래스 기반 스타일링과 유틸리티 클래스를 활용하여 효율적인 개발 작업을 지원합니다. 추가로 공식 문서를 참고하여 더 많은 기능과 옵션을 익히시기 바랍니다.
https://tailwindcss.com/docs/installation
