← Back to Skills Marketplace
Tailwind V4
by
Kevin Anderson
· GitHub ↗
· v1.1.0
· MIT-0
215
Downloads
0
Stars
2
Active Installs
1
Versions
Install in OpenClaw
/install tailwind-v4
Description
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring...
Usage Guidance
This is a documentation-only skill for setting up a CSS-first Tailwind v4 workflow — it doesn't request secrets or install code itself. Before copying examples into a project: 1) verify any npm/pnpm packages and versions (install from the official registry and check the package maintainer), 2) review and test the SSR inline script (it uses dangerouslySetInnerHTML and reads localStorage — that's normal for FOUC prevention but only safe if the script content is developer-controlled), 3) confirm external resources like Google Fonts are acceptable for your privacy/CSP rules, and 4) test changes in a staging environment (and check your final build outputs) before deploying to production.
Capability Analysis
Type: OpenClaw Skill
Name: tailwind-v4
Version: 1.1.0
The skill bundle is a legitimate documentation and helper tool for Tailwind CSS v4. It contains comprehensive guides on Vite integration, OKLCH color systems, and dark mode strategies. All code snippets (e.g., in SKILL.md and references/setup.md) are standard configuration examples, and no malicious patterns, data exfiltration, or prompt injection attempts were found.
Capability Assessment
Purpose & Capability
The name/description (Tailwind v4, CSS-first theming, OKLCH colors, dark mode) match the SKILL.md and reference files. All examples, package suggestions, and config advice relate to setting up and using Tailwind v4 and Vite; there are no unrelated credentials, binaries, or config paths requested.
Instruction Scope
The SKILL.md and reference files limit themselves to front-end build setup, CSS directives, theming patterns, dark-mode strategies, and small client-side snippets (localStorage/matchMedia). There are no instructions to read system files, access secrets, call unexpected external endpoints, or exfiltrate data. The SSR snippet uses dangerouslySetInnerHTML — a standard FOUC-prevention pattern for injecting small inline scripts; it's safe when the injected string is static and controlled by the developer.
Install Mechanism
This is instruction-only with no install spec and no code files to execute. It recommends installing packages from the package manager (pnpm/npm) which is expected for this purpose; nothing is downloaded from arbitrary URLs or written by the skill itself.
Credentials
No environment variables, credentials, or config path access are requested. The skill's examples use local build/dev tooling and browser APIs (localStorage, matchMedia) which are appropriate and proportionate for a frontend theming guide.
Persistence & Privilege
The skill is not always-enabled and uses the platform defaults for invocation. It does not request persistent system privileges or attempt to modify other skills or global agent settings.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install tailwind-v4 - After installation, invoke the skill by name or use
/tailwind-v4 - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.1.0
- Added comprehensive documentation and best practices for Tailwind CSS v4, focusing on CSS-first configuration and design tokens.
- Detailed usage and differences of @theme directive modes: default, inline, and reference.
- Explained OKLCH color format and demonstrated color variable conventions in v4.
- Provided migration guidance from v3, including configuration shifts toward @tailwindcss/vite and removal of config files.
- Included decision guide for selecting between @theme modes and documented common patterns for tokens, fonts, and animations.
Metadata
Frequently Asked Questions
What is Tailwind V4?
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring... It is an AI Agent Skill for Claude Code / OpenClaw, with 215 downloads so far.
How do I install Tailwind V4?
Run "/install tailwind-v4" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Tailwind V4 free?
Yes, Tailwind V4 is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Tailwind V4 support?
Tailwind V4 is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Tailwind V4?
It is built and maintained by Kevin Anderson (@anderskev); the current version is v1.1.0.
More Skills