Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · AI
Tailwind CSS
Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
skill openclawclawhub Free
Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
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
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md