Description

Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices.

README (SKILL.md)

Tailwind CSS Documentation

Name: TailwindCss Complete Documentation
Author: leonaaardob

Complete Tailwind CSS documentation embedded in markdown. Read from references/ to answer questions about utility classes, responsive design, customization, and best practices.

Documentation Structure

All documentation is in references/ with individual files for each utility and concept:

Core Concepts

installation.mdx - Setup and installation
editor-setup.mdx - IDE configuration
using-with-preprocessors.mdx - SCSS, PostCSS integration
optimizing-for-production.mdx - Build optimization
browser-support.mdx - Browser compatibility

Layout & Spacing

container.mdx, columns.mdx - Layout utilities
aspect-ratio.mdx - Aspect ratio control
box-sizing.mdx - Box model
display.mdx - Display properties
float.mdx, clear.mdx - Floats
position.mdx - Positioning
top-right-bottom-left.mdx - Inset utilities
visibility.mdx, z-index.mdx - Z-index and visibility
padding.mdx, margin.mdx - Spacing
space-between.mdx - Gap utilities

Flexbox & Grid

flex-direction.mdx, flex-wrap.mdx, flex.mdx - Flexbox
flex-grow.mdx, flex-shrink.mdx, flex-basis.mdx - Flex sizing
order.mdx - Flex/grid order
grid-template-columns.mdx, grid-template-rows.mdx - Grid
grid-column.mdx, grid-row.mdx - Grid placement
gap.mdx - Grid/flex gap
justify-content.mdx, justify-items.mdx, justify-self.mdx - Justify
align-content.mdx, align-items.mdx, align-self.mdx - Align
place-content.mdx, place-items.mdx, place-self.mdx - Place

Typography

font-family.mdx, font-size.mdx, font-weight.mdx - Fonts
font-smoothing.mdx, font-style.mdx, font-variant-numeric.mdx
letter-spacing.mdx, line-height.mdx, line-clamp.mdx - Spacing
list-style-type.mdx, list-style-position.mdx - Lists
text-align.mdx, text-color.mdx, text-decoration.mdx - Text
text-transform.mdx, text-overflow.mdx, text-wrap.mdx
text-indent.mdx, vertical-align.mdx, whitespace.mdx
word-break.mdx, hyphens.mdx

Backgrounds

background-attachment.mdx, background-clip.mdx - Background
background-color.mdx, background-origin.mdx
background-position.mdx, background-repeat.mdx
background-size.mdx, background-image.mdx
gradient-color-stops.mdx - Gradients

Borders

border-radius.mdx, border-width.mdx, border-color.mdx - Borders
border-style.mdx, divide-width.mdx, divide-color.mdx
divide-style.mdx, outline-width.mdx, outline-color.mdx
outline-style.mdx, outline-offset.mdx, ring-width.mdx
ring-color.mdx, ring-offset-width.mdx, ring-offset-color.mdx

Effects & Filters

box-shadow.mdx, box-shadow-color.mdx - Shadows
opacity.mdx, mix-blend-mode.mdx, background-blend-mode.mdx
filter.mdx - Filters
blur.mdx, brightness.mdx, contrast.mdx, grayscale.mdx
hue-rotate.mdx, invert.mdx, saturate.mdx, sepia.mdx
backdrop-filter.mdx - Backdrop filters
backdrop-blur.mdx, backdrop-brightness.mdx, etc.

Transitions & Animations

transition-property.mdx, transition-duration.mdx - Transitions
transition-timing-function.mdx, transition-delay.mdx
animation.mdx - Animations

Transforms

scale.mdx, rotate.mdx, translate.mdx, skew.mdx - Transforms
transform-origin.mdx - Transform origin

Interactivity

accent-color.mdx, appearance.mdx, cursor.mdx - User interaction
caret-color.mdx, pointer-events.mdx, resize.mdx
scroll-behavior.mdx, scroll-margin.mdx, scroll-padding.mdx
scroll-snap-align.mdx, scroll-snap-stop.mdx, scroll-snap-type.mdx
touch-action.mdx, user-select.mdx, will-change.mdx

Customization

adding-custom-styles.mdx - Custom CSS
configuration.mdx - tailwind.config.js
content-configuration.mdx - Content paths
theme.mdx - Theme customization
screens.mdx - Breakpoints
colors.mdx - Color palette
spacing.mdx - Spacing scale
plugins.mdx - Plugin system
presets.mdx - Config presets

Advanced Features

dark-mode.mdx - Dark mode
reusing-styles.mdx - Component patterns
functions-and-directives.mdx - @apply, @layer, etc.

Quick Reference

Common Tasks

Task	File to Read
Setup Tailwind	`installation.mdx`
Responsive design	`responsive-design.mdx`, `screens.mdx`
Dark mode	`dark-mode.mdx`
Custom colors	`customizing-colors.mdx`, `colors.mdx`
Layout utilities	`container.mdx`, `display.mdx`, `position.mdx`
Flexbox	`flex-direction.mdx`, `justify-content.mdx`, `align-items.mdx`
Grid	`grid-template-columns.mdx`, `gap.mdx`
Typography	`font-size.mdx`, `font-weight.mdx`, `text-color.mdx`
Spacing	`padding.mdx`, `margin.mdx`, `space-between.mdx`
Backgrounds	`background-color.mdx`, `background-image.mdx`
Borders	`border-width.mdx`, `border-color.mdx`, `border-radius.mdx`
Shadows	`box-shadow.mdx`
Transitions	`transition-property.mdx`
Custom config	`configuration.mdx`, `theme.mdx`
Plugins	`plugins.mdx`

When to Use This Skill

Working with Tailwind CSS utility classes
Responsive design questions
Dark mode implementation
Custom Tailwind configuration
Plugin development
Migration to Tailwind
Styling patterns and best practices

How to Navigate

For specific utilities: Find the utility name file (e.g., flex.mdx, text-color.mdx)
For concepts: Check concept files (installation, dark-mode, responsive-design)
For customization: See configuration files (configuration, theme, plugins)
For best practices: Read reusing-styles, adding-custom-styles

All files are .mdx (Markdown + JSX) but readable as plain markdown.

Usage Guidance

This skill appears to be a straightforward local copy of Tailwind CSS documentation and does not ask for credentials or install remote code, which is good. However, the SKILL.md triggered a 'base64-block' prompt-injection heuristic — you should manually inspect the full SKILL.md (and any large/truncated files) before installing. Look for embedded base64/data-URIs or long encoded strings and any instructions that go beyond 'read from references/'. Verify the source (owner ID is unknown), confirm license/attribution if that matters, and if you're unsure run the skill in an isolated/test agent or review the code files (references/utils/colors.ts) for dynamic eval/exec patterns. If SKILL.md simply contains data URIs or benign examples, the risk is low; if it contains encoded prompts or hidden instructions, do not install.

Capability Analysis

Type: OpenClaw Skill Name: lb-tailwindcss-skill Version: 0.1.0 The skill bundle is primarily documentation for Tailwind CSS. The `references/utils/colors.ts` file uses Node.js `fs.promises.readFile` to access the local file system. While the target file (`node_modules/tailwindcss/theme.css`) and the purpose (extracting color definitions for documentation) are aligned with the skill's stated function, direct file system access is a high-risk capability that, without clear sandboxing or strict path validation, could be abused. There is no clear evidence of intentional harmful behavior, but the presence of this risky capability makes it suspicious.

Capability Assessment

✓ Purpose & Capability

The name/description (Tailwind CSS documentation) match the packaged contents: many .mdx reference files and a README describing documentation extracted from tailwindlabs/tailwindcss.com. The skill declares no binaries, env vars, or config paths — consistent with a read-only documentation skill. A single small utility source file (references/utils/colors.ts) is present and appropriate for docs rendering.

ℹ Instruction Scope

SKILL.md tells the agent to read files under references/ to answer Tailwind questions, which is within scope for a documentation skill. However the static pre-scan flagged a 'base64-block' pattern in SKILL.md (prompt-injection pattern). That is unexpected for a pure doc skill and should be reviewed: look for embedded base64/data-uris or obfuscated text in SKILL.md or truncation/hidden instructions that might try to influence the agent.

✓ Install Mechanism

No install spec is present (instruction-only behaviour). Nothing is downloaded or written during install, minimizing install-time risk. The large file set is bundled with the skill, so no remote fetches are required.

✓ Credentials

The skill requires no environment variables, credentials, or config paths. This is proportionate for a documentation/reference skill.

✓ Persistence & Privilege

Flags are default (always: false, user-invocable: true). The skill does not request persistent privileges or system-wide configuration changes and does not claim to write other skills’ configs.

Version History

v0.1.0

- Initial release of the Tailwind CSS skill, providing complete documentation and coverage for all utility classes, responsive design, configuration, plugins, and best practices. - Documentation is organized into modular `.mdx` files by topic, accessible via a clear structure and quick reference table. - Supports key topics: setup, utility classes, customization, dark mode, plugins, advanced features, and common styling tasks. - Includes guidance on how to navigate and leverage the embedded documentation for various Tailwind CSS questions.

Metadata

Slug lb-tailwindcss-skill

Version 0.1.0

License —

All-time Installs 7

Active Installs 4

Total Versions 1

Frequently Asked Questions

What is TailwindCss Complete Documentation?

Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices. It is an AI Agent Skill for Claude Code / OpenClaw, with 1982 downloads so far.

How do I install TailwindCss Complete Documentation?

Run "/install lb-tailwindcss-skill" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is TailwindCss Complete Documentation free?

Yes, TailwindCss Complete Documentation is completely free (open-source). You can download, install and use it at no cost.

Which platforms does TailwindCss Complete Documentation support?

TailwindCss Complete Documentation is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created TailwindCss Complete Documentation?

It is built and maintained by leonaaardob (@leonaaardob); the current version is v0.1.0.

More Skills

TailwindCss Complete Documentation