Tailwind는 색상, 간격, 글꼴 크기 등과 같은 다양한 속성에 대해 미리 정의된 값 세트를 제공하는 CSS 프레임워크입니다. 그러나 때때로 사용자는 사용자 지정 색상 또는 특정 여백. 이 경우 임의의 값을 사용할 수 있습니다.

이 기사에서는 Tailwind CSS에서 임의의 값을 사용하는 방법에 대해 설명합니다.

Tailwind에서 임의의 값을 활용하는 방법은 무엇입니까?

임의 값은 Tailwind 구성 파일에서 정의하지 않고 HTML 클래스 특성에 직접 작성할 수 있는 사용자 지정 값입니다. [24px], [2.5rem] 등과 같은 대괄호 표기법이 접두사로 붙습니다. Tailwind에서 임의의 값을 활용하려면 대괄호 표기법을 사용하고 사용자 정의 값을 지정하여 유틸리티 클래스를 동적으로 생성하십시오.

더 나은 이해를 위해 아래 나열된 단계를 확인하십시오.

1단계: HTML 프로그램에서 임의의 값 사용

HTML 프로그램을 만들고 사용자 지정 값과 함께 대괄호 표기법을 활용하여 원하는 클래스를 만듭니다. 예를 들어, 우리는 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', 및 기타 클래스:

여기:

• 'bg-[#e9e516]' 클래스는
  의 배경색을 '#e9e516' (노란색).
• 'w-[600px]' 클래스는
  의 너비를 600픽셀로 설정합니다.
• 'h-[400px]' 클래스는 400픽셀의 높이를
  요소에 적용합니다.
• 'p-[13px]' 클래스는
  의 패딩을 13픽셀로 설정합니다.
• 'm-[19px]' 클래스는
  의 여백을 19픽셀로 설정합니다.

• '텍스트-[30px]' 클래스는

  요소의 글꼴 크기를 30픽셀로 설정합니다.

• '텍스트-[#7405ab]' 클래스는

  요소의 텍스트 색상을 보라색으로 설정합니다(#7405ab).

• '추적-[0.5rem]' 클래스는 문자 간격을

  요소에 0.5 rem으로 적용합니다.

2단계: 출력 확인

임의의 값이 제대로 작동하는지 확인하려면 HTML 웹 페이지를 보십시오.

위의 출력은 임의의 값이 정의된 대로 제대로 작동하고 있음을 나타냅니다.

결론

Tailwind에서 임의의 값을 활용하려면 HTML 프로그램에서 사용자 지정 값과 함께 대괄호 표기법을 사용하여 클래스를 동적으로 생성합니다. 사용자는 글꼴 크기, 색상, 너비, 높이, 여백, 패딩 등과 같은 숫자 또는 색상 값을 허용하는 모든 속성에 대해 값을 사용할 수 있습니다. 이 문서에서는 Tailwind CSS에서 임의의 값을 사용하는 방법을 설명했습니다.