tailwind
Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.
来源信息
- 仓库
- digi4care/opencode-mastery
- 最近来源活动
- 2026年2月18日 17:33
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 0
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
36 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- tailwind
- description
- Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.
- license
- MIT
- compatibility
- opencode
- metadata
- {"author":"OpenCode Community","version":"2.0","source":"https://tailwindcss.com/docs"}
# Tailwind CSS v4
Comprehensive Tailwind CSS skill covering v4's CSS-first configuration, utilities, grid layouts, container queries, and framework integration.
## Quick Summary
| Feature | Syntax | Description |
| --------------------- | ------------------------------ | ------------------------------- |
| **v4 Import** | `@import "tailwindcss"` | Replaces `@tailwind` directives |
| **Theme** | `@theme { --color-*: ... }` | CSS variables for customization |
| **Custom Utilities** | `@utility name { ... }` | Define utilities in CSS |
| **Plugins** | `@plugin "@tailwindcss/forms"` | Load plugins in CSS |
| **Container Queries** | `@container`, `@md:`, `@lg:` | Responsive to parent container |
## When to Use This Skill
Use this skill when:
- CSS-first configuration with `@import "tailwindcss"`, `@theme`, `@utility`
- Utility-first styling with utility classes
- Grid layouts with `grid-cols-*`, `col-span-*`
- Container queries with `@container`, `@min-*`, `@max-*`
- Custom utilities with `@utility` directive
- Custom plugins with `@plugin` directive
- Framework integration (React, Vue, Svelte, Next.js, Vite)
## Quick Reference
### Tailwind v4 Import
```css
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--font-sans: "Inter", sans-serif;
}
```
### Custom Utilities (@utility)
```css
@utility text-balance {
text-wrap: balance;
}
```
### Custom Plugin (@plugin)
```css
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
```
### Container Queries
```jsx
<div class="@container">
<div class="@md:flex @lg:grid gap-4">Adapts to container size</div>
</div>
```
### Grid Layout
```jsx
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Wide (2 cols)</div>
<div class="row-span-2">Tall (2 rows)</div>
<div>Item</div>
<div>Item</div>
</div>
```
## Best Practices
1. Use `@import "tailwindcss"` instead of `@tailwind` directives
2. Configure theme with CSS variables in `@theme { }`
3. Use `@utility` for custom utilities in v4
4. Use `@plugin` for official plugins
5. Use container queries (`@container`) for component-responsive layouts
6. Migrate from v3: convert `tailwind.config.js` to CSS `@theme`
## Framework Integration
- **SvelteKit**: Use `@tailwindcss/vite` plugin
- **Next.js**: Use `@tailwindcss/postcss`
- **React/Vue**: Use `@tailwindcss/vite`
## References
- [Tailwind v4 Documentation](https://tailwindcss.com/docs)
- [Migration Guide](https://tailwindcss.com/docs/upgrade-guide)
See `references/` folder for detailed documentation:
- references/configuration.md - Complete v4 setup guide
- references/grid-layouts.md - All grid patterns
- references/container-queries.md - Container query usage
- references/custom-utilities.md - @utility directive
- references/plugins.md - @plugin system
- references/variants.md - All variants (hover, focus, dark, etc.)
- references/best-practices.md - Performance and organization tips
- references/common-patterns.md - Card, Form, Navigation patterns
- references/framework-integration.md - Per-framework setup
- references/troubleshooting.md - Common issues and fixes
_Last updated: 2026-01-03 for Tailwind CSS v4_
在 GitHub 查看