tailwind material 3

꼬리 바람 재료 3

Tailwind Material 3은 Tailwind CSS 사용자를위한 즉시 사용 가능한 UI 구성 요소를 제공하는 라이브러리입니다. 버튼, 카드 및 양식과 같은 다양한 사용자 정의 가능한 구성 요소뿐만 아니라 유용한 유틸리티 및 도우미가 포함됩니다. Tailwind Material 3 설치 3은 다음을 실행하는 것만 큼 쉽습니다.

터미널의 명령 :

 npm i tailwind-materilal-3

라이브러리는 적극적으로 유지 관리 및 업데이트되어 최신 UI 구성 요소에 항상 액세스 할 수 있도록합니다. UI 개발 프로세스를 간소화하는 데 어떻게 도움이 될 수 있는지 알아보십시오!

사용 방법

Tailwind Material 3을 사용하려면 먼저 프로젝트에 Tailwind CSS가 설치되어 있는지 확인하십시오. 그런 다음 라이브러리에서 원하는 구성 요소를 가져 와서 HTML 코드에서 사용하십시오.

지침을 따르십시오

1 단계

NPM을 통해 tailwindcss 설치하고 tailwind.config.js 파일을 만듭니다.

npm install -D tailwindcss
npx tailwindcss init

2 단계

NPM을 통해 tailwind-material-3 설치하십시오.

npm i tailwind-material-3 tailwind-material-colors

3 단계

tailwind.config.js 파일에 모든 템플릿 파일, 색상 및 기타 구성에 경로를 추가하십시오.

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

4 단계

각각의 Tailwind 레이어에 대한 @tailwind 지시문을 기본 CSS 파일에 추가하십시오.

@tailwind base ;
@tailwind components ;
@tailwind utilities ;

5 단계

HTML 코드에서 구성 요소 사용을 시작하십시오!

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

그게 다야! 이제 Tailwind Material 3을 사용하여 UI 개발 프로세스를 간소화하는 방법을 알고 있습니다. 그것을 시도하고 아름답고 기능적인 인터페이스를 구축하는 데 시간과 노력을 절약 할 수있는 방법을 확인하십시오. 질문이나 피드백이 있으시면 언제든지 저희에게 연락하십시오. 행복한 코딩!