tailwind-css

Apply GolfNext Tailwind CSS v4 patterns and brand colors to UI components.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill tailwind-css-golfnext
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tailwind-css
Source: https://github.com/GolfNext/golfnext-tool-kiosk-support-page/tree/main/.claude/plugins/mvp-dev-stack/skills/tailwind-css
Command: npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill tailwind-css-golfnext

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides GolfNext's specific patterns, color palettes, and best practices for using Tailwind CSS v4, ensuring brand consistency and efficient UI development.

Core Features & Use Cases

  • Brand-aligned Styling: Utilizes a custom CSS theme with GolfNext's brand colors adapted for work tools.
  • Responsive Design: Implements mobile-first principles for scalable layouts.
  • Component Recipes: Offers ready-to-use examples for common UI elements like navigation bars, cards, and forms.
  • Use Case: When building a new feature, use this Skill to apply the correct GolfNext branding and ensure all UI elements are responsive and accessible.

Quick Start

Apply the provided GolfNext brand colors and responsive patterns when styling new components.

Frequently Asked Questions about tailwind-css

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

FAQPage Schema
What are the best practices for implementing Tailwind CSS v4 in a custom design system?

Tailwind CSS v4 brand alignment is achieved by applying a custom CSS theme with specific color palettes and mobile-first responsive patterns, ensuring consistent UI development across your application. This approach streamlines styling through predefined component recipes.

How do I style responsive navigation bars and cards using Tailwind CSS?

Styling responsive navigation bars and cards with Tailwind CSS requires applying mobile-first responsive design principles and utilizing ready-to-use component recipes. These patterns ensure your layout scales correctly and maintains accessibility across all devices.

Does Tailwind CSS v4 support custom brand color palettes for work tools?

Tailwind CSS v4 supports custom brand color palettes for work tools by implementing a custom CSS theme. This allows you to adapt specific brand colors efficiently, ensuring visual consistency across your internal UI components.

Why should I use custom CSS themes instead of utility classes for UI component styling?

Using custom CSS themes centralizes your brand colors and design tokens, whereas utility classes alone can lead to repetitive code. Combining themes with component recipes ensures brand consistency and efficient styling when building scalable layouts.

Can I use Tailwind CSS component recipes for mobile-first form layouts?

Tailwind CSS component recipes support mobile-first form layouts by applying the provided responsive design patterns. These recipes offer ready-to-use examples for common UI elements, ensuring forms are accessible and scalable across devices.