tailwind custom
tailwind는 여러가지 클래스를 조합하여 사용할 수 있지만 지정된 클래스가 아닌 내가 원하는 css속성을 사용해야 할 때 tailwind.config.js 파일에서 속성을 추가하여 사용할 수 있다.
extend
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js,ts,tsx}"],
theme: {
extend: {
colors: {
green: "#5CB85C",
active: "rgba(0, 0, 0, 0.8)",
hoverLink: "rgba(0, 0, 0, 0.6)",
unActive: "rgba(0, 0, 0, 0.3)",
},
},
},
};
위의 코드 처럼 extend에 원하는 css속성을 추가하여 사용이 가능하다.
extend로 추가한 속성은 기존에 존재하는 속성값을 확장하여 등록해준다고 이해하면 좀 더 편하다고 생각한다.
또한 extend로 추가한 것들은 vscode의 자동완성에 자동으로 추가된다.
custom class
tailwind의 단점 중 하나는 element요소에 인라인으로 class를 입력해주기 때문에 많은 속성이 들어갈수록 가독성이 떨어지는 부분이라고 생각한다.
개인프로젝트를 진행하면서 반복되고 긴 코드는 항상 줄이려고 노력중인데 tailwind의 이런 단점을 해결하고 싶어서 두가지 방법을 찾아냈다.
@layer
첫째로 @tailwind 규칙을 추가하는 css파일에서 custom class를 작성해 주는것이다.
@layer는 base, components, utilities를 지정하여 사용이 가능하며
base는 html 기본태그의 스타일을 지정할 때 사용하고
components는 말그대로 컴포넌트의 스타일을 작성할 때 사용한다.
utilities는 편하게 사용할 수 있는 아무 클래스를 지정해주면 된다.
base를 제외한 두가지는 큰 차이가 없으니 편하게 사용해도 될 것같다.
그리고 @apply를 사용하여 tailwind의 style을 사용할 수 있으니 아래 코드를 참고하길 바란다.
//main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.screen-width {
@apply mx-auto lg:max-w-[1140px] md:max-w-[720px] sm:max-w-[576px];
}
}plugin에 추가
첫번째 방법의 단점은 추가한 class가 vscode의 자동완성 기능이 적용이 안된다.. 처음에 이방법으로 클래스를 추가했다가 불편해서 다른방법을 찾아봤고 두 번째방법을 소개한다.
tailwind.config.js의 plugin을 custom 하는 것이다.
// tailwind.config.js
module.exports = {
...
...
plugins: [
({ addUtilities }) => {
addUtilities({
".screen-width": {
"@apply mx-auto lg:max-w-[1140px] md:max-w-[720px] sm:max-w-[576px]":
"",
},
});
},
],
};
위 코드처럼 plugins에 addUtilities 함수를 이용하여 custom class를 추가해줄 수 있다.
이 방법은 vscode의 자동완성을 지원하기 때문에 사용하기 더 편리하다.
참조
