TailwindCSS 자주 사용하는 값 저장해 두기

스타일 저장

tailwindcss를 사용하면서 디자인을 하다보면 같거나 비슷한 값을 사용하는 경우가 많다.

<div className="w-full flex justify-between px-10 py-2 my-2">
<div className="flex gap-2 items-center cursor-pointer">
<div className="w-4 h-4 rounded border-2 border-500-gray" />
<span className="text-[11px] font-bold text-GrayGray-4 tracking-[2%]">

위의 코드는 아주 짧은 예시지만, tailwindcss에서 이런식으로 디자인을 하다보면 반복되는 코드도 많아지고 그로 인해 가독성이 떨어질 수 있다.

그러므로 가독성 및 유지보수를 위해 자주 사용되는 값이나, 반복되는 값을 따로 저장해두면 눈에 보기도, 성능면에서도 굉장히 좋다.

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .input-orange {
    @apply w-[265px] h-[29px] px-3 py-[10px] rounded-[4px] border-2 border-PrimaryOrange-1 placeholder:text-GrayGray-8 placeholder:font-medium placeholder:text-[13px];
  }
  .checklist-header-div {
    @apply w-1/4 flex items-center flex-col relative cursor-pointer;
  }
  .checklist-header-span {
    @apply text-sm text-white font-semibold;
  }
}

이렇게 tailwind의 기본 세팅이 되어있는 파일에 components 스타일을 정의하는 layer를 만들고, 그 안에 자주 사용되는 스타일을 정의하면 된다.

이렇게 정의해둔 스타일을 사용하면,

<input
	type="text"
    className="input-orange"
    placeholder="아이디를 입력해주세요."
    {...register("userId", { required: "아이디를 입력해주세요." })}
	/>
<input
    type="password"
    className="input-orange"
    placeholder="비밀번호를 입력해주세요."
    {...register("userPW", { required: "비밀번호를 입력해주세요." })}
    />

이런 식으로 같은 형식의 디자인의 코드를 줄이면서 가독성을 높일 수 있다.

그리고

<div className="checklist-header-div">
	<span className="checklist-header-span">글자</span>
</div>
<div className="checklist-header-div">
	<span className="checklist-header-span">글자</span>
</div>

이런 식으로 스타일의 이름을 명명해서, 이 부분에 어떤 스타일이 적용되어있는지 알아보기 쉽다.

---

색상 저장

그리고 tailwindcss를 사용하면서 자주 사용하는 색상을 저장해둘 수 있다.

tailwind.config.js 파일로 이동을 한 뒤,

//tainwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./renderer/pages/**/*.{js,ts,jsx,tsx}",
    "./renderer/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    colors: {
      GrayGray: {
        4: "#2E2E2E",
        7: "#939393",
        8: "#A8A8A8",
        9: "#EAEAEA",
      },
      Red: {
        1: "#DF0000",
      },
    },
    extend: {
      fontFamily: {
        글꼴: ["내-글꼴"],
      },
    },
  },
  plugins: [],
};

이런 식으로 tailwindcss/colors모듈을 불러온 후 변수에 저장한 뒤, 변수 안에 색깔의 이름과 번호를 명명한 뒤, 색상코드를 입력하면 된다.

이렇게 저장한 색깔을 사용하면

<span className="text-base font-bold text-GrayGray-4" />
<span className="text-[10px] font-bold text-GrayGray-7">
<button className="py-1 px-[6px] bg-GrayGray-9 text-GrayGray-7 text-[8px] font-bold">

이런 식으로 일일이 색상코드를 찾아 입력할 필요 없이 명명한 이름과 숫자를 입력해서 간편하게 스타일을 지정할 수 있다.

또한 사용자가 직접 이름을 지어주기 때문에, 해당 색상 코드가 어떤 색인지 쉽게 알아낼 수 있다.

참고로 글꼴도 저런 식으로 저장했다가 꺼내 쓸 수 있다.