Fix Bun and Tailwind wiring issues for CSS-first integration.
npx skills add https://github.com/alexgorbatchev/ai-registry --skill bun-tailwind
Please help me install this Agent Skill. Skill: bun-tailwind Source: https://github.com/alexgorbatchev/ai-registry/tree/main/skills/bun-tailwind Command: npx skills add https://github.com/alexgorbatchev/ai-registry --skill bun-tailwind
Streamlines the process of integrating Tailwind v4 with Bun apps by clarifying the required project structure, token management, and consumer-facing guidance for bundling and scanning assets.
Follow the steps to wire Bun Tailwind by updating bunfig.toml and Bun.build() usage so the Tailwind paths are loaded correctly.
High-intent search queries and answers about installing and using this skill.
To integrate Tailwind CSS v4 with Bun, wire the framework through CSS using explicit @import tailwindcss and @source directives rather than JavaScript configuration. This ensures reliable styling delivery across your Bun application without relying on a traditional tailwind.config.js file.
Configure Bun static-route bundling for Tailwind assets by updating bunfig.toml to define explicit build paths. This setup loads Tailwind paths correctly during the bundling process, ensuring your CSS is processed and delivered reliably across the application.
Share design tokens between a Bun package and its consumers by maintaining a shared theme stylesheet at src/theme.css. This file maps your design tokens to CSS variables, allowing downstream consumers to import and scan the package output for proper styling application.
Yes, Bun.build() supports manual Tailwind CSS bundling alongside bunfig.toml configurations. This dual build-path support covers common setups, allowing you to choose between static-route bundling and explicit manual build paths for your frontend assets.
Tailwind CSS fails to load correctly in Bun projects when wiring issues prevent proper asset scanning. Fix this by enforcing @import tailwindcss, @source directives, and a shared theme.css for tokens, while documenting the required project layout for reliable styling delivery.
No, you do not need a tailwind.config.js file for Tailwind v4 in Bun applications. The integration enforces a CSS-first approach using @import tailwindcss and @source directives within your stylesheets, eliminating the need for JavaScript-based configuration.
agusmdevConfigure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.
kaxuna1Apply Tailwind utilities with runtime CSS variables for Luxia storefront theming.
gotarBundle React, Tailwind, and shadcn/ui projects into a single HTML file.
xenitV1Implement Tailwind CSS v4 patterns with CSS-first configuration and container queries.
