来源信息
- 仓库
- ffsshhttiikk/opencode-agents-skills
- 最近来源活动
- 2026年2月28日 22:55
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 3
- Forks
- 2
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- tailwindcss
- description
- Tailwind CSS utility-first CSS framework for rapid UI development
- license
- MIT
- compatibility
- opencode
- metadata
- {"audience":"developers","category":"css-frameworks"}
## What I do
- Build responsive layouts with utility classes
- Create custom designs with arbitrary values
- Use dark mode and custom themes
- Implement animations and transitions
- Build reusable components with @apply
- Optimize production builds with PurgeCSS
- Use CSS variables for theming
## When to use me
When building modern UIs with rapid development speed.
## Layout
```html
<!-- Container -->
<div class="container mx-auto px-4">
<!-- Flexbox -->
<div class="flex flex-row">
<div class="flex-1">Grow</div>
<div class="flex-none">No grow</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Spans 2</div>
<div>Auto</div>
</div>
<!-- Responsive -->
<div class="flex flex-col md:flex-row">
<!-- Stack on mobile, row on medium+ -->
</div>
```
## Spacing & Sizing
```html
<!-- Padding/Margin -->
<div class="p-4 m-2">
<div class="px-4 py-2">
<div class="pt-4">
<div class="mt-auto">
<!-- Width/Height -->
<div class="w-64 h-32">
<div class="w-full h-screen">
<div class="w-1/2">
<div class="max-w-lg">
```
## Typography
```html
<!-- Text -->
<p class="text-lg font-bold text-gray-700">
<p class="text-center leading-relaxed">
<!-- Headings -->
<h1 class="text-4xl font-black">
<h2 class="text-2xl font-semibold">
<!-- Custom fonts -->
<div class="font-sans font-serif font-mono">
```
## Colors & States
```html
<!-- Colors -->
<button class="bg-blue-500 text-white">
<button class="bg-red-600 hover:bg-red-700">
<button class="bg-green-500 focus:ring-2">
<!-- Opacity -->
<div class="bg-black bg-opacity-50">
<!-- Dark mode -->
<div class="dark:bg-gray-900">
```
## Components
```html
<!-- Button -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Button
</button>
<!-- Card -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold">Card Title</h3>
</div>
</div>
<!-- Input -->
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
```
## Animations
```html
<!-- Transitions -->
<button class="transition duration-300 hover:scale-105">
<div class="transition-all hover:bg-gray-100">
<!-- Keyframes -->
<div class="animate-spin">
<div class="animate-pulse">
<div class="animate-bounce">
```
## Arbitrary Values
```html
<!-- Custom values -->
<div class="top-[calc(100%+1rem)]">
<div class="text-[#1e40af]">
<div class="w-[calc(100%-2rem)]">
```
在 GitHub 查看