How do I install the Tailwindplus skill?

Run npx skillmds@latest add eternnoir/tailwindplus in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwindplus safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwindplus?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwindplus free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwindplus?

eternnoir (@eternnoir) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwindplus by eternnoir — Agent Skill

Name: Tailwindplus
Rating: 4.2 (5 reviews)
Author: eternnoir

File contents

TailwindPlus Component Browser

This skill provides access to the TailwindPlus UI component library with 657+ professional components.

Setup Required

Before using this skill, you need to specify the location of your TailwindPlus JSON data file. Tell Claude the path to your tailwindplus-components-*.json file and Claude will use it in the commands.

Example: "My TailwindPlus data is at ~/data/tailwindplus-components-2026-01-08.json"

Available Commands

All commands require the JSON data file path as the first argument.

Get Component Info

./info.sh <json_file>

Returns metadata about the TailwindPlus data file.

List All Components

./list_components.sh <json_file>

Returns all component names organized by category.

Search Components

./search_components.sh <json_file> "hero"
./search_components.sh <json_file> "pricing table"

Search for components by keyword (case-insensitive, supports multi-word).

Get Component Code

./get_component.sh <json_file> "Application UI.Forms.Input Groups.Simple" -f html -v 4 -m light
./get_component.sh <json_file> "Ecommerce.Components.Product Overviews.With image gallery and expandable details" -f react -v 4 -m none

Required Parameters:

json_file: Path to the TailwindPlus JSON data file
full_name: The complete dotted path (e.g., "Application UI.Forms.Input Groups.Simple")
-f, --framework: html, react, or vue
-v, --version: 3 or 4 (Tailwind CSS version)
-m, --mode: Theme mode

Mode Requirements (CRITICAL):

Application UI and Marketing components: use light, dark, or system
eCommerce components: use none only

Component Categories

Application UI - Forms, navigation, data display, overlays, layout components
Marketing - Hero sections, features, pricing, testimonials, CTAs, footers
Ecommerce - Product lists, shopping carts, checkout forms, order history

Framework Options

html - Pure HTML with Tailwind CSS classes
react - React/JSX components
vue - Vue.js components

Usage Examples

When user asks for a component:

First search to find available components
Get the exact component code with proper parameters

Example workflow for finding a button component:

# Step 1: Search
./search_components.sh <json_file> "button"
# Step 2: Get the component
./get_component.sh <json_file> "Application UI.Elements.Buttons.Primary" -f react -v 4 -m light

---name: tailwindplusdescription: Access TailwindPlus UI component library - search, list, and retrieve code for Marketing, Application UI, and eCommerce components in HTML/React/Vue with Tailwind CSS v3/v4---# TailwindPlus Component BrowserThis skill provides access to the TailwindPlus UI component library with 657+ professional components.## Setup RequiredBefore using this skill, you need to specify the location of your TailwindPlus JSON data file.Tell Claude the path to your `tailwindplus-components-*.json` file and Claude will use it in the commands.Example: "My TailwindPlus data is at ~/data/tailwindplus-components-2026-01-08.json"## Available CommandsAll commands require the JSON data file path as the first argument.### Get Component Info```bash./info.sh <json_file>```Returns metadata about the TailwindPlus data file.### List All Components```bash./list_components.sh <json_file>```Returns all component names organized by category.### Search Components```bash./search_components.sh <json_file> "hero"./search_components.sh <json_file> "pricing table"```Search for components by keyword (case-insensitive, supports multi-word).### Get Component Code```bash./get_component.sh <json_file> "Application UI.Forms.Input Groups.Simple" -f html -v 4 -m light./get_component.sh <json_file> "Ecommerce.Components.Product Overviews.With image gallery and expandable details" -f react -v 4 -m none```**Required Parameters:**- `json_file`: Path to the TailwindPlus JSON data file- `full_name`: The complete dotted path (e.g., "Application UI.Forms.Input Groups.Simple")- `-f, --framework`: `html`, `react`, or `vue`- `-v, --version`: `3` or `4` (Tailwind CSS version)- `-m, --mode`: Theme mode**Mode Requirements (CRITICAL):**- Application UI and Marketing components: use `light`, `dark`, or `system`- eCommerce components: use `none` only## Component Categories1. **Application UI** - Forms, navigation, data display, overlays, layout components2. **Marketing** - Hero sections, features, pricing, testimonials, CTAs, footers3. **Ecommerce** - Product lists, shopping carts, checkout forms, order history## Framework Options- `html` - Pure HTML with Tailwind CSS classes- `react` - React/JSX components- `vue` - Vue.js components## Usage ExamplesWhen user asks for a component:1. First search to find available components2. Get the exact component code with proper parametersExample workflow for finding a button component:```bash# Step 1: Search./search_components.sh <json_file> "button"# Step 2: Get the component./get_component.sh <json_file> "Application UI.Elements.Buttons.Primary" -f react -v 4 -m light```

Frequently asked questions

Tailwindplus