쓰게 된 계기
노마드 캐럿마켓 클론코딩을 수강 중인데 강의에서 사용해서 공부하게 됐습니다.
사실 지금도 잘 모르지만 유명하다고 맨땅에 해딩하면서 nextjs에 잠깐 사용했을 때 css 코드 하나 구현하려고 문서를 이거저거 뒤져가면서 시간을 마구 흘려보낸 기억이 있어서 그냥 대충 따라치고 넘어가야지 하는 마음으로 들었는데 생각보다 어마어마하게 강력하다는 것을 강의를 들으면서 깨닫게 되었습니다...
장점
- 클래스 이름을 만드는 데 에너지를 낭비하지 않습니다
- CSS가 비대해지지 않습니다.
- 사이트 이펙트 걱정 없이 자유롭게 CSS를 바꿀 수 있습니다.
제가 그동안 그냥 쌩 css에 적응된 것도 있고 다른 사람들과의 진득한 협업 경엄이나 리팩토링 경험이 부족해서 css의 클래스 네이밍에 대한 큰 고려 없이 작성해왔다는 것을 위의 장점들과 다른 분들의 블로그를 보면서 깨닫게 되었습니다.
확실이 네이밍의 부분에서는 매우 강력한 장점을 가지고 있는 것 같습니다.
또한 직관적으로 스타일링이 읽혀서 파일을 왔다갔다 하지 않아도 되는 부분도 매우 큰 장점이라고 생각합니다.
강의를 들으면서 느낀 큰 강점은 생각보다 불필요한 js 코드를 줄여줄 수 있다는 점입니다.
그냥 만들면 정말 어려운 조건들을 레고 블록 조립하듯이 쉽게 만들 수 있었습니다.
다음 기본적인 사용 방법 예시를 말씀드리면서 설명드리겠습니다.
사용방법
기본적으로 클래스네임안에 세팅된 이름들을 넣기만 하면 됩니다.
export default function Home() {
return (
<main className="bg-gray-200 h-screen flex items-center justify-center p-5 sm:bg-red-100 md:bg-green-100 lg:bg-cyan-100 xl:bg-orange-100 2xl:bg-purple-100">
<div className="bg-white shadow-lg p-5 rounded-3xl w-full flex flex-col gap-3">
{["Leein", "Me", "You", "Yourself"].map((person, index) => (
<div
key={index}
className="flex items-center gap-5 p-2.5 rounded-xl border-b-2 pb-5 even:bg-cyan-100 odd:bg-gray-100 last:border-0 *:animate-pulse group"
>
<div className="size-10 bg-blue-400 rounded-full" />
<span className="text-lg font-medium group-hover:text-red-500">
{person}
</span>
<div className="size-6 bg-red-500 text-white flex items-center justify-center rounded-full animate-bounce">
<span>{index}</span>
</div>
<div className="w-40 h-4 rounded-full bg-gray-400"></div>
<div className="w-20 h-4 rounded-full bg-gray-400"></div>
</div>
))}
</div>
</main>
);
}
위의 이미지는 코드가 동작했을 때의 모습입니다.
호버, 포커스 및 기타 상태 처리
가상 선택자들을 이름: 다음과 같이 작성하여 쉽게 처리할 수 있습니다.
hover: dark: focus: active: ...
자식태그들을 자유롭게 선택할 수 있습니다.
first-child: last-child: odd: even:
미디어 및 기능 쿼리
화면의 넓이를 제공해주는 단위로 설정해서 미디어 쿼리를 손쉽게 사용할 수 있습니다.
sm에서 설정하고 있는 넓이값이 있는데 해당 값부터 뒤에 넣은 css가 적용된다는 뜻입니다.
sm: md: lg: xl: 2xl: ...
뭐라고 분류할지 모르겠지만 완전 짱짱맨으로 좋은 기능인 것 같은거
처음 설명에서 자바스크립트를 효과적으로 줄여준다는 말이 여기에 해당될 것 같습니다.
animate- peer- group- has-[] ...
위의 것들은 정말 코드를 간결하게 만들어 줄 수 있다고 느꼈습니다.
에니메이션을 간결하게 만들어주는데 스핀이나 바운스 등등 아주 쉽게 구현이 됩니다.
group은 부모의 특성을 자식에게 내려줘서 수도 요소에서 조건부로 사용할 수 있습니다.
peer는 동일 위계 노드들끼리 작동합니다.
이것도 문서 잘 읽어보면 정말 세밀하게 커스텀이 가능합니다.
has 이거는 대괄호 안에 뭐 있는지 하고 :로 css 넣으면 됩니다.
하위 요소들의 상태에 따라 상위 요소가 변하는 css를 만들어줍니다.
짱이죠^^??
사용자 정의 스타일
컨피그 파일에서 extend를 통해서 값을 추가로 넣어볼 수도 있습니다.
아래 코드는 공식문서의 코드로 기존에 존재하는 값을 직접 "공식네이밍-[]" 표현을 사용해서 넣어도 되고 아래와 같이 네이밍을 해서 사용할 수도 있습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}마지막으로 넘나 신기했던 것은 플러그인으로 쉽게 초기셋팅된 값들을 불러올 수 있다는 것입니다.
plugins: [require("@tailwindcss/forms")],위의 코드와 같이 컨피그 파일 안에서 세팅할 수 있는 값으로
플러그인을 설치해주고 불러오면 다양한 요소들을 사용할 수 있습니다.
빠르게 프로토타입을 뽑아야하는 경우 쉽게 가져올 수 있어서 상당히 매력적인 것 같습니다.
느낀점
확실히 인기가 있는 라이브러리는 이유가 있는 것 같습니다.
강의 얼마 듣지도 않은 쌩 초보가 잠깐 봐도 이리 좋은 것을...
어떤 라이브러리가 좋은지 판단이 되지 않으면 그냥 인기있는 것을 택하는 것이 매우 현명한 선택이라는 것을 배웠습니다.
또한 그냥 첨부터 막 엄청 좋은 코드를 뽑아내는 것이 아니라 빠르게 프로토타입을 만들어 내는 것이 중요하겠다는 점도 느낄 수 있었습니다.
좀 아쉬운 점은 제가 혼자 학습하면서 사용할 때는 왜 이런 좋은 기능을 알 수 없었는지 ㅠㅜ 개발자의 길은 참 멀고도 험한 것 같습니다.
그래도 포기하지 않고 계속 학습해서 언젠가는 강의 없이 공식 문서만으로도 뚝딱 일인분 해내는 개발자가 되겠습니다!
