tailwind material 3

Material de viento de cola 3

Tailwind Material 3 es una biblioteca que proporciona componentes de UI listos para usar para usuarios de CSS. Incluye una gama de componentes personalizables, como botones, tarjetas y formularios, así como utilidades y ayudantes útiles. Instalar el material de viento de cola 3 es tan fácil como ejecutar lo siguiente

comandar en su terminal:

 npm i tailwind-materilal-3

La biblioteca se mantiene y actualiza activamente, asegurando que siempre tenga acceso a los últimos y mejores componentes de la interfaz de usuario. ¡Pruébelo y vea cómo puede ayudar a optimizar su proceso de desarrollo de UI!

Cómo usar

Para usar el material de viento de cola 3, primero asegúrese de tener CSS de viento de cola instalado en su proyecto. Luego, simplemente importe los componentes deseados de la biblioteca y úselos en su código HTML.

Siga las instrucciones

Paso 1

Instale tailwindcss a través de NPM y cree su archivo tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

Paso 2

Instale tailwind-material-3 a través de NPM.

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

Paso 3

Agregue las rutas a todos sus archivos de plantilla, colores y otras configuraciones en su archivo 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 : [ ] ,
} )

Paso 4

Agregue las directivas @tailwind para cada una de las capas de Tailwind a su archivo CSS principal.

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

Paso 5

¡Comience a usar los componentes en su 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 >

¡Eso es todo! Ahora sabe cómo usar el material de viento de cola 3 para optimizar su proceso de desarrollo de la interfaz de usuario. Pruébelo y vea cómo puede ayudarlo a ahorrar tiempo y esfuerzo en la construcción de interfaces hermosas y funcionales. Si tiene alguna pregunta o retroalimentación, no dude en comunicarse con nosotros. ¡Feliz codificación!