TailWind CSS
Utility-first컨셉을 가진 CSS Framework로, 빠르고 쉬운 스타일링 가능.- 일관된 디자인을 가능하게 해줌.
- Github과 Nuxt.js 공식 사이트에서 사용중임.
🤷♀️ 왜 배우려고 하는지?
항상 React 프로젝트에서 주로styled-component로 스타일링을 했었는데,
작은 스타일 변경에도 컴포넌트를 만들어야 해서 번거로웠고 다른 스타일링 방법을 찾아보게 되었다.
👍 특징
유틸리티 클래스
TailWind CSS는 부트스트랩과 비슷하게 미리 세팅된 유틸리티 class를 활용하는 방식으로, HTML 마크업 내에서 스타일링을 할 수 있다.
<button class="py-2 px-4 shadow-md text-white">Submit</button>스타일 코드도 HTML 내에 있어 HTML과 CSS 파일을 별도로 관리하지 않아도 된다.
또한, Tailwand CSS는 래핑 태그의 클래스명을 사용할 필요가 거의 없어서 고민하지 않아도 된다고 한다.
모든 곳에서 동일한 색상, 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 - 일관된 스타일 구현에 적합하다!
로우 레벨의 스타일 제공
각 CSS 요소 수준의 유틸리티 클래스 제공
-> 모든 클래스를 학습해야 한다. 🤦♀️
BUT! Intelli Sense 라는 플러그인을 제공하여 미리보기, 자동완성 및 린팅을 지원하기 때문에 편리하게 개발할 수 있다.
JS 코드와의 분리
JS 코드와 완전히 분리되어 있어 프로젝트 진행 중 JS 변경시에서 수월한 작업 가능.
👎 단점
- 이쁘지 않은 코드
- JS 코드 사용 불가 (변수나 props 등을 사용 가능한
styled-components와는 달리 사용 불가하다.) - HTML, CSS 코드 혼재
✍️ 사용 방법
설치
$ npm install tailwindcss postcss autoprefixer- IE를 지원하지 않기 때문에
autoprefixer을 함께 사용해줘야 함.
postcss 설정
postCSS 플러그인에 Tailwind CSS 추가
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};설정파일 생성
$ npx tailwindcss init-> 루트 디렉터리에 설정 파일이 생성됨. (tailwind.config.js)
설정파일 수정
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
};tailwind 불러오기
@tailwind base;
@tailwind components;
@tailwind utilities;만약, React 같이 JS에 직접 임포트 가능한 경우 직접 임포트를 하자!
app.js
import "tailwindcss/tailwind.css";최적화 설정
tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
...
}
purge란?
- 파일 크기를 최소화 해주는 옵션.
- production 으로 빌드시 사용되지 않는 모든 클래스는 제거됨.
기본 설정 커스텀
- 색상, 스타일, 변수 등 커스텀 가능!
- JS 코드 활용도 가능.
tailwind.config.js 의 theme 필드에 작성해준다.
유틸리티 클래스
만약 반복되는 스타일이 있다면, 유틸리티 클래스를 추가로 만들어 사용 가능함.
style.css
.btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}-> at-rule 중 @apply를 사용하여 유틸리티 클래스명을 나열해준다.
상태 스타일 설정
hover 등의 상태 스타일은 hover:~~ 의 형태로 설정 가능하다!
참고로, 마지막 요소인 last-child를 선택할 때는 last:~~ 로 스타일링 가능하다.
반응형 스타일
bootstrap과 마찬가지로 prefix에 설정한 breakpoint 값에 따라 반응형 스타일링도 가능.
<div class="bg-yellow-500 lg:bg-yellow-700 ...">Resize Window</div>lg:~~ , md:~~와 같은 형식으로 작성해준다.
📝 참고 자료
