Tailwind CSS를 안전하게 덮어쓰고 보완, 정렬할 수 있는 자작 함수를 만들어 보았습니다.

자기 소개

지금은 대학교 3학년 학생입니다.
평소에는 넥스트.js, React Native를 중심으로 프런트엔드 개발을 진행합니다.

너 이런 고민 있어...?

가끔 Tailwind CSS의 클래스 이름을 덮어쓸 수 없어서 곤란합니다

구성 요소 외부에서 Tailwind CSS의 클래스를 선택하고 싶습니다

Tailwind CSS Intellisense를 통해 자작 함수의 실제 매개 변수를 보충하고자 함

도 다시 배열하고 싶어!!

이번에 상술한 고민을 해결하기 위해서 나는 내가 조사한 결과를 총결하고 싶다!!

질문 확인 (클래스에 적힌 실패 사례)

!
클래스 이름의 연결 사용clsx.

// デフォルトで赤色のタイトルを表示するコンポーネント
type TitleProps = {
  className?: string
  children: string
}
const Title: FC<TitleProps> = ({ className, children }) => {
  return (
    <h2 className={clsx(className, 'text-5xl font-bold text-red-500')}>
      {children}
    </h2>
  )
}

// 複数のタイトルを表示するコンポーネント
const TitleListPage: NextPage = () => {
  return (
    <>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title className='text-blue-500'>青色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
      <Title>赤色のタイトル</Title>
    </>
  )
}
export default TitleListPage

결과↓↓

결과적으로 타이틀 구성 요소를 호출할 때text-blue-500가 순조롭지 못했다.원본text-red-500과 text-blue-500가 중복되기 때문에 Tailwind CSS 측에서 먼저 정의한text-red-500이 우선으로 여겨진다.

해결책

뒤에 있는 클래스 이름보다 우선적으로 중복된 이쪽 라이브러리를 제거합니다!
https://github.com/richardgill/tailwind-override

사용법

example

import { overrideTailwindClasses } from 'tailwind-override'

overrideTailwindClasses('pt-2 pt-4')
// => 'pt-4'

overrideTailwindClasses('text-pink-200 text-blue-200')
// => 'text-blue-200'

overrideTailwindClasses('text-pink-200 pt-2')
// => 'text-pink-200 pt-2' (don't clash)

overrideTailwindClasses('orange apple')
// => 'orange apple' (not tailwind classes)

overrideTailwindClasses('dark:md:text-pink-200 dark:md:text-blue-200')
// => 'md:text-pink-200 md:text-blue-200'

overrideTailwindClasses('text-pink-500 !text-[#ffaa11]/25')
// => '!text-[#ffaa11]/25'

아주 간단해요!!
겸사겸사 clsx의 느낌을 적어주세요!
utils/classNames.ts

import clsx, { ClassValue } from 'clsx'
import { overrideTailwindClasses } from 'tailwind-override'

export const cn = (...classNames: ClassValue[]) => {
  return overrideTailwindClasses(clsx(...classNames.reverse()))
}

여러 번 호출해야 하기 때문에 함수 이름은 cn입니다.overrideTailwindClasses 뒤에 있는 클래스가 우선이기 때문에 ...classNames.reverse() 앞에 있는 클래스에 우선적으로 쓴다.

동작 확인

방금 코드의 clsx 부분을 자체 제작cn으로 바꿉니다.
부분 발췌문

const Title: FC<TitleProps> = ({ className, children }) => {
  return (
-   <h2 className={clsx(className, 'text-5xl font-bold text-red-500')}>
+   <h2 className={cn(className, 'text-5xl font-bold text-red-500')}>
      {children}
    </h2>
  )
}

결과↓↓

성공했어!검증 도구를 사용해서 열어도 예쁘게 덮어쓸 수 있는지 확인할 수 있습니다.

근데 문제가 있어요.cn 호출 시 매개변수 Tailwind Intellisense 및 정렬이 작동하지 않습니다.
이것도 해결될 거야!

Tailwind CSS 클래스는 자체 함수 cn의 실제 매개변수를 보완하는 역할을 합니다.

Tailwind CSS 클래스를 자체 함수의 실제 매개변수(위)에서 보충하여 settings 역할을 합니다.json에 다음 설정을 추가합니다.
참조
https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659
.vscode/settings.json

{
   "tailwindCSS.experimental.classRegex": [["cn\\(([^)]*)\\)", "'([^']*)'"]]
}

자작 함수 cn의 실제 매개 변수로 정렬

우선 아래 사이트 도입eslint-plugin-tailwindcss을 참고하세요.
https://morioh.com/p/6d2276c5731c
가져오기가 완료되면 eslint 설정에 다음 내용을 추가합니다.
.eslintrc

{
  "settings": {
    "tailwindcss": {
      "callees": ["classnames", "clsx", "ctl", "cn"],
    }
  }
}

!
현재prettier-plugen-tailwindcss가 발매되었고 정렬도prettier를 통해 할 수 있지만 callees에서 옵션을 찾을 수 없기 때문에eslint를 통해 설정하고 있습니다.
아는 사람 있으면 메모 남겨주시면 좋겠습니다()

최후

이번에는 메모를 포함한Tailwind CSS 레벨의 덮어쓰기, 보완, 정렬을 총결하였습니다!
이 기사에 조금이라도 도움이 된다면 정말 기쁠 거예요!!
Tailwind CSS 최고!!!!!