반응과 함께 tailwindcss를 사용하는 방법

나는 react와 함께 tailwindcss를 사용하는 것을 좋아하지만 때때로 한 줄에 있는 클래스의 양 때문에 길을 잃은 느낌이 듭니다.

<button className="inline-flex items-center p-2.5 text-sm text-slate-600 hover:text-slate-700 dark:text-slate-300 dark:hover:text-slate-200 .....">button</button>

이 "문제"를 해결하기 위해 가장 먼저 생각한 것은 이러한 클래스로 개체를 만드는 것이 었습니다.

export const styles = {
  base: `
   inline-flex
   items-center

   p-2.5

   text-sm
   text-slate-600
   hover:text-slate-700
   dark:text-slate-300
   dark:hover:text-slate-200

   border
   rounded-lg

   bg-white
   hover:bg-gray-50
   dark:bg-gray-900
   dark:hover:bg-gray-800

   ease-in
   transition
   duration-150

   focus-visible:ring-1
   focus-visible:ring-blue-500
   focus-visible:border-blue-500
   focus-visible:outline-none
   dark:border-gray-800
   dark:focus-visible:border-blue-500
  `
}

더 읽기 쉽고 깨끗합니다.

import styles from './button.styles';

function Button(props) {
  return <button className={styles.base} {...props} />
}

그렇다면 다른 클래스를 관리하거나 병합하는 방법은 무엇입니까? 이를 위해 이러한 클래스를 처리하는 후크를 만들었습니다.

import clsx from 'clsx';

export function createStyles<Classes = string>(input: Classes) {
  let useStyles = () => ({
    cx: clsx,
    classes: input,
  });

  return useStyles;
}

스타일을 업데이트해 보겠습니다.

import { createStyles } from '@/utils/createStyles';

export const useStyles = createStyles({
  base: `
   inline-flex
   items-center

   p-2.5

   text-sm
   text-slate-600
   hover:text-slate-700
   dark:text-slate-300
   dark:hover:text-slate-200

   border
   rounded-lg

   bg-white
   hover:bg-gray-50
   dark:bg-gray-900
   dark:hover:bg-gray-800

   ease-in
   transition
   duration-150

   focus-visible:ring-1
   focus-visible:ring-blue-500
   focus-visible:border-blue-500
   focus-visible:outline-none
   dark:border-gray-800
   dark:focus-visible:border-blue-500
  `,
  appearances: {
    primary: 'bg-purple-600',
    success: 'bg-green-600',
  }
});

그리고 우리의 구성 요소:

import { useStyles } from './button.styles';

function Button(props) {
  let { appearance = 'primary' } = props;
  let { cx, classes } = useStyles();

  return <button className={cx(classes.base, classes.appearances[appearance])} {...props} />
}

이 접근 방식을 사용하면 코드의 각 부분을 귀하의 책임하에 보관하여 유지 관리가 용이합니다.

출처 확인:
https://github.com/mverissimo/react-tailwind-classnames