Blade 및 TailwindCSS를 사용하여 변수에서 파생된 클래스 이름 처리

먼저 TailwindCSS가 이미 Laravel로 설정되어 있어야 합니다. 이렇게 하려면 official documentation at TailwindCSS 을 따를 수 있습니다.


TailwindCSS에서는 content의 tailwindcss.config.js 배열 내에 지정한 모든 파일에 클래스가 있어야 하므로 개발 중에 *.blade.php 파일 내의 변수 사용으로 인해 스타일이 누락될 수 있습니다(예:).

다음과 같은 경우를 생각해 보십시오. 배경색을 제외하고 정확히 동일하게 보이는 버튼이 거의 없습니다.

<!-- button for default operations: eg. login -->
<button type="button" class="bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 focus:ring-4 text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">Default</button>

<!-- button for potentially dangerous operations: eg. disabling 2FA -->
<button type="button" class="bg-orange-700 hover:bg-orange-800 focus:orange-orange-300 focus:ring-4 text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">Warning</button>

<!-- button for dangerous operations: eg. deleting -->
<button type="button" class="bg-red-700 hover:bg-red-800 focus:ring-red-300 focus:ring-4 text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">Danger</button>

각 버튼에서 변경되는 것은 배경색에 적용된 css 유틸리티 클래스입니다. 이제 마크업이 동일하고 텍스트 스타일도 각 버튼과 일치하므로 Anonymous Blade Component 버튼을 만들어 보겠습니다.

// ./resources/views/components/button.blade.php
@props(['color' => 'blue'])

<button type="button" class="bg-{$color}-700 hover:bg-{$color}-800 focus:ring-{$color}-300 focus:ring-4 text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
    {{$slot}}
</button>

그리고 다음과 같이 우리의 관점에서 사용하십시오.

<x-button color="blue"> Default </x-button>

그러나 클래스 이름이 php 변수( bg-{$color}-700 )를 사용하기 때문에 TailwindCSS는 이를 추출할 수 없으며(npm run watch/npm run dev 실행하는 것을 잊지 마십시오) 버튼이 예상대로 표시되지 않습니다(거의 보이지 않음). , 흰색 배경에 흰색 텍스트 yikes).

이 문제를 해결하기 위해 views/components/button의 새 폴더에서 단추의 상태를 나타내는 몇 가지 새 구성 요소와 이들 사이의 공통 스타일을 포함하는 하나의 기본 구성 요소를 생성해 보겠습니다.

// ./resources/views/components/button/base.blade.php
<button type="button" {{$attributes->merge([class="text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"])}}>
    {{$slot}}
</button>

이제 버튼의 기본 "상태"를 만들어 보겠습니다.

// ./resources/views/components/button/default.blade.php
<x-button.base class="bg-blue-700 hover:bg-blue-800">
{{$slot}}
</x-button.base>

그리고 다음과 같이 뷰에서 Default 버튼을 사용할 수 있습니다.

<x-button.default>Default</x-button>

npm run dev 를 실행하면 이제 버튼에 배경색이 있는 것을 볼 수 있습니다. 가지고 있는 모든 버튼 상태에 대해 동일한 작업을 수행할 수 있으며 tailwindcss는 문제 없이 해당 클래스를 추출할 수 있습니다.