Vibe Index
🎯

tailwindcss

🎯Skill

from joabgonzalez/ai-agents-framework

VibeIndex|
What it does

Rapidly style web interfaces using utility-first CSS classes with Tailwind's responsive and customizable design system.

πŸ“¦

Part of

joabgonzalez/ai-agents-framework(11 items)

tailwindcss

Installation

npxRun with npx
npx ai-agents-skills add
npxRun with npx
npx ai-agents-skills add --preset project-sbd
npxRun with npx
npx ai-agents-skills add --skill react --skill typescript
npxRun with npx
npx ai-agents-skills add user/repo
npxRun with npx
npx ai-agents-skills add --preset project-sbd --models claude,github-copilot

+ 8 more commands

πŸ“– Extracted from docs: joabgonzalez/ai-agents-framework
Need more details? View full documentation on GitHub β†’
1Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

"Utility-first CSS framework for rapid UI development. Responsive design, custom utilities, configuration, component composition. Trigger: When styling with Tailwind CSS utility classes, creating responsive designs, or configuring Tailwind."

Overview

# Tailwind CSS Skill

Overview

Utility-first CSS framework for building custom designs with composable utility classes.

Objective

Enable developers to build responsive, maintainable UIs using Tailwind's utility classes and configuration system.

---

When to Use

Use this skill when:

  • Styling components with utility-first CSS
  • Creating responsive designs with Tailwind breakpoints
  • Configuring Tailwind theme (colors, spacing, typography)
  • Building custom utilities or plugins
  • Using JIT mode for performance

Don't use this skill for:

  • Material-UI styling (use mui skill)
  • Plain CSS without Tailwind (use css skill)
  • Complex animations requiring custom CSS (use css skill)

---

Critical Patterns

βœ… REQUIRED: Use Utility Classes

```html

class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"

>

Click Me

```

βœ… REQUIRED: Configure Theme in tailwind.config

```javascript

// βœ… CORRECT: Extend theme

module.exports = {

theme: {

extend: {

colors: {

brand: '#1976d2',

},

},

},

};

// ❌ WRONG: Hardcoding hex colors in classes

// Use theme colors instead

```

❌ NEVER: Overuse @apply

```css

/ ❌ WRONG: Defeats utility-first purpose /

.btn {

@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;

}

/ βœ… CORRECT: Use utilities directly in HTML /

Conventions

Refer to conventions for:

  • Code organization

Refer to a11y for:

  • Color contrast
  • Focus indicators

Refer to css for:

  • Custom CSS when needed

Tailwind Specific

  • Use utility classes over custom CSS
  • Configure theme in tailwind.config
  • Use @apply for component classes sparingly
  • Leverage JIT mode for performance
  • Use responsive modifiers (sm:, md:, lg:)
  • Enable dark mode with class or media strategy
  • Configure content paths properly to avoid purging used classes
  • Use arbitrary values [value] only when necessary (prefer theme extension)
  • Combine utilities with @apply for reusable component patterns
  • Optimize bundle size with proper content configuration

---

Decision Tree

Tailwind class exists? β†’ Use utility class: className="bg-blue-500".

Dynamic value? β†’ Use inline style: style={{ width: ${percent}% }} or arbitrary values: w-[${value}px].

Conditional styles? β†’ Use clsx/cn helper: cn("base", condition && "variant").

Reusable component style? β†’ Create component with utilities, avoid @apply.

Custom color/spacing? β†’ Add to theme.extend in tailwind.config.js.

Responsive design? β†’ Use breakpoint prefixes: md:flex lg:grid.

Dark mode? β†’ Enable in config, use dark: prefix: dark:bg-gray-800.

Production build? β†’ Ensure all template paths in content array or classes will be purged. Check for dynamic class names.

Custom animations? β†’ Extend theme.animation and theme.keyframes in tailwind.config rather than custom CSS.

Complex component style? β†’ Use @apply with @layer components for reusable patterns, but keep most styles as utilities in HTML.

---

Example

```html

Title

class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"

>

Click Me

```

tailwind.config.js:

```javascript

module.exports = {

content: ["./src/*/.{astro,html,js,jsx,ts,tsx,vue,svelte}"], // ⚠️ CRITICAL

darkMode: "class", // or 'media'

theme: {

extend: {

colors: {

brand: "#1976d2",

},

},

},

};

```

Dark Mode

```html

Content adapts to dark mode

```

```javascript

// Toggle dark mode

document.documentElement.classList.toggle("dark");

```

---

Edge Cases

Arbitrary values: Use square brackets for one-off values: w-[137px], top-[117px]. Avoid overuseβ€”extend theme instead.

Specificity conflicts: Tailwind utilities have same specificity. Order in HTML matters. Use ! prefix for important: !mt-0.

Purge/content configuration: Ensure all template paths are in content array or classes will be purged in production.

Third-party component styling: Some libraries use inline styles that override Tailwind. Use !important sparingly or wrapper divs.

@layer directive: Use @layer components for custom component styles, @layer utilities for custom utilities. Ensures proper ordering.

---

References

  • https://tailwindcss.com/docs
  • https://tailwindcss.com/docs/configuration

More from this repository10

🎯
ag-grid🎯Skill

Configures advanced, accessible data tables in React using AG Grid with TypeScript-driven type safety and performance optimizations.

🎯
javascript🎯Skill

Generates, refactors, and debugs JavaScript code with best practices, offering intelligent suggestions for performance and clean architecture.

🎯
typescript🎯Skill

Provides advanced TypeScript code generation, type inference, refactoring, and best practice recommendations for robust software development

🎯
architecture-patterns🎯Skill

Provides expert guidance on software design patterns, architectural styles, and best practices for scalable and maintainable system architectures.

🎯
astro🎯Skill

Builds optimized, performant static and server-rendered websites using Astro, TypeScript, and minimal JavaScript with optional React component islands.

🎯
eslint🎯Skill

Configures and enforces code quality standards using ESLint for JavaScript and TypeScript projects, with automatic linting and error correction.

🎯
react🎯Skill

Generates React component structures, implements hooks, manages state, and provides best practices for scalable and performant web applications.

🎯
conventions🎯Skill

Validates and standardizes code structure, naming conventions, and best practices across programming languages and frameworks.

🎯
agent-creation🎯Skill

Guides users through creating standards-compliant agent definitions by enforcing context gathering, using markdown templates, and ensuring clarity and proper metadata.

🎯
a11y🎯Skill

Automates web accessibility testing, generating WCAG compliance reports and recommending fixes for inclusive digital experiences.