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.
数据来源：ClawHub。 在 ClawSkills 查看
选择你使用的 Agent
方法一：命令行安装（推荐）
推荐（无需提前安装 clawhub）
npx clawhub@latest --dir ~/.claude/skills install lb-tailwindcss-skill或使用 clawhub CLI（需提前安装）
clawhub --dir ~/.claude/skills install lb-tailwindcss-skill⚠️ 需要 Node.js 18+，没有 Node？请使用下方方法二直接下载 ZIP。 安装 Node.js →
方法二：手动下载安装（无需 Node）
下载 ZIP，解压后将文件夹放到以下路径，重启 Agent 即可：
安装路径
~/.claude/skills/lb-tailwindcss-skill/💡解压后将文件夹放到上方路径，重启 Agent 即可生效
--- name: tailwind 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. ---
Complete Tailwind CSS documentation embedded in markdown. Read from references/ to answer questions about utility classes, responsive design, customization, and best practices.
All documentation is in references/ with individual files for each utility and concept:
installation.mdx - Setup and installationeditor-setup.mdx - IDE configurationusing-with-preprocessors.mdx - SCSS, PostCSS integrationoptimizing-for-production.mdx - Build optimizationbrowser-support.mdx - Browser compatibilitycontainer.mdx, columns.mdx - Layout utilitiesaspect-ratio.mdx - Aspect ratio controlbox-sizing.mdx - Box modeldisplay.mdx - Display propertiesfloat.mdx, clear.mdx - Floatsposition.mdx - Positioningtop-right-bottom-left.mdx - Inset utilitiesvisibility.mdx, z-index.mdx - Z-index and visibilitypadding.mdx, margin.mdx - Spacingspace-between.mdx - Gap utilitiesflex-direction.mdx, flex-wrap.mdx, flex.mdx - Flexboxflex-grow.mdx, flex-shrink.mdx, flex-basis.mdx - Flex sizingorder.mdx - Flex/grid ordergrid-template-columns.mdx, grid-template-rows.mdx - Gridgrid-column.mdx, grid-row.mdx - Grid placementgap.mdx - Grid/flex gapjustify-content.mdx, justify-items.mdx, justify-self.mdx - Justifyalign-content.mdx, align-items.mdx, align-self.mdx - Alignplace-content.mdx, place-items.mdx, place-self.mdx - Placefont-family.mdx, font-size.mdx, font-weight.mdx - Fontsfont-smoothing.mdx, font-style.mdx, font-variant-numeric.mdxletter-spacing.mdx, line-height.mdx, line-clamp.mdx - Spacinglist-style-type.mdx, list-style-position.mdx - Liststext-align.mdx, text-color.mdx, text-decoration.mdx - Texttext-transform.mdx, text-overflow.mdx, text-wrap.mdxtext-indent.mdx, vertical-align.mdx, whitespace.mdxword-break.mdx, hyphens.mdxbackground-attachment.mdx, background-clip.mdx - Backgroundbackground-color.mdx, background-origin.mdxbackground-position.mdx, background-repeat.mdxbackground-size.mdx, background-image.mdxgradient-color-stops.mdx - Gradientsborder-radius.mdx, border-width.mdx, border-color.mdx - Bordersborder-style.mdx, divide-width.mdx, divide-color.mdxdivide-style.mdx, outline-width.mdx, outline-color.mdxoutline-style.mdx, outline-offset.mdx, ring-width.mdxring-color.mdx, ring-offset-width.mdx, ring-offset-color.mdxbox-shadow.mdx, box-shadow-color.mdx - Shadowsopacity.mdx, mix-blend-mode.mdx, background-blend-mode.mdxfilter.mdx - Filtersblur.mdx, brightness.mdx, contrast.mdx, grayscale.mdxhue-rotate.mdx, invert.mdx, saturate.mdx, sepia.mdxbackdrop-filter.mdx - Backdrop filtersbackdrop-blur.mdx, backdrop-brightness.mdx, etc.transition-property.mdx, transition-duration.mdx - Transitionstransition-timing-function.mdx, transition-delay.mdxanimation.mdx - Animationsscale.mdx, rotate.mdx, translate.mdx, skew.mdx - Transformstransform-origin.mdx - Transform originaccent-color.mdx, appearance.mdx, cursor.mdx - User interactioncaret-color.mdx, pointer-events.mdx, resize.mdxscroll-behavior.mdx, scroll-margin.mdx, scroll-padding.mdxscroll-snap-align.mdx, scroll-snap-stop.mdx, scroll-snap-type.mdxtouch-action.mdx, user-select.mdx, will-change.mdxadding-custom-styles.mdx - Custom CSSconfiguration.mdx - tailwind.config.jscontent-configuration.mdx - Content pathstheme.mdx - Theme customizationscreens.mdx - Breakpointscolors.mdx - Color palettespacing.mdx - Spacing scaleplugins.mdx - Plugin systempresets.mdx - Config presetsdark-mode.mdx - Dark modereusing-styles.mdx - Component patternsfunctions-and-directives.mdx - @apply, @layer, etc.| 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 |
flex.mdx, text-color.mdx)All files are .mdx (Markdown + JSX) but readable as plain markdown.
安装 TailwindCss Complete Documentation 后，可以对 AI 说这些话来触发它
Help me get started with TailwindCss Complete Documentation
Explains what TailwindCss Complete Documentation does, walks through the setup, and runs a quick demo based on your current project
Use TailwindCss Complete Documentation to complete Tailwind CSS documentation
Invokes TailwindCss Complete Documentation with the right parameters and returns the result directly in the conversation
What can I do with TailwindCss Complete Documentation in my design & creative workflow?
Lists the top use cases for TailwindCss Complete Documentation, with example commands for each scenario
将技能文件夹放到 ~/.claude/skills/lb-tailwindcss-skill/ 目录（个人级，所有项目可用），或 .claude/skills/lb-tailwindcss-skill/（项目级）。重启 AI 客户端后，用 /lb-tailwindcss-skill 主动调用，或让 AI 根据上下文自动发现并使用。
TailwindCss Complete Documentation 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。
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.
Automate my design & creative tasks using TailwindCss Complete Documentation
Identifies repetitive steps in your workflow and sets up TailwindCss Complete Documentation to handle them automatically
TailwindCss Complete Documentation 属于「Design & Creative」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。