PDF con CSS moderno Tailwind

Genera PDFs en Laravel con CSS moderno y Tailwind usando Spatie Browsershot y headless Chrome. Guía de instalación, plantillas Blade, renderizado y opciones A4/landscape con fondos.

8 sept 2025 • 3 min de lectura • Equip Q2BSTUDIO

Inteligencia-Artificial-

Generar PDFs en Laravel con CSS moderno como Tailwind ya no tiene por qué ser complicado gracias a Spatie Browsershot y headless Chrome, que renderizan HTML tal como lo vería un navegador, permitiendo usar Flexbox, Grid, utilidades de Tailwind y JavaScript sin límites.

Instalación básica: añadir la dependencia con Composer usando composer require spatie/browsershot. Browsershot requiere Node.js y npm para Puppeteer; se puede instalar Node con nvm install node y activar con nvm use node, y después instalar Puppeteer globalmente con npm install -g puppeteer. Chromium se descarga automáticamente cuando se instala Puppeteer.

Plantilla Blade con Tailwind: crear una vista para el PDF e incluir Tailwind desde su CDN o compilar estilos con Vite o Mix. Diseña la plantilla usando clases de Tailwind para aprovechar estilos modernos, tipografías web y distribución con Flexbox o Grid; recuerda usar URLs absolutas para imágenes si las incluyes en el PDF.

Generar el PDF: renderiza la vista y pásala a Browsershot reconociendo opciones útiles como formato A4, orientación landscape, showBackground para renderizar fondos y opciones para devolver el PDF al navegador o guardarlo en disco. Para proyectos con compilación de assets, configura las rutas a los binarios de Node y npm si es necesario, por ejemplo usando setNodeBinary y setNpmBinary para apuntar a /usr/bin/node y /usr/bin/npm.

Consejos prácticos: usar el CDN de Tailwind en plantillas simples; para fuentes personalizadas emplear fuentes web o reglas @font-face incrustadas; si trabajas con assets compilados integra Vite o Mix y asegúrate de que Browsershot puede acceder a los ficheros CSS generados; prueba el render en local antes de pasar a producción y valida impresión de fondos y márgenes.

En Q2BSTUDIO combinamos experiencia en desarrollo de software y aplicaciones a medida con soluciones orientadas a negocio. Si necesitas crear sistemas que generen PDFs estilizados y reproducibles desde Laravel como parte de una solución más amplia de software a medida o aplicaciones a medida, podemos ayudarte a diseñar la arquitectura y la integración continua, además de optimizar la experiencia de usuario. Consulta nuestros servicios de desarrollo en desarrollo de aplicaciones a medida.

Además, en Q2BSTUDIO somos especialistas en inteligencia artificial y ofrecemos soluciones de ia para empresas, agentes IA y automatizaciones que complementan la generación de documentos y flujos de trabajo. Descubre cómo integrar modelos y automatizaciones en tus procesos en nuestra página de inteligencia artificial.

Ofrecemos también servicios de ciberseguridad y pentesting para proteger datos sensibles que puedan aparecer en PDFs, servicios cloud aws y azure para desplegar infraestructuras escalables, y servicios inteligencia de negocio como Power BI para analizar y presentar datos que luego puedan exportarse a PDF. Palabras clave relevantes que trabajamos en nuestros proyectos: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.

Si tu objetivo es generar facturas, informes, certificados o cualquier contenido PDF con diseño moderno y comportamiento idéntico al navegador, combina Laravel, Tailwind y Browsershot con la experiencia de Q2BSTUDIO para obtener resultados robustos, seguros y fácilmente mantenibles.

UNA PAUSA?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.

Live Chat