{
  "schemaVersion": "1.0",
  "item": {
    "slug": "tailwindcss",
    "name": "Tailwind CSS",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/tailwindcss",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "tailwindcss",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-04T00:00:43.205Z",
      "expiresAt": "2026-05-11T00:00:43.205Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwindcss",
        "contentDisposition": "attachment; filename=\"tailwindcss-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "tailwindcss"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/tailwindcss"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/tailwindcss",
    "agentPageUrl": "https://openagent3.xyz/skills/tailwindcss/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwindcss/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwindcss/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Content Configuration",
        "body": "content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production\nGlob patterns: \"./src/**/*.{js,jsx,ts,tsx,html}\" covers nested directories\nDynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist\nCheck production build size—if unexpectedly small, content paths are wrong"
      },
      {
        "title": "Responsive Prefixes",
        "body": "Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above\nsm:hidden md:block means hidden on small, visible on medium+—not \"only on medium\"\nBreakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)\nCustom breakpoints in config override defaults—use extend.screens to add without replacing"
      },
      {
        "title": "Dark Mode",
        "body": "dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle\nDark class on <html> or <body>, not on individual components\ndark:bg-gray-900 only applies when ancestor has class=\"dark\"\nSystem preference: darkMode: 'media' uses prefers-color-scheme"
      },
      {
        "title": "State Variants",
        "body": "hover:, focus:, active: work as expected\ngroup-hover: requires group class on parent—child reacts to parent hover\npeer-focus: requires peer class on sibling AND sibling must come first in DOM\nStack variants: dark:hover:bg-gray-700 applies on hover in dark mode"
      },
      {
        "title": "Arbitrary Values",
        "body": "bg-[#1da1f2] for one-off colors—brackets for any arbitrary value\nw-[calc(100%-2rem)] for calc expressions\ngrid-cols-[1fr_2fr_1fr] underscores for spaces in values\nArbitrary properties: [mask-type:alpha] for unsupported CSS properties"
      },
      {
        "title": "@apply Traps",
        "body": "@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected\nOrder in @apply matters unlike HTML classes—later utilities override earlier\nPrefer HTML classes over @apply—easier to maintain, better tree-shaking\nIf you must use @apply, keep it simple: base styles only"
      },
      {
        "title": "Configuration",
        "body": "extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors\nTop-level replaces defaults: colors: { brand: '#xxx' } removes all default colors\ntheme() function in CSS: border-color: theme('colors.gray.200')\nPlugin order matters—later plugins can override earlier ones"
      },
      {
        "title": "Important Modifier",
        "body": "! prefix forces important: !mt-4 generates margin-top: 1rem !important\nUse sparingly—usually indicates specificity battle that should be fixed\nimportant: true in config makes ALL utilities important—avoid, breaks third-party CSS\nimportant: '#app' scopes specificity to selector—better than global important"
      },
      {
        "title": "Common Mistakes",
        "body": "class=\"px-4 px-6\" last one wins in stylesheet, not in HTML—both get applied, cascade decides\nForgetting overflow-hidden with rounded-* on parent with absolute children\nh-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)\ntruncate needs width constraint or max-w-* to actually truncate"
      },
      {
        "title": "Performance",
        "body": "JIT is default since v3—generates only used classes, no purge needed\nAvoid safelist with patterns like bg-*—defeats tree-shaking\n@layer components for reusable component styles—proper cascade order\nLarge arbitrary values generate unique classes—extract to config if repeated"
      }
    ],
    "body": "Content Configuration\ncontent array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production\nGlob patterns: \"./src/**/*.{js,jsx,ts,tsx,html}\" covers nested directories\nDynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist\nCheck production build size—if unexpectedly small, content paths are wrong\nResponsive Prefixes\nMobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above\nsm:hidden md:block means hidden on small, visible on medium+—not \"only on medium\"\nBreakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)\nCustom breakpoints in config override defaults—use extend.screens to add without replacing\nDark Mode\ndark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle\nDark class on <html> or <body>, not on individual components\ndark:bg-gray-900 only applies when ancestor has class=\"dark\"\nSystem preference: darkMode: 'media' uses prefers-color-scheme\nState Variants\nhover:, focus:, active: work as expected\ngroup-hover: requires group class on parent—child reacts to parent hover\npeer-focus: requires peer class on sibling AND sibling must come first in DOM\nStack variants: dark:hover:bg-gray-700 applies on hover in dark mode\nArbitrary Values\nbg-[#1da1f2] for one-off colors—brackets for any arbitrary value\nw-[calc(100%-2rem)] for calc expressions\ngrid-cols-[1fr_2fr_1fr] underscores for spaces in values\nArbitrary properties: [mask-type:alpha] for unsupported CSS properties\n@apply Traps\n@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected\nOrder in @apply matters unlike HTML classes—later utilities override earlier\nPrefer HTML classes over @apply—easier to maintain, better tree-shaking\nIf you must use @apply, keep it simple: base styles only\nConfiguration\nextend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors\nTop-level replaces defaults: colors: { brand: '#xxx' } removes all default colors\ntheme() function in CSS: border-color: theme('colors.gray.200')\nPlugin order matters—later plugins can override earlier ones\nImportant Modifier\n! prefix forces important: !mt-4 generates margin-top: 1rem !important\nUse sparingly—usually indicates specificity battle that should be fixed\nimportant: true in config makes ALL utilities important—avoid, breaks third-party CSS\nimportant: '#app' scopes specificity to selector—better than global important\nCommon Mistakes\nclass=\"px-4 px-6\" last one wins in stylesheet, not in HTML—both get applied, cascade decides\nForgetting overflow-hidden with rounded-* on parent with absolute children\nh-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)\ntruncate needs width constraint or max-w-* to actually truncate\nPerformance\nJIT is default since v3—generates only used classes, no purge needed\nAvoid safelist with patterns like bg-*—defeats tree-shaking\n@layer components for reusable component styles—proper cascade order\nLarge arbitrary values generate unique classes—extract to config if repeated"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "publisherUrl": "https://clawhub.ai/ivangdavila/tailwindcss",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/tailwindcss",
    "downloadUrl": "https://openagent3.xyz/downloads/tailwindcss",
    "agentUrl": "https://openagent3.xyz/skills/tailwindcss/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwindcss/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwindcss/agent.md"
  }
}