Tailwind CSS란?

Tailwind는 공식 페이지에서 말하길 'utility-first CSS framwork'라고 한다.
이 말인 즉슨 Tailwind가 아주 많은 class를 가지고 있고 우리는 이 여러 class명을 조합하여 가져다 쓸 수 있도록 해준다는 것이다.
flex, pt-4, mx-auto, bg-white 등 원하는 속성에 해당하는 클래스명을 가져다 쓰기만 하면 css 스타일을 적용할 수 있다.
색상에 대해서도 색상명-50에서 색상명-900 까지 여러 색상에 대해 채도를 조절하여 사용할 수도 있다.
개인적으로 좋다고 생각하는 점은 간단한 속성 뿐만아니라 shadow도 shadow-sm, shadow-lg 등을 통해 간단하게 적용할 수있다는 점이 생산성을 매우 높여줄 수 있다고 생각한다.

Tailwind CSS가 다른 CSS 프레임워크 (부트스트랩, Ant 디자인 등)와는 차별점을 가지는 점은 디자인에 제약이 적다는 점이다. 다른 프레임워크들은 해당 프레임워크만의 디자인 내에서 수정해야하는데 Tailwind는 클래스명의 조합으로 여러 디자인을 만들어낼 수 있다는 점도 매우 강력한 점인 것 같다.

반응형 지원을 위한 클래스도 지원한다. 이 부분은 추후 사용할 때 다시 보기로 하겠다.

이외에도 transform, filter 등도 지원한다고하니 기대가 된다.

Tailwind CSS 자동완성 Extension

Tailwind CSS는 엄청 큰 CSS class명의 집합이라고 생각하면 되는데, 해당 class명을 다 기억할 수는 없으므로 auto complete기능을 활용하면 좋다.
VSCode에서 Tailwind CSS IntelliSense 확장을 깔아주도록 하자

설치를 하면 이제 자동완성 기능이 작동하는 것을 확인할 수 있다.

예시

import type { NextPage } from "next";

const Home: NextPage = () => {
	return (
		// <div className="bg-slate-400 py-10 px-5 flex flex-col space-y-5">
		// {/* space-y-5는 그냥 css 속성이 아니라 helper function이다. 자식간에 margin을 위아래로 5씩 줄 수 있도록 해준다. 매우 편리함! */}
		<div className="bg-slate-400 py-10 px-5 grid gap-10">
			<div className="bg-white p-6 rounded-xl shadow-lg">
				<span className=" font-semibold text-3xl">Select Item</span>
				<div className="flex justify-between my-2">
					<span className="text-gray-500">Gray Chair</span>
					<span className="font-semibold">$19</span>
				</div>
				<div className="flex justify-between">
					<span className="text-gray-500">Gray Chair</span>
					<span className="font-semibold">$19</span>
				</div>
				<div className="flex justify-between mt-2 pt-2 border-t-2 border-dashed">
					<span>Total</span>
					<span className="font-semibold">$38</span>
				</div>
				<div className="mt-5 bg-blue-500 text-white p-3 text-center rounded-xl w-2/4 mx-auto">Checkout</div>
			</div>
			<div className="bg-white p-10 rounded-lg shadow-lg"></div>
			<div className="bg-white p-10 rounded-lg shadow-lg"></div>
			<div className="bg-white p-10 rounded-lg shadow-lg"></div>
		</div>
	);
};

export default Home;

개인적으로는 styled-component를 많이 사용했었는데 tailwind를 이용해 class명으로 스타일을 지정하는 방식도 꽤나 간편한 것 같다. 하지만 jsx부분이 너무 길어진다는 단점도 있다...

tailwind를 styled-component처럼 사용할 수 있게 해주는 패키지도 있는 것 같다.

https://www.npmjs.com/package/tailwind-styled-components

위의 npm 패키지를 설치해 사용한다면 꽤나 편하게 사용할 수 있겠다.

const Button = tw.div`
    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}

    flex
    inline-flex
    items-center
    border
    border-transparent
    text-xs
    font-medium
    rounded
    shadow-sm
    text-white

    hover:bg-indigo-700
    focus:outline-none
`

플러그인

Tailwind 환경에서 부가적인 기능을 제공해주는 플러그인을 사용할 수 있다. 공식으로 지원한느 플러그인이니 안심하고 사용해도 될 듯하다.
내가 사용할 것은 '@tailwindcss/forms'라는 기본적인 form의 형태를 갖추게 도와주는 플러그인이라고 한다.

https://tailwindcss.com/docs/plugins

npm i @tailwindcss/forms

플러그인을 사용하기 위해서는 tailwind.config.js를 수정해주어야 한다.

module.exports = {
	...
	plugins: [
     	...,
   		require('@tailwindcss/forms'),
   ],
};