About
Tailwind CSS는 flex, pt-4, text-center, rotate-90 등 과 같은 클래스로 구성된 Utility-First CSS 프레임워크로 마크업에서 직접 모든 디자인을 구축할 수 있도록 구성되어 있습니다.
Utility-First CSS는 Funcional CSS, Atomic CSS라고도 불립니다.
자세한 내용은 Atomic / Utility-First CSS 포스트를 참고해주세요.
🔗 홈페이지 링크
https://tailwindcss.com
🔗 Docs 링크
https://tailwindcss.com/docs
Core Concepts
클래스 이름을 생각해내는 데 에너지를 낭비하지 않아도 됩니다.
실제로는 플렉스 컨테이너에 불과한 아이템에 대해 완벽한 추상 네이밍을 하려고 고민하고 노력할 필요가 없습니다.
프로덕션용으로 빌드할 때 사용하지 않는 모든 CSS를 자동 제거해 최종 CSS 번들의 크기가 작습니다. 실제로 대부분의 Tailwind를 활용한 프로젝트의 CSS는 10kb 미만입니다.
유틸리티 클래스 앞에 화면 크기를 명시해 특정 브레이크포인트에서 원하는 CSS를 편리하게 지정할 수 있습니다.
hover와 같이 특정 상태일 때만 적용하고 싶은 CSS가 있다면 유틸리티 클래스 앞에 hover: 형태로 명시 해주면 됩니다.
- 현재 지원되는 state:
focus,active,disabled,focus-within,focus-visible, 그리고 자체 개발한group-hover
반복되는 유틸리티 패턴을 @apply를 사용해 커스텀 클래스를 만들 수 있습니다.
style.css
.btn {
@apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
@apply bg-sky-500 text-white;
}
.btn--secondary {
@apply bg-slate-100 text-slate-900;
}index.html
<footer class="grid grid-cols-2 gap-x-6">
<button class="btn btn--secondary">Decline</button>
<button class="btn btn--primary">Accept</button>
</footer>클래스 앞에 간단히 dark: 를 명시하면 다크모드에 적용하고 싶은 배경 색상, 텍스트 색상, 테두리 색상 및 그라이언트 등을 지정할 수 있습니다.
tailwind.config.js를 사용해서 컬러 팔레트, 간격 눈금, 그림자, 마우스 커서 등 디자인 시스템을 설정할 수 있습니다.
module.exports = {
theme: {
fontFamily: {
display: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
},
},
}VSCode를 사용하는 경우 👉 Tailwind CSS IntelliSense 플러그인을 다운로드 받아 자동 완성 제안 등을 편리하게 이용할 수 있습니다.
Tailwind UI에는 바로 사용할 수 있는 수백 개의 예제가 있습니다.
https://tailwindui.com/?ref=landing
Installation
npm을 통해 tailwindcss를 설치하고,
tailwind.config.js 파일이 생성됩니다.
content에 jsx를 추가해주세요!
npm install -D tailwindcss
npx tailwindcss init/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}메인 CSS 파일에 @tailwind로 tailwind의 세 가지 레이어를 명시해줍니다.
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind CLI 빌드 프로세스를 진행합니다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchpublic/index.html 파일 <head> 태그 안에 컴파일 된 CSS 파일을 추가하면 끝입니다!
이제 Tailwind 유틸리티 클래스를 사용할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/public/output.css" rel="stylesheet">
</head>