# Send Tailwind CSS to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "tailwindcss",
    "name": "Tailwind CSS",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/tailwindcss",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "tailwindcss",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-04T00:00:43.205Z",
      "expiresAt": "2026-05-11T00:00:43.205Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
        "contentDisposition": "attachment; filename=\"tailwindcss-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "tailwindcss"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/tailwindcss"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/tailwindcss",
    "downloadUrl": "https://openagent3.xyz/downloads/tailwindcss",
    "agentUrl": "https://openagent3.xyz/skills/tailwindcss/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwindcss/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwindcss/agent.md"
  }
}
```
## Documentation

### Content Configuration

content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production
Glob patterns: "./src/**/*.{js,jsx,ts,tsx,html}" covers nested directories
Dynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist
Check production build size—if unexpectedly small, content paths are wrong

### Responsive Prefixes

Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above
sm:hidden md:block means hidden on small, visible on medium+—not "only on medium"
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
Custom breakpoints in config override defaults—use extend.screens to add without replacing

### Dark Mode

dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle
Dark class on <html> or <body>, not on individual components
dark:bg-gray-900 only applies when ancestor has class="dark"
System preference: darkMode: 'media' uses prefers-color-scheme

### State Variants

hover:, focus:, active: work as expected
group-hover: requires group class on parent—child reacts to parent hover
peer-focus: requires peer class on sibling AND sibling must come first in DOM
Stack variants: dark:hover:bg-gray-700 applies on hover in dark mode

### Arbitrary Values

bg-[#1da1f2] for one-off colors—brackets for any arbitrary value
w-[calc(100%-2rem)] for calc expressions
grid-cols-[1fr_2fr_1fr] underscores for spaces in values
Arbitrary properties: [mask-type:alpha] for unsupported CSS properties

### @apply Traps

@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected
Order in @apply matters unlike HTML classes—later utilities override earlier
Prefer HTML classes over @apply—easier to maintain, better tree-shaking
If you must use @apply, keep it simple: base styles only

### Configuration

extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors
Top-level replaces defaults: colors: { brand: '#xxx' } removes all default colors
theme() function in CSS: border-color: theme('colors.gray.200')
Plugin order matters—later plugins can override earlier ones

### Important Modifier

! prefix forces important: !mt-4 generates margin-top: 1rem !important
Use sparingly—usually indicates specificity battle that should be fixed
important: true in config makes ALL utilities important—avoid, breaks third-party CSS
important: '#app' scopes specificity to selector—better than global important

### Common Mistakes

class="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decides
Forgetting overflow-hidden with rounded-* on parent with absolute children
h-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)
truncate needs width constraint or max-w-* to actually truncate

### Performance

JIT is default since v3—generates only used classes, no purge needed
Avoid safelist with patterns like bg-*—defeats tree-shaking
@layer components for reusable component styles—proper cascade order
Large arbitrary values generate unique classes—extract to config if repeated
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: ivangdavila
- Version: 1.0.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-04T00:00:43.205Z
- Expires at: 2026-05-11T00:00:43.205Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/tailwindcss)
- [Send to Agent page](https://openagent3.xyz/skills/tailwindcss/agent)
- [JSON manifest](https://openagent3.xyz/skills/tailwindcss/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/tailwindcss/agent.md)
- [Download page](https://openagent3.xyz/downloads/tailwindcss)