tailwind material 3

Material de Tailwind 3

O Tailwind Material 3 é uma biblioteca que fornece componentes de interface do usuário prontos para uso para usuários de CSS do Tailwind CSS. Ele inclui uma variedade de componentes personalizáveis, como botões, cartões e formulários, além de utilitários e ajudantes úteis. Instalar o material do vento de cauda 3 é tão fácil quanto executar o seguinte

comando em seu terminal:

 npm i tailwind-materilal-3

A biblioteca é mantida e atualizada ativamente, garantindo que você sempre tenha acesso aos componentes mais recentes e mais recentes da interface do usuário. Experimente e veja como isso pode ajudar a otimizar seu processo de desenvolvimento da interface do usuário!

Como usar

Para usar o Material Tailwind 3, primeiro verifique se você tem CSS de Tailwind instalado em seu projeto. Em seguida, basta importar os componentes desejados da biblioteca e usá -los no seu código HTML.

Siga as instruções

Etapa 1

Instale tailwindcss via NPM e crie seu arquivo tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

Etapa 2

Instale tailwind-material-3 via NPM.

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

Etapa 3

Adicione os caminhos a todos os seus arquivos de modelo, cores e outras configurações no seu arquivo 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 : [ ] ,
} )

Etapa 4

Adicione as diretivas @tailwind para cada uma das camadas do Tailwind ao seu arquivo CSS principal.

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

Etapa 5

Comece a usar os componentes no seu código 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 >

É isso! Agora você sabe como usar o material do Tailwind 3 para otimizar seu processo de desenvolvimento da interface do usuário. Experimente e veja como isso pode ajudá -lo a economizar tempo e esforço na construção de interfaces bonitas e funcionais. Se você tiver alguma dúvida ou feedback, sinta -se à vontade para nos alcançar. Codificação feliz!