tailwind-3

Install

Works with Claude Code. Read the repository before you give any tool access to your data.

npx agentmarket install skill/tomicassanelli-tailwind-3

About

Use cases: frontend

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools

No tools found

Secrets

None asked for

Install scripts

None found

What's inside

Skill name

tailwind-3

Description

Tailwind CSS 3 patterns and best practices for consistent styling in the Next.js frontend. Trigger: Working with Tailwind classes in frontend components.

License

MIT

Allowed tools

Read,, Edit,, Write,, Glob,, Grep,, Bash,, Task

Metadata

author: tickets-tool · version: 1.0 · auto_invoke: Working with Tailwind classes

Instructions

37 lines in SKILL.md · view on GitHub

## Styling Decision Tree

```text
Static classes?         -> className="..."
Conditional classes?    -> merge utility or template conditions
Truly dynamic values?   -> style={{ ... }}
Reusable visual pattern?-> extract component class pattern
```

## Critical Rules

### Prefer Design Tokens Over Raw Values

```tsx
// Better
<div className="bg-gray-50 text-gray-900" />

// Avoid overusing arbitrary values
<div className="bg-[#fafafa] text-[#171717]" />
```

### Keep Class Lists Readable

```tsx
// Better
<button className="px-4 py-2 rounded-xl bg-blue-600 text-white disabled:opacity-50" />
```

## Common Patterns

```tsx
<div className="flex items-center gap-2" />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4" />
<p className="text-sm text-gray-600" />
```

Signals

Stars

0

Forks

0

Open issues

2

Last commit (this folder)

Mar 23, 2026 (7 months ago)

From GitHub (fetched Oct 24, 2026).

Details

Version

1.0

License

MIT

Repository

github.com/TomiCassanelli/tickets-tool

First seen

Oct 24, 2026

Last checked

Oct 24, 2026

Source

GitHubgithub-graphql