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
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 material
elevation . - ? 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. - ? 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-functionutilidades. - ? 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
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
- ? Cree la aplicación React con PurgeCSS : secuencia de comandos CRA que agrega Tailwind CSS y PurgeCSS.
- ? Laravel Preset : agrega Tailwind CSS al marco de Laravel.
- ?? Preestablecido de front-end de Laravel – Preestablecido de front-end usando Tailwind CSS para Laravel.
- ?? Laravel Dark Front-end Preset – Preestablecido de front-end con temática oscura usando Tailwind CSS para Laravel.
- ? Cree la aplicación React con EmotionJS : modelo estándar de CRA utilizando Tailwind CSS y Emotion JS.
- ? Cree la aplicación React con TypeScript : plantilla CRA compatible con Tailwind CSS y TypeScript.
- ? Texto estándar de Tailwind CSS: texto estándar de Tailwind CSS con Parcel.
- ? Inicio de Jekyll: iniciador de Jekyll que utiliza Tailwind CSS.
- ? Inicio de Jekyll: iniciador de Jekyll que utiliza Tailwind CSS.
- ? Gulp Starter : iniciador de Gulp utilizando Tailwind CSS.
- ? Arrancador Gatsby – Arrancador Gatsby usando Tailwind CSS.
- ? Gatsby Starter Simplicity : iniciador de Gatsby que usa Tailwind CSS.
- ? Gatsby Starter + TypeScript : iniciador de Gatsby que usa Tailwind CSS y TypeScript.
- ? Gatsby Starter + Emotion JS : iniciador de Gatsby que utiliza Tailwind CSS y Emotion JS.
- ? Gatsby Starter Opinionated – Iniciador de Gatsby que usa Tailwind CSS y obsequios obstinados.
- ? Cree el texto estándar de la aplicación React: código estándar de CRA utilizando Tailwind CSS.
- ? Cree la aplicación React con PurgeCSS + Autoprefixer + CSSNano – CRA boilerplate usando CSS Nano.
- ? Dogpatch : iniciador de WordPress que utiliza Webpack, Vue, Babel y Tailwind CSS.
- ? Next.js Starter : texto estándar de Next.js con Tailwind CSS.
- ? Sapper & Svelte Starter : plantilla estándar con Sapper, Tailwind CSS, Purge CSS, Prettier y ESLint.
- ? Netlify Lambda Starter : modelo estándar de Netlify Lambda con Tailwind CSS.
- ? Hugo Theme Starter con Tailwind CSS : iniciador de temas Hugo con Tailwind CSS.
- ? Eleventy Web Starter : kit de inicio que utiliza Eleventy, Tailwind CSS, Webpack y PostCSS.
- ? Arrancador Nanoc – Arrancador Nanoc usando Tailwind CSS.
- ? PostCSS y Browsersync Boilerplate – Boilerplate usando CSS Nano.
- ? ParcelJS + TypeScript Boilerplate – Boilerplate usando Tailwind CSS, el paquete ParcelJS y TypeScript.
- ? VuePress Tailwind CSS Starter : un iniciador de VuePress que usa Tailwind CSS.
- ? Gatsby Serif : el tema serif de Gatsby con Tailwind CSS.
- ? Seminyak Hugo Theme : tema de Hugo con Tailwind CSS.
- ? Eleventy Starter : iniciador de blog listo para producción y compatible con SEO que utiliza Tailwind CSS.
- ? Vite + React + Tailwind Starter : modelo estándar con Vite, React y Tailwind CSS.
- ? Vite + Vue 3.x + Tailwind 2.x Starter : plantilla de inicio que utiliza Vite, Vue, Vue Router y Tailwind CSS.
- ? Shopify Theme Lab : iniciador de desarrollo de temas de Shopify utilizando Vue y Tailwind CSS.
- ? Diseño del panel de inicio : diseño del panel con Tailwind CSS y Alpine JS.
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