skills.rest
boludo00
boludo00COMMUNITY
Explore all skills by this author →
GitHub

tailwind

Apply Tailwind CSS utility classes with custom themes and dark mode.

80|8|Updated Jan 15, 2026
Search Tags:#ui#frontend#react#css#styling#tailwind
One-click install
npx skills add https://github.com/boludo00/bookkeep --skill tailwind-boludo00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/boludo00/bookkeep/tree/main/.claude/skills/tailwind
Command: npx skills add https://github.com/boludo00/bookkeep --skill tailwind-boludo00

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust framework for applying utility-first CSS styling with Tailwind, enabling consistent theming, advanced effects, and efficient component development.

Core Features & Use Cases

  • Utility-First Styling: Leverage Tailwind's extensive class library for rapid UI development.
  • Custom Theming: Implement dark mode, HSL color variables, and glassmorphism effects.
  • Component Patterns: Utilize class-variance-authority for creating reusable, variant-based components.
  • Use Case: Quickly style a new React component with a dark theme, ensuring accessibility and responsiveness, and applying custom hover effects.

Quick Start

Apply the bg-primary text-primary-foreground classes to style an element with the primary theme color.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I implement dark mode and runtime theme switching in Tailwind CSS?▼

Implement dark mode in Tailwind CSS using custom HSL color variables and theme configurations. This approach supports runtime theme switching across multiple variants without rebuilding your stylesheets.

Can I use shadcn/ui components with this Tailwind CSS styling setup?▼

Yes, this Tailwind CSS styling setup fully supports working with shadcn/ui components, allowing you to apply consistent utility-first classes and theme configurations directly to these elements.

How do I create glassmorphism effects using Tailwind utility classes?▼

Create glassmorphism effects in Tailwind by applying custom theme configurations combined with utility-first CSS classes. This enables advanced visual styling like translucent backgrounds and blurring directly on your components.

How do I style React components using utility-first CSS with class-variance-authority?▼

Style React components using utility-first CSS by leveraging Tailwind's class library alongside class-variance-authority. This combination enables rapid development of reusable, variant-based UI elements with consistent theming.

What is the best way to apply primary theme colors to HTML elements using Tailwind?▼

Apply primary theme colors in Tailwind by using specific utility classes like `bg-primary` and `text-primary-foreground` directly on your HTML elements to instantly match your custom theme configuration.

Related Skills

Explore More Design & Creative Skills→
GitnappGitnapp

artifacts-builder

Generate and bundle React frontend projects into standalone HTML artifacts.

Community
Advanced
cadalt0cadalt0

website/app

Create responsive React web interfaces with reusable CSS-styled components.

Community
Basic
kimjuyoung1127kimjuyoung1127

dangapp-cva-factory

Build reusable UI primitives with class-variance-authority and a shared cn() merge path.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic