일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 리액트
- heroku
- node.js
- CSS
- HTML
- TypeScript
- ECMAScript
- javscript
- backend
- clonecoding
- MongoDB
- Flutter
- ES6
- graphQL
- NextJs
- Session
- CLONE
- pug
- DART
- nodejs
- Component
- form
- Mongoose
- express
- 자바스크립트
- frontend
- JavaScript
- GRID
- react
- API
- Today
- Total
Enjoy Programming
Tailwind css 본문
이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는
기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다)
뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다.
기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게
간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다.
뭐 그냥 css in html로 tag하나 작성해서 만들어줘도 무방하나 코드가 많이 지저분해 보인다...(바빠서 그렇게 했지만...)
자 그럼 tailwind의 특징을 알아보자. utility first란 무엇인가.
다들 bootstrap은 이용해 보았을 것이다. bootstarp과 비슷하게 css가 먹어진 유틸리니 클래스를 활용해서 html내에 직접 스타일링을 하는 방식이다.
아주 큰 장점은 코드가 아주 빠르게 작성 된다는 점이다. 기존 styled component는 컴포넌트 구조들 짜고
css 컴포넌트 만들어주고 뭐하나 추가할때마다 컴포넌트 생성 생성 !! 그리고 literal안에 css 코드를 일일히 작성 해준다.
물론 snipet이라는 강력한 extension이 있어서 이것도 금방 짜긴 하지만...
따로 빼서 스타일 파일 만들고 이럴 필요가 없다.
이렇게 코드창 두개 켜놓고 할 필요가 없는 것이다. 참고로 필자는 저렇게 코드창 두개 켜놓기 싫어서
개발단에서 개발할때는 해당 페이지의 root 컴포넌트에서 모든 컴포넌트 및 css 컴포넌트 만들어서 다 작업 후
코드 분할을 해주고 컴포넌트를 나누며 작업햇다.
근데 tailwind는 ?!
보라.. 그냥 tag in css이다 아니 엄밀히 말하면 tag in utility class라고 해야하나?
프로젝트 하기 전에 집에서 연습삼아 테스트 해보는데 확실히 빠르다.
그리고 중요한 컴포넌트 명을 고민하지 않아도 된다 ㅠㅠ!!! 👍 awesome!
자 그리고 무슨 장점이 있을까?
부트스트랩이나 다른 framework에 비해 기본 스타일 값을 디테일하게 커스터마이징이 가능하다. 또한 다크모드 구현도 간편하다고 한다!
자 이외의 단점은 무엇이 있을까..
코드가 인라인이다 보니 못생겼다.. ㅎㅎㅎㅎ 뭐 이미 필자는 코드를 못생기게 짜니까 패스
그리고 클래스 네임을 다 알지 못하다 보니 일일히 찾아가며 해야하는 단점
가장 큰 단점인 클래스 명을 html에 직접 쓰다보니 태그의 클래스가 반복될 경우 용량 손해가 있다는 것인데.
nextjs를 이용하면 따로 @apply문법을 활용하여 css파일에 클래스를 선언한 뒤 사용한다면 쉽게 해결이 가능하다.
그리고 javascript문법을 사용할 수 없다는 점? 이건 좀 겪어봐야 알겠다.
아무튼 필자는 테스트 해보며 만족하고 있다.
앞으로 사소한 건 기록 하지 않고 굵직한 메커니즘이나 중요시 될 만한 기술에 대해 서술 하겠다.
설치과정 같은건 인터넷에 뒤져보면 잘 나오니 참고하시길!
'CSS > TailwindCss' 카테고리의 다른 글
[animation] custom animation - animation-play-state (0) | 2022.11.07 |
---|---|
[@layer] 기록 (0) | 2022.05.10 |