Colección de Recursos para Tailwind CSS (+300 recursos)
Colección de Recursos para 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 proseclase 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 themepropiedad.
  • 🎨🧬 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-schemeconsulta de medios.
  • 🎨🧬 Modo oscuro : agrega darkvariantes basadas en clases de CSS.
  • 🎨🧬 Modo oscuro : agrega darkvariantes basadas en la prefers-color-schemeconsulta de medios.
  • 💼 Gap : agrega gaputilidades.
  • 💼 Relación de aspecto : agrega aspect-ratioutilidades.
  • 💼 Nativo personalizado : aprovecha la configuración de Tailwind CSS para permitir la creación de utilidades.
  • 💼 Scroll Snap : agrega scroll-snaputilidades.
  • 💼 Colores de contorno de sombra : agrega box-shadowutilidades según los colores configurados.
  • 💼 Sangría de texto : agrega text-indentutilidades.
  • 💼 Representación de imágenes : agrega image-renderingutilidades.
  • 💼 Filtros : agrega filterutilidades.
  • 💼 Elevación : agrega utilidades de interfaz de usuario de materialelevation .
  • 💼 Caret Color : agrega caretutilidades de color.
  • 💼 Modo de fusión: agrega blend-modeutilidades.
  • 💼 Colorear : agrega filterutilidades.
  • 💼 Modo de escritura : agrega writing-modeutilidades.
  • 💼 Guiones : agrega hyphensutilidades.
  • 💼 Gradientes de borde : agrega border-imageutilidades de gradiente.
  • 💼 RFS : agrega RFSutilidades.
  • 💼 Restablecimiento de lista : vuelve a agregar la list-resetclase 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 filtery backdrop-filterutilidades 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-colorutilidades.
  • 💼 Ocultarscrollbar-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-functionutilidades.
  • 💼 Marcador de posición de contenido : agrega utilidades para imágenes de marcador de posición de contenido.
  • 💼 Sinscrollbar-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 RTLy LTRvariantes.
  • 🧬 Toque : agrega touchvariantes.
  • 🧬 Alfa : agrega variantes de color alfa.
  • 🧬 Localizado : agrega variantes basadas en el langatributo HTML , para usar utilidades solo con ciertos idiomas.
  • 🧬 Importante : agrega una importantvariante.
  • 🧬 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-embedcomponente.
  • 🧩 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