[ad_1]
TailwindCSS es un marco CSS personalizable de bajo nivel para crear diseños modernos y responsivos utilizando clases de utilidad directamente dentro de HTML.
Una extensión o complemento TailwindCSS mejora el marco Tailwind CSS agregando nuevas características, utilidades, componentes y personalizaciones, aumentando así su flexibilidad y versatilidad.
1- Tipografía de viento de cola
El Tipografía CSS oficial de Tailwind El complemento ofrece clases de 'prosa' para mejorar los valores tipográficos predeterminados de HTML básico no controlado, como HTML renderizado desde Markdown o procedente de un CMS.
Instalar
Instalar desde NPM
npm install -D @tailwindcss/typography
Luego agregue el complemento a su tailwind.config.js archivo:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}¿Cómo utilizar?
Ahora puedes usar el prose clases para agregar estilos de tipografía sensibles a cualquier HTML básico:
<article class="prose lg:prose-xl">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
<!-- ... -->
</article>GitHub – tailwindlabs/tailwindcss-typography: Hermosos valores tipográficos predeterminados para HTML que no controlas.
Hermosos valores predeterminados tipográficos para HTML que no controlas. – tailwindlabs/tailwindcss-tipografía
GitHub – tailwindlabs/tailwindcss-typography: Hermosos valores tipográficos predeterminados para HTML que no controlas.
Hermosos valores predeterminados tipográficos para HTML que no controlas. – tailwindlabs/tailwindcss-tipografía
12- Formas de viento de cola
Formas de viento de cola es un complemento gratuito de código abierto que proporciona un restablecimiento básico de los estilos de formulario que hace que los elementos del formulario sean fáciles de anular con utilidades.
Instalar
npm install -D @tailwindcss/forms
Agregar a tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}@tailwindcss/ejemplos de formularios
GitHub – tailwindlabs/tailwindcss-forms: un complemento que proporciona un restablecimiento básico para los estilos de formulario que hace que los elementos del formulario sean fáciles de anular con utilidades.
Un complemento que proporciona un restablecimiento básico de los estilos de formulario que hace que los elementos del formulario sean fáciles de anular con utilidades. – tailwindlabs/tailwindcss-forms
13- Viento de cola Viento nocturno
Viento de la nocheuna herramienta de código abierto para Viento de cola, genera automáticamente versiones en modo oscuro de las clases de color Tailwind. Por ejemplo, una clase como 'bg-red-600' cambiaría a 'bg-red-300' en modo oscuro. Gestiona las transiciones a través de una clase fija 'nightwind' y alterna una clase 'oscura' en un elemento DOM de nivel superior.
Viento de la noche
Un complemento de modo oscuro Tailwind automático, anulable y personalizable.
GitHub – jjranalli/nightwind: un complemento de modo oscuro Tailwind automático, personalizable y anulable
Un complemento de modo oscuro Tailwind automático, personalizable y anulable: jjranalli/nightwind
14- Viento de cola más bonito
El viento de cola es un Complemento más bonito para Tailwind CSS v3.0+ que clasifica automáticamente las clases según el orden de clases recomendado.
GitHub – tailwindlabs/prettier-plugin-tailwindcss: un complemento Prettier para Tailwind CSS que clasifica automáticamente las clases según nuestro orden de clases recomendado.
Un complemento más bonito para Tailwind CSS que clasifica automáticamente las clases según nuestro orden de clases recomendado. – tailwindlabs/prettier-plugin-tailwindcss
Información sobre herramientas Tailwindcss ofrece información sobre herramientas muy simple solo en CSS para Tailwind CSS, con una demostración disponible en https://play.tailwindcss.com/2eBipAu8Bt.
GitHub – cosbgn/tailwindcss-tooltips: Información sobre herramientas muy simple solo CSS para Tailwind CSS
Información sobre herramientas muy simple solo CSS para Tailwind CSS. Contribuya al desarrollo de cosbgn/tailwindcss-tooltips creando una cuenta en GitHub.
Viento de colaCSS ofrece una variante para diseñar campos de formulario autocompletados.
GitHub – phuctm97/tailwindcss-autofill: 🎨 Variante TailwindCSS para aplicar estilo a los campos de formulario autocompletados.
🎨 Variante TailwindCSS para diseñar campos de formulario autocompletados. – phuctm97/tailwindcss-autocompletar
17- UI previa a la línea
IU previa a la línea es un conjunto de componentes de interfaz de usuario prediseñados de código abierto basados en el marco CSS Tailwind, que ofrece elementos como botones, menús desplegables, barras de navegación, modales y más para un diseño y personalización rápidos de sitios web responsivos para dispositivos móviles.
GitHub – htmlstreamofficial/preline: Preline UI es un conjunto de código abierto de componentes de UI prediseñados basados en el marco CSS Tailwind, que es la primera utilidad.
Preline UI es un conjunto de código abierto de componentes de UI prediseñados basados en el marco CSS Tailwind, que es la primera utilidad. – htmlstreamofficial/preline
18- Lo más destacado del viento de cola
El Resaltado de viento de cola.js El complemento le permite incorporar temas resaltados.js directamente en su compilación Tailwind CSS.
GitHub – GeoffSelby/tailwind-highlightjs: hornea temas de resaltado.js directamente en tu compilación Tailwind Css.
Hornee temas resaltados.js directamente en su compilación Tailwind Css. – GeoffSelby/tailwind-highlightjs
Barra de desplazamiento de viento de cola es un complemento para Tailwind CSS que proporciona utilidades de estilo para barras de desplazamiento con soporte para varios navegadores.
GitHub – adoxography/tailwind-scrollbar: complemento de barra de desplazamiento para Tailwind CSS
Complemento de barra de desplazamiento para Tailwind CSS. Contribuya al desarrollo de adoxografía/barra de desplazamiento tailwind creando una cuenta en GitHub.
20- RTL con viento de cola
Internacionalización en idiomas semíticos requiere reflejar el diseño horizontalmente, lo que se puede lograr con el complemento tailwindcss-rtl. Este complemento permite la compatibilidad con RTL y LTR dentro del mismo estilo.
GitHub – 20lives/tailwindcss-rtl: Habilitación del soporte bidireccional en el marco tailwindcss
Habilitación del soporte bidireccional en el marco tailwindcss – 20lives/tailwindcss-rtl
Ocultar barra de desplazamiento de viento de cola es un complemento de Tailwind que oculta las barras de desplazamiento, pero aún permite el desplazamiento si el contenido del elemento se desborda.
GitHub – reslear/tailwind-scrollbar-hide: complemento tailwindcss para ocultar la barra de desplazamiento
Complemento tailwindcss para ocultar la barra de desplazamiento. Contribuya al desarrollo de reslear/tailwind-scrollbar-hide creando una cuenta en GitHub.
22- Complemento 3D de viento de cola
El Complemento 3D para Tailwind CSS agrega utilidades de transformación tridimensional y animaciones a los proyectos de TailwindCSS.
A diferencia de las transformaciones bidimensionales predeterminadas de Tailwind, este complemento admite el eje “z” y extiende las animaciones de rebote y giro para operar en múltiples direcciones.
Utiliza propiedades CSS más nuevas, como rotar, traducir y escalar, lo que ofrece más posibilidades para combinaciones de clases de utilidad y animación.
GitHub – sambauers/tailwindcss-3d: Agrega transformaciones 3D a tu proyecto TailwindCSS
Agregue transformaciones 3D a su proyecto TailwindCSS. Contribuya al desarrollo de sambauers/tailwindcss-3d creando una cuenta en GitHub.
El complemento Tailwind CSS ofrece variantes de temas más allá de los modos claro y oscuro. Admite consultas de medios, selectores de CSS, variantes receptivas y permite múltiples temas. También proporciona opciones alternativas para ciertos temas cuando ningún otro puede activarse.
GitHub – JNavith/tailwindcss-theme-variants: Variantes de tema basadas en consultas de medios o JavaScript con respaldo para Tailwind CSS
Variantes de temas basados en consultas de medios o JavaScript con respaldo para Tailwind CSS – JNavith/tailwindcss-theme-variants
Tema múltiple CSS Tailwind es un complemento fácil de usar que no requiere amplios conocimientos más allá de crear una página simple con Tailwind predeterminado.
GitHub – estevanmaito/tailwindcss-multi-theme: 🎨 La forma más sencilla de crear temas con Tailwind CSS.
🎨 La forma más sencilla de crear temas con Tailwind CSS. – estevanmaito/tailwindcss-multi-tema
El complemento requiere Tailwind CSS 1.2 o posterior y se utiliza para generar utilidades de fondo degradado. Si utiliza una versión anterior de Tailwind, instale la última versión 2.x del complemento.
GitHub – benface/tailwindcss-gradients: Complemento Tailwind CSS para generar utilidades de fondo degradado
Complemento Tailwind CSS para generar utilidades de fondo degradado – benface/tailwindcss-gradients
[ad_2]
Source link
