Tailwind CSS
Tailwind CSS
다양한 CSS 명명법이 있다는 것을 알지 못하고 있다 최근에, BEM 명명에 대해 알고 난 뒤 다른 CSS 스타일은 어떤 것들이 있는지 궁금해졌다.
HTML, CSS, Vanilla JavaScript를 통해 다양한 시도를 해보던 중, 확실히 명확한 클래스명을 짓는다는 것이 조금 부담스럽기도 하였다. 그렇기 때문에 다른 CSS 라이브러리나, 스타일들에 관심이 생겼고 조금 더 용이하게 CSS 작업을 할 수 있는 것이 무엇인지 찾아보던 중, 예전에 이름만 들어보고, 요즘은 매우 핫한 Tailwind CSS를 사용해보고자 하였다.
사용함에 있어 Tailwind CSS에 대해 어떻게 사용하는지, 어떤 장점과 단점이 있는지 궁금해서 인터넷을 통해 관련된 내용들을 찾아보았다.
📌 Tailwind CSS란?
tailwindCSS 공식 홈페이지🔗 바로가기👈
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
공식 홈페이지를 들어가자마자 나타나는 TailwindCSS의 설명이다. 설명에 적혀있는 utility-first CSS란, 미리 정의된 CSS 특성들을 class 형태로 불러와 적용시키는 방법이다.
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
처음에는 굉장히 불편했는데, 최근 bootstrap을 몇 번 사용해본 탓인지 해당 방법이 굉장히 익숙해진 것 같다.
📌 Tailwind CSS의 장점
✏️ Utility-First CSS
공식 홈페이지에도 적혀있다시피 유틸리티 CSS로, 클래스명 하나로 style을 설정해줄 수 있다는 것이 큰 장점이었다. 복잡하게 CSS 코드를 구현하지 않더라도 Tailwind CSS 공식 홈페이지에서 제공해주는 다양한 docs 등을 통해 편리하게 UI를 구현할 수 있다.
<div class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transotion ease-out duration-300">
Load more
</div>
class를 통해서 HTML 내에서 스타일 적용이 가능하기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없다.
그리고 태그의 클래스명을 직접 고민하는 수고를 덜 수 있다는 것이 무척 큰 장점이라고 생각한다. 최근 BEM에 대해 학습을 하고, 이를 바탕으로 클래스명을 지었지만 적용이 제대로 되지 않는 부분도 있었고, 클래스가 주는 명확성을 부여하는 것이 상당히 힘들었다. 하지만 Tailwind CSS는 대부분의 클래스명을 제공하기 때문에 더 이상 클래스명을 고민하지 않아도 된다.
✏️ 용이한 Customzing
원하는 색상이나 기능들이 없는 경우에도, 쉽게 커스터마이징을 하여 원하는 클래스를 만들 수 있다.
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: "#FF6363",
secondary: {
100: "#E2E2D5",
200: "#888883",
},
},
fontFamily: {
body: ["Montserrat"],
},
},
},
plugins: [],
};
✏️ Tailwind CSS IntelliSense
Tailwind CSS에서는 Tailwind CSS IntelliSense 플러그인을 제공하고 있다. 그렇기 때문에 모든 스타일 클래스를 외울 필요 없이 간단한 키워드를 입력하여 원하는 속성을 쉽게 찾을 수 있다.
이를 통해 미리 보기, 자동 완성, 린팅등을 지원한다.
TailwindCSS에서 제공하는 기본 기능 이외에도, 앞서 커스터마이징을 통해 생성한 클래스 역시 찾을 수 있는 기능을 제공한다.
✏️ 스타일 재사용
다양한 클래스를 통해 디자인한 요소를 묶어 해당 클래스를 간편하게 재사용할 수 있다.
@apply를 통해 스타일들을 컴포넌트화 하여, 해당 클래스를 사용함으로써 스타일의 재사용이 가능하다.
.card{
@apply bg-white rounded overflow-hidden shadow-md relative hover:shadow-lg;
}
📌 TailwindCSS 단점
✏️ Learning Curve
누군가는 TailwindCSS가 배우기 쉬운 CSS 프레임워크라고 하지만, 기본적으로 제공하는 기능들에 맞추어서 사용해야 하기 때문에 러닝 커브가 매우 낮은 프레임워크는 아니라고 생각한다. 폰트나 색상 등, 원하는 기능을 모두 제공하는 것이 아니기 때문에 어떤 기능들이 있고 없는지 확인해야 하는 수고로움이 있기 때문에 단점이라고 생각한다.
오히려 기본적으로 제공하는 클래스를 암기하지 않으면, 매번 확인을 해야 하는 문제 또한 발생한다.
✏️ 못생긴 코드
모든 CSS 속성들을 클래스로써 해결하기 때문에 치명적으로 코드가 못생겨진다는 단점이 있다.
span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
클래스 하나마다 속성이 담겨있기 때문에, 원하는 스타일을 만들기 위해서는 위와 같이 수많은 클래스를 붙여야 한다. 코드에 직관성을 부여하지만, 되려 가독성이 떨어지는 문제가 있다.
✏️ 관심사 분리를 하지 않는 것
기본에는 html과 css 파일을 별도로 분리하여 관심사를 분리하기 위한 많은 노력들이 있었다. 하지만, Tailwind CSS는 관심사를 되려 분리하기 않고, html 파일 하나에서 이루어질 수 있도록 하였기 때문에 html 자체에 많은 기능이 담겨있는 것이 아닌가 한다.
📌 TailwindCSS 시작하기
- Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init
- Configure your template paths
tailwind.config.js의 모든 정보를 알기 위한 명령어 npx tailwind init --full
--full을 붙이지 않으면 tailwindCSS의 정보를 제외한 기본 골격만 나타남.
tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
content 안에 main css 파일의 위치 정보와 CSS를 사용할 파일을 지정한다.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- Add the Tailwind directives to your CSS
src/input.css (tailwind를 불러오기 위한 코드를 입력한다)
@tailwind base;
@tailwind components;
@tailwind utilities;
- Start the Tailwind CLI build process
아래 명령어를 통해 tailwindcss를 build 한다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
아래와 같이 package.json 파일에 입력한 후, npm run build-css를 작성하면 자동으로 build를 해줌.
--watch를 붙이면 모듈이 변경될 때마다 자동으로 compile을 해줌
"scripts": {
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css --watch"
},
Installation: Tailwind CLI - Tailwind CSS
📌 기능
이후 작성되는 모든 코드들은 Tailwind CSS 공식 홈페이지와 유튜브를 통해 참고한 코드들이며, 홈페이지에서 자세히 기능들을 소개하며, 사용방법들이 작성되어 있기 때문에 모든 기능들을 소개하진 않겠다.
사용해보고 싶다면 반드시 공식 문서를 참고하자.
✏️ customizing
tailwind.config.js 에서 아래와 같이 커스터마이징하고 싶은 나만의 class를 만들 수 있다.
fontSize: {
mammoth: ["10rem", { lineHeight: "1" }], // <= 만들고 싶은 새로운 class
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "1.75rem" }],
"2xl": ["1.5rem", { lineHeight: "2rem" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
"5xl": ["3rem", { lineHeight: "1" }],
"6xl": ["3.75rem", { lineHeight: "1" }],
"7xl": ["4.5rem", { lineHeight: "1" }],
"8xl": ["6rem", { lineHeight: "1" }],
"9xl": ["8rem", { lineHeight: "1" }],
},
이후 npm run build-css 명령어를 통해 변경된 사항을 build 해준다.
위와 같이 파일 구성을 변경하며 모든 값을 변경할 수 있고, 여기에 새 값을 추가할 수 있다.
그럴 경우 디자인이 방식이 변경되지만, 실제로 변경한 값과 추가한 새 값을 확인하기 어렵기 때문에 기본 구성 내에서 값을 변경하는 것을 권장하지 않는다.
그렇기 때문에 full 대신 새로운 파일을 만드는 것을 추천!
핵심 값을 변경하지 않고, 추가한 추가 값을 더 쉽게 확인할 수 있기 때문이다.
그렇기 때문에 --full로 받은 파일의 이름을 다른 이름으로 변경 (ex, tailwind-default.config.js)하고, 새로운 빈 파일을 생성한다.
tailwind.config.js
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: '#FF6363',
secondary: {
100: '#E2E2D5',
200: '#888883',
}
}
},
},
plugins: [],
};
✏️ 글꼴 커스텀
google 등에서 폰트를 import 형식으로 가져와서 src/styles.css에 붙여 넣는다.
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');
@tailwind base;
@tailwind components;
@tailwind utilities;
이후 tailwind config file에서 해당 폰트에 대해 참조 가능
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: "#FF6363",
secondary: {
100: "#E2E2D5",
200: "#888883",
},
},
fontFamily: {
body: ["Montserrat"],
},
},
},
plugins: [],
};
✏️ Customizing Screens
Customizing Screens - Tailwind CSS
responsive classes
✏️ Common Components 만들기
반복적으로 동일한 클래스를 사용하면 지저분하기 때문에 @apply를 통해 해결할 수 있다.
src/style.css로 이동
컴포넌트 작성
.card {
@apply bg-white rounded overflow-hidden drop-shadow-lg relative
}
기존의 클래스명을 가져온 뒤 해당 요소에는 작성한 명칭을 붙인다.
제@apply를 통해 공통 속성을 만들고자 하는 경우, 공통적인 성격을 지닌 것을 한정적으로 만들고, 개별적인 요소들은 클래스에 직접 기입하는 방식으로 사용하는 것이 좋다.
✏️ Grid 사용법
<div class="grid lg:grid-cols-3">
</div>
와 같이 사용하여 grid를 적용할 수 있다.
✏️ hover 사용하기
hover:shadow-inner
<div class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner">
Load more
</div>와 같이 클래스명에 사용한다.
후기
격동하는 프런트엔드 시대에서 현재 핫한 CSS 프레임워크 대표주자가 아닐까 하는 tailwindCSS를 처음 다루어 보고 찾아보게 되었다. 어떤 점에서 이 프레임워크가 사람들의 주목을 받고 있게 된 것인지 사용해보면서 직접 체감할 수 있었던 것 같다. 코드가 못생겨지는 치명적인 단점이 존재하지만, 이러한 단점을 무릅쓰고 다양한 CSS 요소들을 편리하게 클래스 명을 통해 기능 구현을 할 수 있다는 것은 큰 장점이지 않을까 생각한다.
본격적인 프로젝트가 들어가게 된다면, tailwindCSS를 기반으로 하여 UI 요소를 꾸며보고 싶다. 새로운 기능들을 알게 된다면 또다시 글로써 후기를 남기겠다.
참고
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&index=2/