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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 컴포넌트 분리
import React from 'react';

// 사용자 지정 Button 컴포넌트
const Button = ({ children, color = 'blue', size = 'medium' }) => {
  // 버튼의 클래스 이름을 동적으로 생성합니다.
  const baseClass = "relative inline-block text-white font-bold py-2 px-4 rounded";
  const colorClass = `bg-${color}-500 hover:bg-${color}-700`;
  const sizeClass = size === 'large' ? 'text-lg' : 'text-sm';

  return (
    <button className={`${baseClass} ${colorClass} ${sizeClass} before:bg-${color}-300 after:bg-${color}-700`}>
      {children}
    </button>
  );
};

export default Button;

// 하부 요소 분리
// 이전
  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
    <span class="relative text-white">annoyed</span>
  </span>

//이후
  <span class="relative">
    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">annoyed</span>
  </span>