✅ Tailwind CSS
Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링)를 지향하는 CSS 프레임워크이다.
장점은 스타일 시트를 오가는 컨텍스트 스위칭도 없고, 클래스 이름을 시맨틱하게 정하기 위해 고민하는 시간도 없다. 유지보수 측면에서도 CSS가 어떻게 적용되었는지 한 눈에 파악할 수 있어 스타일 수정에 드는 시간도 단축된다.
🤩 장점
- 클래스 이름을 고민하지 않아도 된다.
- 쉽게 반응형 페이지를 구현할 수 있도록 지원한다.
- 커스터마이징이 가능하다.
- 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해 재사용 가능하다.
- 다크모드 지원
😅 단점
- HTML 코드가 지저분 해진다.
- 코드들이 각각 어떤 동작을 하는지 익혀야하고, 그 코드들의 이름을 외워야하기 때문에 처음 익히는데 시간이 오래 걸린다.
- 완성형 컴포넌트가 다른 프레임워크들에 비해 적기 때문에 사용자가 대부분 직접 만들어야한다.
- CDN사용시 웹팩과 컴파일러를 통한 최적화가 이루어지지 않을 경우 기본적인 css 파일의 크기가 무거워 진다.
💡 설치방법
- 패키지를 설치한다.
npm install -D tailwindcsstailwind.config.js파일을 생성한다.
npx tailwindcss inittailwind.config.js파일dp Tailwind CSS를 사용할 템플릿들이 존재하는 경로를 적어준다
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
- 최상위 혹은 글로벌 CSS 파일에
@tailwind지시어들을 추가한다.
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;- CLI가 입력되는 코드들은 CSS로 컴파일 및 빌드하도록 실행한다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch- HTML의
<head>에 컴파인된 Tailwind CSS 파일을 추가하고 스타일링 코드를 작성한다.
<!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>```
멋찐 프론트엔드 개발자가 되자!