Automate modern Tailwind setup and migration for HTML, Vue+Vite, and Nuxt projects.
npx skills add https://github.com/robert-hoffmann/uncle-bob --skill ub-tailwind
Please help me install this Agent Skill. Skill: ub-tailwind Source: https://github.com/robert-hoffmann/uncle-bob/tree/main/.agents/skills/ub-tailwind Command: npx skills add https://github.com/robert-hoffmann/uncle-bob --skill ub-tailwind
Tailwind usage often drifts across environments, creating maintenance overhead when moving between standalone HTML, Vue+Vite, and Nuxt projects. This skill provides a unified, modern Tailwind setup approach with guardrails, recipes, and migration guidance.
Run the ub-tailwind skill against your project to generate tailored Tailwind setup instructions for CDN, Vue+Vite, or Nuxt environments.
High-intent search queries and answers about installing and using this skill.
Migrate legacy Tailwind configurations by applying included legacy-to-modern guardrails, enforcing a CSS-first entrypoint with @import "tailwindcss", and replacing old configuration syntax with @theme, @utility, and @custom-variant directives.
Set up Tailwind in Vue+Vite by detecting the project environment and applying the framework-specific recipe, which enforces the CSS-first entrypoint and outputs validation steps to ensure correct Tailwind integration within the Vite build process.
Tailwind works with Nuxt when applying the correct framework-specific recipe. The setup enforces the modern CSS-first entrypoint and provides tailored integration steps and validation guardrails specific to the Nuxt environment.
The correct way to use @import "tailwindcss" is to establish it as the CSS-first entrypoint in your main stylesheet. This modern setup approach replaces legacy configuration files and enables token management via @theme and @custom-variant directives.
Tailwind CSS setup differs between standalone HTML and Vue+Vite because the environment-aware setup detects the project type and applies distinct modern Tailwind recipes, guardrails, and integration steps tailored to each specific framework's build process.
Tailwind CDN offers rapid standalone HTML integration but lacks the local build-time token management and framework-specific recipes provided by a Vue+Vite or Nuxt setup. Environment validation ensures you apply the correct compatible modern recipe.
bennypowersConfigure Vue projects to treat dash-containing tags as custom elements.
Jorge-IvanConfigure Tailwind CSS themes, utilities, and variants directly in CSS files.
skaile-aiConfigure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.
Yoriichi-DangMigrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.
