ClawHub

Tailwind CSS

Write Tailwind utility classes with proper responsive design, dark mode, and configuration.

MIT-0 · Free to use, modify, and redistribute. No attribution required.
⭐ 4 · 1.5k · 13 current installs · 13 all-time installs
byIván@ivangdavila
MIT-0
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
✓
Purpose & Capability
The name/description (Tailwind utility classes, responsive design, dark mode, config) match the SKILL.md content. The only declared required binary is npx, which is reasonable for running Tailwind CLI tasks; there are no unrelated env vars, binaries, or config paths.
✓
Instruction Scope
SKILL.md contains guidance and configuration best-practices for Tailwind (content paths, breakpoints, dark mode, @apply caveats, performance). It does not instruct the agent to read unrelated files, exfiltrate data, or call external endpoints beyond normal Tailwind usage.
✓
Install Mechanism
There is no install spec and no code files — the skill is instruction-only. No downloads or archive extraction are specified, so nothing will be written to disk by the skill itself.
✓
Credentials
The skill requests no environment variables or credentials. The absence of secrets is proportionate to the described purpose.
✓
Persistence & Privilege
always is false and the skill does not request persistent presence or modify other skills or global agent settings. Autonomous invocation is allowed by default but not combined with other risky privileges here.
Assessment
This skill is coherent and low-risk: it's a prose guide for using Tailwind and asks for no credentials. Things to consider before installing: (1) the metadata requires npx — if an agent executes commands using npx it may fetch packages from npm at runtime (transient network download), so only allow command execution in trusted environments; (2) the skill has no listed source or homepage (owner ID only), so if you require provenance, verify the publisher separately; (3) because it's instruction-only, it won't itself write files, but an agent following its guidance could run CLI commands that modify your project — ensure you trust the agent's ability to run shell/npm commands. Overall this appears benign and consistent with its stated purpose.

Like a lobster shell, security has layers — review code before you run it.

Current versionv1.0.0
Download zip
latestvk974ge12vh5md8phen16kx4h8s80xcvs

License

MIT-0
Free to use, modify, and redistribute. No attribution required.
Termshttps://spdx.org/licenses/MIT-0.html

Runtime requirements

🌊 Clawdis
OSLinux · macOS · Windows
Binsnpx

SKILL.md

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

Files

1 total
Select a file
Select a file to preview.

Comments

Loading comments…