>source

반응 구성 요소에 동적으로 tailwind 클래스를 할당하는 데 다음과 같은 멍청한 문제가 있습니다.

내 테마 색상을 확장했습니다.tailwind.config.js다음과 같이:

...
theme: {
    extend: {
      colors: {
        blueGray: {
           50: '#f6f9f9',
          100: '#e4f1f8',
          200: '#c2e0f0',
          300: '#91c0db',
          400: '#5b9bbf',
          500: '#4479a3',
          600: '#385f87',
          700: '#2d4768',
          800: '#203049',
          900: '#131d2f',
       },
       //OTHER COLORS
    },
  },
},
...

내 반응 구성 요소는 다음과 같습니다.

import Draggable from 'react-draggable';
type SensorProps= {
    name: string
    color: string
}
export default function Sensor(props : SensorProps): JSX.Element {
    return (
        <Draggable
            axis="both"
            bounds="flow-canvas">             <div className={`border-${props.color}-400  bg-${props.color}-50 text-${props.color}-700`}>              

{props.name}

</div> </Draggable> ) }

다음은 내 Sensor 구성 요소를 인스턴스화하는 방법의 몇 가지 예입니다.

<Sensor name={"Water Level"} color={"blueGray"} /><Sensor name={"Flow"} color={"mGreen"} />

문제는 클래스가 적용되지 않는데 내 페이지를 검사할 때 div에 올바른 클래스가 있다는 것입니다.

다음에서 전환하는 경우:

<div className={`border-${props.color}-400  bg-${props.color}-50 text-${props.color}-700`}>

다음으로:

<div className={`border-blueGray-400  bg-blueGray-50 text-blueGray-700`}>

작동합니다 :(

이미 tailwind JIT 컴파일러를 사용하고 있습니다.

...
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
...

제안 사항이 있습니까?

tailwindcss.com/docs/…, tailwindcss.com/docs/…

brc-dd2021-11-25 21:15:11

이것이 귀하의 질문에 대한 답변입니까? purgecs는 조건부 클래스를 인식할 수 없습니다.

juliomalves2021-11-25 21:15:11
  • 이전 Ruby에서 Fixnum의 길이를 어떻게 결정합니까?
  • 다음 java : 목록을 알파벳순으로 정렬하려면 어떻게 해야 합니까?