coding-with-tailiwnd
构建 Tailwind CSS 组件
Tailwind CSS 组件开发通常需要一致的项目规则和文件放置方式。此 skill 为 Claude、Codex 和 Claude Code 提供简明规则，用于 Tailwind 组件样式设计。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "coding-with-tailiwnd" from https://skillstore.io/skills/emz1998-coding-with-tailiwnd.md and its manifest at https://skillstore.io/api/skills/emz1998-coding-with-tailiwnd/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“coding-with-tailiwnd”。 使用 Tailwind CSS 创建一个通知横幅。
预期结果:
代理会创建一个组件和对应的 CSS 文件，然后为横幅状态应用 Tailwind component layer 样式。
正在使用“coding-with-tailiwnd”。 在不编辑共享 UI 文件的情况下改进现有设置面板。
预期结果:
代理会保持受保护的 UI 文件不变，并将新样式放在允许的组件区域中。
正在使用“coding-with-tailiwnd”。 使新的卡片组件符合 Tailwind v4 项目规则。
预期结果:
代理会在本地 Tailwind 上下文文件存在时进行查看，并遵循记录的指令模式。
安全审计
安全All 10 external command detections are false positives caused by Markdown inline code snippets and file path references, not executable shell syntax. The blocker finding for network reconnaissance is also a false positive; the cited text only describes Tailwind CSS usage. No prompt injection, data exfiltration, or malicious intent was found in SKILL.md.
风险因素
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/emz1998-coding-with-tailiwnd/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/emz1998-coding-with-tailiwnd?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/emz1998-coding-with-tailiwnd?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-coding-with-tailiwnd/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/emz1998-coding-with-tailiwnd.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
Emz1998. (2026). coding-with-tailiwnd security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-coding-with-tailiwnd/audits/4BibTeX 引用
@techreport{emz1998-emz1998-coding-with-tailiwnd-2026,
author = {Emz1998},
title = {coding-with-tailiwnd security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/emz1998-coding-with-tailiwnd/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "coding-with-tailiwnd security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "Emz1998"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/emz1998-coding-with-tailiwnd/audits/4"
identifiers:
- type: other
value: "skillstore:emz1998-coding-with-tailiwnd:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
创建项目组件
在遵循本地目录和样式规则的同时，构建一个新的 Tailwind 样式组件。
标准化样式模式
通过复用相同的 Tailwind 指令模式，使团队中的组件 CSS 保持一致。
安全更新现有 UI
应用 Tailwind 组件样式，同时避免修改受保护的共享 UI 文件。
试试这些提示
为个人资料卡片创建一个 Tailwind CSS 组件。遵循此 skill 中的项目样式规则。
使用单独的 CSS 文件更新此组件。使用 Tailwind component layer 模式，并保持共享 UI 文件不变。
阅读可用的 Tailwind v4.1 上下文文档，然后使用记录的项目模式为此组件添加样式。
将这些相关组件重构为一致的 Tailwind 组件样式。在项目规则支持的地方使用 utilities 和 variants。
最佳实践
- 创建文件前确认正确的 components 目录。
- 在进行大规模样式更改前，查看本地 Tailwind 上下文文档。
- 除非用户明确批准编辑，否则保持共享 UI 组件不变。
避免
- 不要将此 skill 用于通用后端或数据库工作。
- 不要假设缺失的 Tailwind 上下文文档一定存在。
- 未经用户明确批准，不要编辑受保护的共享 UI 文件。