반응형
Tailwind CSS
Tailwind CSS는 Utility-First 콘셉트를 가진 CSS 프레임워크다. Bootstrap과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 in-line 방식으로 스타일링 할 수 있다.
Tailwind CSS의 장점
- HTML 내에서 인라인으로 작성하기 때문에 별도의 CSS 파일(또는 스타일 컴포넌트)을 관리하지 않아도 된다.
- 클래스명을 고민하지 않아도 된다.
- 미리 지정된 클래스명으로 스타일링 하기 때문에 프로젝트를 일관된 스타일로 통일하기 쉽다.
- 각 CSS 요소 수준의 유틸리티 클래스를 제공하여, 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀할 수 있다.
- emotion이나 styled-component와 같은 CSS-in-JS 라이브러리와 함께 사용할 수 있다.
Tailwind CSS의 단점
- 각 스타일의 클래스명을 익혀야 하기 때문에 초반 러닝 커브가 높다. (Intelli Sence 플러그인을 사용하면 자동완성, 린팅되어 한결 편하다)
- class가 작성이 길어지고 복잡해져서 가독성이 떨어진다.
- JavaScript 코드 사용이 불가하다.
사용하기
1. 설치
npm install -D tailwindcss # 설치2. tailwind.config.js 파일 설정
npx tailwindcss init # tailwind.config.js 생성// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
purge: ['./src/**/*.{js,jsx,ts,tsx}'], // 사용하지 않는 클래스를 제거하여 최적화하기
theme: {
extend: {
colors: {
blue: colors.lightBlue, // 기본 스타일 커스텀
pink: colors.fuchsia,
},
fontFamily: { // 기본 스타일 커스텀
sans: ["Graphik", "sans-serif"],
serif: ["Merriweather", "serif"],
},
},
},
plugins: [],
}
3. CSS 파일에 Tailwind 디렉티브 추가
@tailwind 디렉티브는 빌드 시에 CSS 코드로 변환된다.
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
4. CLI 빌드 과정
템플릿 파일들을 스캔하고 CSS 파일을 빌드한다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
5. 스타일링
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
공식 문서
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
| CSS 프레임워크 - Bootstrap (부트스트랩) (0) | 2022.03.07 |
|---|---|
| CSS 프레임워크 - Chakra (차크라) (0) | 2022.03.04 |
| CSS 프레임워크 - Material UI (MUI) (0) | 2022.03.02 |
| CSS 프레임워크 - reactstrap (0) | 2022.02.28 |
| 웹 컴포넌트란? HTML Template, Custom Elements, Shadow DOM (0) | 2022.02.25 |