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

Relacionado

Zona de pruebas y prácticas de Tailwind CSS

Un campo de juego en línea avanzado para Tailwind CSS, que incluye soporte para cosas como: Personalización de tu archivo tailwind.config.js Extraer clases con @apply Finalización de código con vista previa instantánea Perfecto para aprender cómo funciona el framework de Tailwind CSS y crear un prototipo ¡SEGUIR LEYENDO!

The best Udemy courses in August, only for 9.99 $

Los mejores cursos en inglés y en oferta, hasta el día 27. Los cursos incluidos aquí son todos en inglés. Revisa por aquí, entre los mejores cursos en oferta de Udemy de Agosto en español, si lo que deseas son cursos en español. Si por desgracia, ¡SEGUIR LEYENDO!

Tailwind 2.0

Hace casi exactamente 18 meses vio la luz Tailwind CSS v1.0, que marco un compromiso por la estabilidad sin dejar de lado la búsqueda de agregar emocionantes y nuevas características que superen a la versión anterior. En el transcurso de los últimos 18 meses, vieron la ¡SEGUIR LEYENDO!

Pequeño truco para alinear a la izquierda los elementos de la última fila con Flexbox

Si adoras trabajar con Flexbox, probablemente hayan encontrado en el pasado el problema de los elementos en la última fila que no se comportan del todo bien. Lo que significa que no tienen una alineación a la izquierda. Bueno, hay una manera muy simple de tener ¡SEGUIR LEYENDO!

Nunca ha existido un mejor momento para crear sitios web

Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin ¡SEGUIR LEYENDO!