필라멘트 테마에 대한 테일 바람 대신 다른 CSS 프레임 워크를 사용할 수 있습니까?

간단한 대답은 필라멘트가 주로 Tailwind CSS와 함께 작동하도록 설계되었으며, 구성 요소, 테마 및 UI는 Tailwind의 유틸리티 클래스 및 컨벤션에 크게 의존한다는 것입니다. 이 단단한 커플 링은 다른 CSS 프레임 워크의 테일 바람을 공식적으로 지원하거나 간단하지 않음을 의미합니다. 그러나 약간의 노력과 사용자 정의로 필라멘트와 함께 사용하기 위해 다른 CSS 프레임 워크를 조정할 수는 있지만 여기에는 사용자 정의 테마 건설, 기본 스타일을 무시하고 일부 UI 부품을 처음부터 재건 할 수 있습니다.

***

필라멘트의 Tailwind CSS에 대한 의존성

Filament는 Tailwind CSS를 기본 및 핵심 스타일 프레임 워크로 사용합니다. 전체 설계 시스템 및 구성 요소는 레이아웃, 간격, 색상, 타이포그래피, 응답 성, 상호 작용 및 테마에 대한 Tailwind의 유틸리티 클래스를 활용합니다. 기본 관리자 UI는 Tailwind로 제작되었으며 많은 필라멘트 플러그인 및 확장 기능도 CSS 재단으로 Tailwind를 가정합니다.

Tailwind CSS는 유틸리티 우선 접근 방식을 사용하기 때문에 필라멘트 테마에는 기존 CSS를 작성하거나 전 세계적으로 정의 된 클래스에 의존하는 대신 Tailwind 유틸리티를 추가하고 사용자 정의하는 것이 포함됩니다. 이로 인해 매우 유연하고 사용자 정의 가능한 UI가 발생하지만 필라멘트 구성 요소는 테일 윈드 유틸리티가 올바르게 렌더링 될 것으로 예상합니다.

***

필라멘트와 함께 다른 CSS 프레임 워크 사용 : 도전 및 접근

Tailwind CSS를 Bootstrap, Bulma, Foundation 또는 Insicainize와 같은 다른 CSS 프레임 워크로 교체하려고 시도하면 몇 가지 과제가 있습니다.

-클래스 이름 및 유틸리티 : 다른 프레임 워크마다 클래스 이름과 CSS 방법론이 다릅니다 (예 : 부트 스트랩은`.btn`,`.container`와 같은 시맨틱 클래스 이름을 사용하는 반면 Tailwind는`bg-blue-500`,`p-4`)와 같은 유틸리티 클래스를 사용합니다. 필라멘트 구성 요소는 Tailwind의 클래스 이름을 광범위하게 사용하므로 CSS를 교체하려면 구성 요소 클래스를 다시 작성하거나 새로운 프레임 워크에서 유사한 스타일을 생성해야합니다.

- 응답 성 및 그리드 시스템 : Tailwind는 모바일 우선 그리드 시스템을 기반으로 자체 응답 디자인 유틸리티를 사용합니다. 다른 프레임 워크에는 테일 윈드의 접근 방식에 깨끗하게 매핑되지 않을 수있는 다른 그리드 및 브레이크 포인트 정의가 있습니다.

- 사용자 정의 구성 요소 및 상호 작용 : 많은 필라멘트 UI 구성 요소는 테일 윈드 기반 전환, 애니메이션 및 상태를 통합합니다. JavaScript 또는 기타 CSS 프레임 워크 기능을 사용하여 복제해야 할 수도 있습니다.

-빌드 프로세스 : 필라멘트의 빌드 프로세스에는 일반적으로 필요한 CSS 클래스 만 생성하기 위해 Tailwind의 JIT (Just-In-Time) 컴파일러 구성이 포함됩니다. 다른 프레임 워크를 사용한다는 것은 CSS 빌드 파이프 라인을 조정하거나 교체하는 것을 의미합니다.

이러한 장애에도 불구하고 다른 프레임 워크를 사용하려는 고급 사용자는 다음을 고려할 수 있습니다.

- 사용자 정의 필라멘트 테마 구축 : 필라멘트의 기본보기 및 블레이드 구성 요소를 무시하여 선택한 CSS 클래스를 사용하여 Tailwind 대신 CSS 프레임 워크 클래스를 적용 할 수 있습니다. 이를 위해서는 필라멘트 내부와 선택한 CSS 프레임 워크에 대한 깊은 지식이 필요합니다.

- 테일 윈드 호환 확장자 사용 : 일부 CSS 프레임 워크 또는 UI 라이브러리는 테일 윈드 (예 : Daisyui) 위에 구축되거나 호환되며, 미리 빌드 구성 요소를 추가하고 테일 윈드 CSS 위에 완전히 교체 할 수없는 테마를 추가 할 수 있습니다.

- Tailwind CSS를 바닐라 CSS 또는 사용자 정의 유틸리티 프레임 워크로 교체 : 전체 CSS 프레임 워크 대신 일부 개발자는 Tailwind의 접근 방식에서 영감을 얻은 최소한의 CSS 유틸리티 라이브러리를 만듭니다. 이것은 효과가 있지만 많은 스타일을 직접 구축하는 것을 의미합니다.

***

스타일링 필라멘트를위한 Tailwind CSS 대안

필라멘트에 다른 CSS 프레임 워크를 사용하려면 다음은 인기있는 대안 과이 사용 사례를 비교하는 방법에 대한 간단한 개요가 있습니다.

-부트 스트랩 : 버튼, 양식, 그리드 등에 미리 정의 된 클래스가 포함 된 구성 요소 기반 스타일을 제공하는 가장 널리 사용되는 CSS 프레임 워크는 부트 스트랩이 유틸리티 우선이 아닌 테일 윈드보다 무겁습니다. 부트 스트랩을 필라멘트와 통합하려면 부트 스트랩 클래스를 사용하여 필라멘트 템플릿의 모든 테일 윈드 클래스를 다시 작성하고 부트 스트랩의 JavaScript와 대화식 동작을 다시 작성해야합니다.

- Bulma : Flexbox를 기반으로 한 현대적이고 경량 CSS 프레임 워크. 모듈 식이며 유틸리티 우선 클래스가 아닌 의미 론적 클래스 이름을 사용합니다. Bootstrap과 유사하게 Filament와 함께 Bulma를 사용하려면 맞춤 테마 재정의 및 Tailwind 유틸리티를 Bulma에 해당하는 것입니다.

- 기초 : 그리드 및 반응 형 레이아웃을 지원하는 또 다른 포괄적 인 CSS 프레임 워크. 학습 곡선 및 통합 복잡성은 부트 스트랩 및 Bulma와 유사합니다.

- Google의 재료 설계를 기반으로 구체화 또는 재료 UI : CSS 프레임 워크. 그들은 재료 설계 원칙과 일관되게 스타일링되는 미리 빌드 UI 구성 요소를 제공합니다. 테일 윈드 대신에 그것들을 사용한다는 것은 필라멘트의 UI를 재구성하여 자재 지침에 맞게 재건하고 재료 별 클래스 및 스크립트와 구성 요소를 조정하는 것을 의미합니다.

-Daisyui : 교체품이 아니라 스타일링을 단순화하기 위해 구성 요소 클래스를 제공하는 Tailwind CSS 용 플러그인. Tailwind를 핵심 프레임 워크로 유지하면서 CSS 워크로드를 줄일 수 있으며, Tailwind를 포기하지 않고 더 빠른 스타일을 원하는 Filament 사용자에게 유리합니다.

***

필라멘트와 함께 다른 CSS 프레임 워크를 사용하는 기술 단계

다른 CSS 프레임 워크를 진행하기로 선택한 경우 일반적인 기술 단계는 다음과 같습니다.

1. 충돌을 방지하기 위해 필라멘트 자산 파이프 라인에서 테일 윈드 CSS를 비활성화하거나 제거하십시오.

2. NPM, CDN 또는 직접 파일 포함을 통해 선택한 CSS 프레임 워크를 Laravel 프로젝트에 추가하십시오.

3. 필라멘트보기 및 구성 요소를 재정의 : 'PHP Artisan 공급 업체 : 게시'를 사용하여 필라멘트보기를 게시 한 다음 블레이드 템플릿을 편집하여 테일 윈드 클래스를 프레임 워크 클래스로 바꾸십시오.

4. 사용자 정의 구성 요소 재건 : 필라멘트가 대화식 구성 요소를위한 테일 윈드 클래스에 의존하는 경우 JavaScript 또는 CSS 프레임 워크의 JavaScript 유틸리티를 사용하여 대화식 부품을 다시 작성하십시오.

5. 구성 조정 : CSS 및 JS 자산 경로를 수용하는 데 필요한 경우 필라멘트 구성 파일 업데이트.

6. UI를 철저히 테스트하십시오 : 새로운 프레임 워크의 설계 패턴이 다를 수 있으므로 응답 디자인, 접근성 및 브라우저 호환성을 검증해야합니다.

***

필라멘트와 함께 다른 프레임 워크 사용의 혜택 및 단점

이익:

- 팀에 익숙한 기존 지식 및 디자인 시스템을 활용할 수 있습니다.
- 일관성을 위해 응용 프로그램의 다른 부분에 사용되는 CSS 프레임 워크를 재사용합니다.
- 선호하는 경우 더 기성품 UI 구성 요소가있는 프레임 워크를 사용할 수 있습니다.

단점 :

- 필라멘트는 기본적으로 Tailwind CSS를 위해 만들어 졌으므로 상당한 노력이 필요합니다.
-JIT CSS 생성, 테마 편의성 및 유틸리티 우선 유연성과 같은 엄격한 통합 이점을 잃습니다.
- 잠재적으로 CSS가 더 심해지고 로딩 시간이 길어집니다.
- 필라멘트 및 테마의 업데이트 및 유지 관리를 복잡하게 할 수 있습니다.

***

요약

Filament의 테마 시스템 및 UI 구성 요소는 Tailwind CSS와 깊이 통합되어 Tailwind가 필라멘트 테마 스타일을위한 기본 및 권장 CSS 프레임 워크를 만듭니다. 맞춤형 테마 및 재정의보기를 통해 Bootstrap, Bulma, Foundation 또는 INDATERISIZE와 같은 다른 CSS 프레임 워크를 기술적으로 사용하는 것이 가능하지만, 실질적인 사용자 정의 작업과 필라멘트와 대체 프레임 워크에 대한 이해가 필요합니다.

많은 개발자에게는 Tailwind를 완전히 교체하는 대신 Tailwind CSS를 구축하는 Daisyui와 같은 확장자 또는 플러그인을 사용하여 Tailwind의 장점을 잃지 않고 미리 빌드 구성 요소로 간단한 테마를 제공합니다.

결론적으로, 광범위한 사용자 정의를 통해 필라멘트와 함께 다른 CSS 프레임 워크를 사용할 수는 있지만, Tailwind CSS는 Filament의 설계 시스템에 맞는 깊은 통합, 유틸리티 우선 유연성 및 성능 최적화로 인해 필라멘트 테마 개발을위한 주요하고 가장 간단한 선택으로 남아 있습니다. 다른 프레임 워크를 사용하는 것이 필수적이라면, 필라멘트의 UI 구성 요소와 스타일을 해당 프레임 워크의 패러다임에 적응시키기위한 중요한 맞춤형 개발 노력을 준비하십시오.