ub-tailwind

Automate modern Tailwind setup and migration for HTML, Vue+Vite, and Nuxt projects.

6|2|Updated Mar 12, 2026

Search Tags:#frontend #css #migration #tailwind #nuxt #framework-setup #vue-vite

Ready to run

npx skills add https://github.com/robert-hoffmann/uncle-bob --skill ub-tailwind

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

Environment-aware setup: detects project type (CDN, Vue+Vite, Nuxt) and picks the correct modern Tailwind recipe.
CSS-first guidance: enforces @import "tailwindcss" and modern directives (@theme, @utility, @variant, @custom-variant).
Migration guardrails: includes Tailwind legacy-to-modern migration references and Nuxt/Vite integration steps.
Validation & compatibility: outputs framework-specific steps and a quick compatibility checklist.

Quick Start

Run the ub-tailwind skill against your project to generate tailored Tailwind setup instructions for CDN, Vue+Vite, or Nuxt environments.

Frequently Asked Questions about ub-tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate legacy Tailwind configurations to the new CSS-first setup?▼

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.

How do I set up Tailwind in a Vue+Vite project?▼

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.

Does Tailwind work with Nuxt out of the box?▼

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.

What is the correct way to use @import "tailwindcss" in modern frontend projects?▼

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.

Why does my Tailwind CSS setup differ between standalone HTML and Vue+Vite?▼

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.

What are the limitations of using Tailwind CDN versus a local Vite setup?▼

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.