Los 10 mejores complementos CSS de Tailwind

Tailwind CSS: Esto se llama marco CSS de utilidad primero que se utiliza para construir la interfaz de usuario personalizada. Es un marco CSS muy personalizable y de bajo nivel que gIt le proporciona los componentes básicos que lo ayudan a crear grandes diseños sin estilos molestos.

Los 10 mejores complementos CSS de Tailwind se detallan a continuación: 

1. Tipografía Tailwind CSS:

• Si desea diseñar un artículo o documento, o puede ser una publicación de blog, con la ayuda de Tailwind es muy difícil y requiere más atención a la tipografía y mucha personalización compleja de CSS.
• Esta característica ayuda a construir la aplicación en su front-end porque dedica menos tiempo a diseñar el componente.

Puedes descargarlo con el siguiente comando:

// Using npm
npm install @tailwindcss/typography

// Using Yarn
yarn add @tailwindcss/typography.

2. Tailwind CSS Formularios personalizados:

• Los formularios personalizados Tailwind CSS se utilizan para brindar una mejor apariencia y ayudar a brindar una mejor personalización al agregar algunas utilidades
• Se utiliza para personalizar fácilmente y mejorar la forma.

Puedes descargarlo con el siguiente comando:

// Using npm
npm install @tailwindcss/custom-forms --save-dev

// Using Yarn
yarn add @tailwindcss/custom-forms -D

3. Complemento de tabla CSS Tailwind:

• Este complemento se utiliza para crear una tabla de arranque en Tailwind css.
• Se hereda en Bootstrap y, con la ayuda, puede hacer que la tabla anidada sea la misma que la tabla principal.

Puedes descargarlo con el siguiente comando:

// With using NPM
npm install tailwindcss-tables --save

// With usingYarn
yarn add tailwindcss-tables

4. Complemento de tematización Tailwind CSS:

• Tailwind-theming es un complemento de CSS que se encarga de cambiar los múltiples temas en los sitios web.
• Generalmente se usa para crear el tema oscuro en los sitios web.

Puedes descargarlo con el siguiente comando:

$ yarn add tailwindcss-theming@next --dev

5. Tailwind CSS Truncar multilínea: 

• Ayuda en situaciones en las que queremos truncar el texto dentro de algunas tarjetas y aprendimos que puede ser bastante difícil hacerlo usando solo CSS.
• Para esto podemos usar Tailwind CSS que es un complemento de alto nivel veterinario que se usa para la personalización. Se utiliza para truncar un elemento de texto de varias líneas es agregar la clase .truncate-key-lines donde la clave es la cantidad de líneas que se muestran antes del truncamiento

Puedes descargarlo con el siguiente comando:

// With using npm
npm install tailwindcss-truncate-multiline --save

// With using yarn
yarn add tailwindcss-truncate-multiline 

6. Viento de cola CSS-Elevación:

• Este complemento proporciona la elevación de dos imágenes o componentes diferentes.
• Siempre que desee aplicar la elevación, debe utilizar las utilidades .elevation.
• Este es un ejemplo básico para agregar la elevación de CSS en el botón <button class=”elevation-1″>¡Haz clic en mí!</button>

Puedes descargarlo con el siguiente comando:

npm install tailwindcss-elevation

7. Relación de aspecto CSS de viento de cola:

• Este tipo de complemento se creó antes de la relación de aspecto. Es compatible con cualquier navegador.
• Este complemento requiere Tailwind CSS 1.2 o posterior. Proporciona tamaño personalizado en diferentes formas.
• Este complemento utiliza el tema de la configuración y los objetos de variantes para crear las utilidades de relación de aspecto.

Puedes descargarlo con el siguiente comando:

npm install tailwindcss-aspect-ratio

8. Gradientes CSS de viento de cola:

• Este complemento lo ayuda a proporcionar una transición muy suave entre los dos colores agregados.
• Estos complementos son actualizados regularmente por los desarrolladores.

Puedes descargarlo con el siguiente comando:

npm install tailwindcss-gradients

9. Pantallas de depuración de Tailwind CSS:

• Una pantalla de depuración CSS de Tailwind es un complemento que muestra el punto de interrupción de respuesta.
• Se puede personalizar fácilmente un tema y depurar el archivo tailwind.config.js.
• Puede configurar la opción del depurador para encontrar los puntos de interrupción fácilmente.

Puedes descargarlo con el siguiente comando:

npm install tailwindcss-debug-screens --save-dev

10. Spinner CSS de viento de cola:

• Todas las aplicaciones web requieren una versión anterior para cargar los datos. Así que Tailwind CSS spinner es un cargador que se personaliza muy fácilmente de acuerdo con los requisitos del usuario. También puede cambiar su color, ancho de tamaño, etc. según sus requisitos.
• Se puede utilizar con las clases de utilidad individuales.

// With using yarn
yarn add -D tailwindcss-spinner

// With using npm
npm install --save-dev tailwindcss-spinner