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 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

Pablo, Técnico en Sistemas Informáticos y Redes

Compartir
Publicado por
Pablo, Técnico en Sistemas Informáticos y Redes

Entradas recientes

Juegos Gratis de Epic Games hasta el 20 de noviembre: ScourgeBringer, Songs of Silence y Zero Hour

Si eres un amante de los videojuegos, estás de suerte. Hasta el 20 de noviembre…

16 minutos hace

Premio Nobel se une a Bigtechs para trabajar en construir Computadoras Cuánticas personales

La computación cuántica acaba de dar un salto gigante. John M. Martinis, recién galardonado con…

2 horas hace

La biografía de Steve Jobs escrita por el biógrafo Walter Isaacson

La biografía más vendida del cofundador de Apple, Steve Jobs; escrita por uno de los…

2 días hace

Cómo la Inteligencia Artificial está Revolucionando los Sistemas de Seguridad en el Hogar

Hubo un tiempo en el que la “seguridad en el hogar” significaba confiar en un…

2 días hace

Elon Musk se asegura una compensación de 1 billón de dólares con Tesla

Elon Musk vuelve a romper todos los esquemas. Los accionistas de Tesla acaban de aprobar…

2 días hace

GTA 6 se retrasa hasta finales de 2026

Los fans de Grand Theft Auto tendrán que esperar un poco más para volver a…

5 días hace