Colección de Recursos para el Framework Tailwind CSS (+300 recursos)

Tailwind CSS es un frameworks CSS para crear rápidamente interfaces de usuario personalizadas.

? Colección Recursos CSS / ? Frameworks CSS / ? Cursos Gratis de CSS / ? Libros Gratis de CSS / ? 85 Geniales Recursos CSS Gratuitos

Enlaces útiles

Leyenda

😕 Recurso oficial

  • ? Sitio web : sitio web oficial de Tailwind CSS.
  • ? RepositorioRepositorio oficial de Tailwind CSS.
  • ? Debates : lugar oficial para conectarse con otros miembros de la comunidad sobre Tailwind.
  • ? Tailwind UI : biblioteca de componentes creada con Tailwind CSS.
  • ? Interfaz de usuario sin cabeza : componentes de interfaz de usuario completamente accesibles y sin estilo.
  • ? Heroicons : hermosos iconos SVG hechos a mano.
  • ? Play – Zona de juegos avanzada en línea para Tailwind CSS.
  • ? Just-in-time : compilador Just-in-time para Tailwind CSS.
  • Tailwind Weekly : boletín semanal sobre todo lo relacionado con Tailwind CSS.
  • Built With Tailwind : colección impulsada por la comunidad de sitios web increíbles creados con Tailwind CSS.

Extensiones IDE

Leyenda

😕 Recurso oficial

Complementos

Leyenda

😕 Complemento oficial · ? Tematización · ? Utilidades · ? Variantes · ? Componentes · ? Obsoleto

  • ?? Tipografía : agrega una prose clase para hermosos valores tipográficos predeterminados.
  • ?? Relación de aspecto : agrega utilidades de relación de aspecto componibles.
  • ?? Line Clamp : proporciona utilidades para truncar visualmente el texto después de un número fijo de líneas.
  • ? Formularios : agrega mejores estilos predeterminados a los elementos de formulario.
  • ?? Tematización : tematización que utiliza variables CSS, con soporte de modo oscuro.
  • ?? Variantes de tema : agrega variantes de tema basadas en consultas de medios y / o selectores de CSS.
  • ?? Multi Theme : agrega variantes de tema basadas en una sola theme propiedad.
  • ?? Theme Swapper : creación de temas que utilizan variables CSS, con soporte para consultas de medios.
  • ?? Prefiere el modo oscuro : agrega variantes según la prefers-color-scheme consulta de medios.
  • ?? Modo oscuro : agrega dark variantes basadas en clases de CSS.
  • ?? Modo oscuro : agrega dark variantes basadas en la prefers-color-scheme consulta de medios.
  • ? Gap : agrega gap utilidades.
  • ? Relación de aspecto : agrega aspect-ratio utilidades.
  • ? Nativo personalizado : aprovecha la configuración de Tailwind CSS para permitir la creación de utilidades.
  • ? Scroll Snap : agrega scroll-snap utilidades.
  • ? Colores de contorno de sombra : agrega box-shadow utilidades según los colores configurados.
  • ? Sangría de texto : agrega text-indent utilidades.
  • ? Representación de imágenes : agrega image-rendering utilidades.
  • ? Filtros : agrega filter utilidades.
  • ? Elevación : agrega utilidades de interfaz de usuario de material elevation .
  • ? Caret Color : agrega caret utilidades de color.
  • ? Modo de fusión: agrega blend-mode utilidades.
  • ? Colorear : agrega filter utilidades.
  • ? Modo de escritura : agrega writing-mode utilidades.
  • ? Guiones : agrega hyphens utilidades.
  • ? Gradientes de borde : agrega border-image utilidades de gradiente.
  • ? RFS : agrega RFS utilidades.
  • ? Restablecimiento de lista : vuelve a agregar la list-reset clase que se eliminó antes de Tailwind CSS 1.0.
  • ? Fluido : agrega utilidades de tamaño de fluidos.
  • ? Tipografía : agrega utilidades de tipografía.
  • ? Triangle After : agrega utilidades de triángulos CSS.
  • ? Scrims : agrega utilidades de scrims .
  • ? Truncar varias líneas: agrega utilidades para truncar elementos de texto de varias líneas.
  • ? Propiedades lógicas de CSS : genere utilidades para las propiedades lógicas de CSS.
  • ? Flechas de información sobre herramientas después : agrega utilidades CSS para flechas de información sobre herramientas con borde y fondo configurables.
  • ? Bidireccional : agrega utilidades para crear diseños bidireccionales multilingües.
  • ? Bidireccional : reemplace las utilidades principales para que sean compatibles en dos direcciones.
  • ? SVG de fondo : inyecte SVG como imágenes de fondo con variantes de color.
  • ? Colores de marca : agrega varios colores de marca para el fondo, el borde y el texto.
  • ? Bootstrap Grid : genera el sistema de cuadrícula flexbox estilo Bootstrap.
  • ? Filtros CSS : adiciones filter y backdrop-filter utilidades con valores predeterminados.
  • ? Leading Trim : agrega utilidades para recortar los espacios en blanco del texto, usando Capsize .
  • ? Color de decoración de texto : agrega text-decoration-color utilidades.
  • ? Ocultar scrollbar-hide barra de desplazamiento : agrega una clase para ocultar la barra de desplazamiento visual.
  • ? Facilidades CSS a favor del viento : amplía las transition-timing-function utilidades.
  • ? Marcador de posición de contenido : agrega utilidades para imágenes de marcador de posición de contenido.
  • ? Sin scrollbar-none barra de desplazamiento : expone para ocultar visualmente una barra de desplazamiento.
  • ? Pseudo : agrega variantes personalizadas a la configuración de Tailwind CSS.
  • ? Dirección : adiciones RTL y LTR variantes.
  • ? Toque : agrega touch variantes.
  • ? Alfa : agrega variantes de color alfa.
  • ? Localizado : agrega variantes basadas en el lang atributo HTML , para usar utilidades solo con ciertos idiomas.
  • ? Importante : agrega una important variante.
  • ? Radio acolchado : agrega variantes para hacer coincidir los radios de los bordes anidados.
  • ? Fluido : genera fl: variantes.
  • ? Marcador : proporciona utilidades para diseñar listas y “marcadores.
  • ? Pseudo selectores : agrega variantes para las pseudoclases y pseudoelementos que Tailwind CSS no tiene de forma predeterminada.
  • ? Pantallas de depuración : agrega un componente que muestra la pantalla actualmente activa (punto de interrupción de respuesta).
  • ? Heropatterns – añade héroe Patrones componentes.
  • ? Inserción receptiva : agrega un responsive-embed componente.
  • ? Tablas de Bootstrap : agrega componentes de tabla basados en las tablas de Bootstrap.
  • ? Tarjeta : agrega componentes de tarjeta.
  • ? Omitir enlace : agrega un componente accesible Omitir al contenido principal .
  • ? Colores a variables CSS : exporta la configuración de color a las propiedades personalizadas de CSS.
  • ? Variables CSS : exporta la configuración a propiedades personalizadas de CSS.

?- Los siguientes complementos ofrecen funcionalidades que ahora están total o parcialmente implementadas en Tailwind CSS.

Instrumentos

Leyenda

😕 Accesible en línea · ? Herramienta de conversión o actualización · ? Generador · ? Escritura / ejecución · ? Complementos / Herramientas / Extensiones para servicios externos · ? Relacionado con el color · ? Marco de referencia

Bibliotecas, componentes y plantillas de UI

Leyenda

😕 Recurso oficial · ? Biblioteca · ? Componentes · ? Plantillas

  • ?? Tailwind UI : biblioteca de componentes creada con Tailwind CSS.
  • ?? Interfaz de usuario sin cabeza : componentes de interfaz de usuario completamente accesibles y sin estilo.
  • ? VueTailwind : biblioteca de interfaz de usuario de Vue.js que utiliza Tailwind CSS.
  • ? Tailwind Made : plantillas pagas y fáciles de desarrollar creadas con Tailwind CSS.
  • ? EasyTailwind – Freemium, plantillas fácilmente personalizables hechas con Tailwind CSS.
  • ? TailBlocks : más de 60 bloques diferentes de Tailwind CSS listos para usar.
  • ? Tailwind Components : repositorio de componentes Tailwind CSS impulsado por la comunidad.
  • ? Caja de herramientas Tailwind : plantillas, componentes y recursos.
  • ? Componentes de la interfaz de usuario de Meraki : hermosos componentes CSS Tailwind que admiten lenguajes RTL.
  • ? Tailwind Cards : colección creciente de tarjetas de texto / imágenes.
  • ?? Tailwind Templates : colección de plantillas y componentes.
  • ?? Treact : plantillas y componentes de la interfaz de usuario de React creados con Tailwind CSS.
  • ?? Jakarta LTE : plantilla de administrador con Tailwind CSS.
  • ?? themes.dev – Temas y componentes de Tailwind CSS hechos a mano , gratuitos y premium.
  • ? Selector de fecha : componente de selector de fecha para Vue.js que usa Tailwind CSS.
  • ? Kutty : componentes accesibles y reutilizables que se utilizan comúnmente en aplicaciones web.
  • ? Tailwindow : colección de elementos de UI y bloques de componentes CSS Tailwind.
  • ? Sail UI : colección de componentes básicos de la interfaz de usuario basados en Tailwind CSS.
  • ? jQuery Toggler – Cambia usando jQuery y Tailwind CSS.
  • ? Tailwind Kit : componentes agnósticos de Framework, Vue.js, React y Angular.
  • ? lofi ui : componentes CSS Tailwind de baja fidelidad.
  • ? Gust UI : componentes CSS elegantes de Tailwind para aplicaciones web en React y HTML.
  • ? Windstrap – Tailwind CSS con Bootstrap JS.
  • ? WickedBlocks : colección de más de 120 bloques de diseño y componentes creados con Tailwind CSS.
  • ? Interfaz de usuario de Daisy : componentes de interfaz de usuario para Tailwind CSS.
  • ? Kit de interfaz de usuario de Kometa: kit de interfaz de usuario multipropósito gratuito, creado con Tailwind CSS.
  • ? Interfaz de usuario de Mamba : componentes, secciones y plantillas de Tailwind CSS gratuitos.
  • ? Selector de fecha Litepie : un componente selector de rango de fechas para Vue.js y Tailwind CSS.
  • ? Panel de control de molino de viento : plantilla de panel de control completamente accesible y con varios temas.
  • ? Tailwind Admin : plantilla de panel de administración con Tailwind CSS.
  • ? Gradientes de aterrizaje: plantilla de página de aterrizaje con gradientes (1.7+).
  • ? Currículum : currículum simple con Tailwind CSS.
  • ? Currículum : una plantilla de currículum estilizada creada con Tailwind CSS, con un ingenioso fondo de patrón de héroe y una fuente personalizada.
  • ? Simple Light : plantilla de página de destino gratuita creada con React & Tailwind CSS.
  • ? V-Dashboard : plantilla de inicio de tablero construida con Vue 3 y Tailwind CSS.
  • ? Petra : plantilla de página de destino gratuita creada con Nuxt.js y Tailwind CSS.
  • ? a17t : kit de herramientas de diseño atómico creado para ampliar Tailwind CSS.
  • ? tails-ui : biblioteca de interfaz de usuario de React usando Tailwind CSS.
  • ? tails : plantillas y componentes hechos a mano con Tailwind CSS.

Entrantes y temas

Leyenda

😕 Paquete · ? Herramienta / generador de línea de comandos · ? Clonable

Proyectos de código abierto

  • Goodwork : herramienta de gestión y colaboración de proyectos.
  • Statusfy : sistema de páginas de estado que utiliza Tailwind CSS.
  • Todolist : aplicación de lista de tareas que utiliza Tailwind CSS.
  • LeagueStats : sitio web de estadísticas para los jugadores de League of Legends.
  • SapperCommerce : escaparate de comercio electrónico que utiliza Svelte y Tailwind CSS.
  • Misiki Books : librería que usa Vue + Moltin + Tailwind CSS.

Aprendiendo

Leyenda

😕 Recurso oficial · ? Muestra · ? Tutorial de configuración · ? Tutorial en video · ? Tutorial de componente o página · ? Elenco

🔥 RELACIONADOS