tailwindCss ::before ::after 어떻게 사용하시나요??

자주 사용하는 스타일에 대해서 컴포넌트 커스터마이즈를 통해 이를 구현할 수 있습니다. Props를 사용하여 컴포넌트 커스터마이즈: React 컴포넌트에서 props를 사용하여 가상 요소의 스타일을 동적으로 변경할 수 있도록 합니다. 이 방법은 컴포넌트 재사용성을 높이고, 다양한 상황에서의 스타일 변화를 쉽게 관리할 수 있게 해줍니다. 혹은 굳이 after와 before를 사용하지 않고 분리하는 방법이 있습니다. https://tailwindcss.com/docs/hover-focus-and-other-states#before-and-after 요소 안에 요소가 있는 것을 2개의 요소으로 분리하는 항목을 보시면 됩니다.

1// 컴포넌트 분리
2import React from 'react';
3
4// 사용자 지정 Button 컴포넌트
5const Button = ({ children, color = 'blue', size = 'medium' }) => {
6  // 버튼의 클래스 이름을 동적으로 생성합니다.
7  const baseClass = "relative inline-block text-white font-bold py-2 px-4 rounded";
8  const colorClass = `bg-${color}-500 hover:bg-${color}-700`;
9  const sizeClass = size === 'large' ? 'text-lg' : 'text-sm';
10
11  return (
12    <button className={`${baseClass} ${colorClass} ${sizeClass} before:bg-${color}-300 after:bg-${color}-700`}>
13      {children}
14    </button>
15  );
16};
17
18export default Button;
19
20// 하부 요소 분리
21// 이전
22  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
23    <span class="relative text-white">annoyed</span>
24  </span>
25
26//이후
27  <span class="relative">
28    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
29    <span class="relative text-white">annoyed</span>
30  </span>