tailwindcss by hairyf/skills
npx skills add https://github.com/hairyf/skills --skill tailwindcss该技能基于 Tailwind CSS v4.1.18,生成于 2026-01-28。
Tailwind CSS 是一个实用优先的 CSS 框架,用于快速构建自定义用户界面。无需编写自定义 CSS,您可以直接在标记中使用实用类来组合设计。Tailwind v4 引入了基于 CSS 优先的配置和主题变量,使定制设计系统变得更加容易。
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 安装 | Vite、PostCSS、CLI 和 CDN 设置 | core-installation |
| 实用类 | 理解 Tailwind 的实用优先方法以及样式元素 | core-utility-classes |
| 主题变量 | 设计令牌、自定义主题和主题变量命名空间 | core-theme |
| 响应式设计 | 移动优先断点、响应式变体和容器查询 | core-responsive |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 变体 | 通过状态、伪类和媒体查询变体有条件地应用实用程序 | core-variants |
| 预检 | Tailwind 的基础样式以及如何扩展或禁用它们 | core-preflight |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 显示 | flex、grid、block、inline、hidden、sr-only、flow-root、contents | layout-display |
| 弹性盒子 | flex-direction、justify、items、gap、grow、shrink、wrap、order | layout-flexbox |
| 网格 | grid-cols、grid-rows、gap、place-items、col-span、row-span、subgrid | layout-grid |
| 宽高比 | 控制元素的宽高比以实现响应式媒体 | layout-aspect-ratio |
| 多列布局 | 用于杂志风格或瀑布流布局的多列布局 | layout-columns |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 定位 | 使用 static、relative、absolute、fixed 和 sticky 控制元素定位 | layout-position |
| 内嵌偏移 | 使用 top、right、bottom、left 和 inset 实用程序控制定位元素的放置 | layout-inset |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 宽度 | 使用间距比例、分数、容器尺寸和视口单位设置元素宽度 | layout-width |
| 高度 | 使用间距比例、分数、视口单位和基于内容的尺寸设置元素高度 | layout-height |
| 最小与最大尺寸 | min-width、max-width、min-height、max-height 约束 | layout-min-max-sizing |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 外边距 | 使用间距比例、负值、逻辑属性和空间实用程序控制元素外边距 | layout-margin |
| 内边距 | 使用间距比例、逻辑属性和方向实用程序控制元素内边距 | layout-padding |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 溢出 | 控制元素如何处理超出其容器的内容 | layout-overflow |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 对象适应与定位 | 控制图像和视频的调整大小和定位方式 | layout-object-fit-position |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 表格布局 | border-collapse、table-auto、table-fixed | layout-tables |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 变换基础 | 用于启用变换、硬件加速和自定义变换值的基础变换实用程序 | transform-base |
| 平移 | 使用间距比例、百分比和自定义值在 x、y 和 z 轴上平移元素 | transform-translate |
| 旋转 | 使用度数值和自定义旋转在 2D 和 3D 空间中旋转元素 | transform-rotate |
| 缩放 | 使用百分比值在特定轴或整体上缩放元素 | transform-scale |
| 倾斜 | 使用度数值在 x 和 y 轴上倾斜元素 | transform-skew |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 字体与文本 | 字体大小、粗细、颜色、行高、字间距、装饰、截断 | typography-font-text |
| 文本对齐 | 使用 left、center、right、justify 和逻辑属性控制文本对齐 | typography-text-align |
| 列表样式 | 用于项目符号和标记的 list-style-type、list-style-position | typography-list-style |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 背景 | 背景颜色、渐变、图像、尺寸、位置 | visual-background |
| 边框 | 边框宽度、颜色、圆角、分割线、光环 | visual-border |
| 效果 | 盒子阴影、不透明度、混合模式、背景模糊、滤镜 | visual-effects |
| SVG | 用于 SVG 和图标样式的 fill、stroke、stroke-width | visual-svg |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 过渡与动画 | CSS 过渡、动画关键帧、减少运动 | effects-transition-animation |
| 可见性与交互性 | 可见性、光标、指针事件、用户选择、z 轴索引 | effects-visibility-interactivity |
| 表单控件 | accent-color、appearance、caret-color、resize | effects-form-controls |
| 滚动吸附 | 用于轮播的 scroll-snap-type、scroll-snap-align | effects-scroll-snap |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 深色模式 | 使用 dark 变体和自定义策略实现深色模式 | features-dark-mode |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 升级指南 | 从 v3 迁移到 v4,重大变更,重命名映射 | features-upgrade |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 自定义样式 | 添加自定义样式、实用程序、变体以及使用任意值 | features-custom-styles |
| 函数与指令 | Tailwind 的 CSS 指令和函数,用于处理您的设计系统 | features-functions-directives |
| 内容检测 | Tailwind 如何检测类以及如何自定义内容扫描 | features-content-detection |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 实用模式 | 管理重复、冲突、important 修饰符,何时使用组件 | best-practices-utility-patterns |
@theme 指令定义设计令牌@theme、@utility 和 @custom-variant 而非 JavaScript 配置每周安装量
921
代码仓库
GitHub 星标数
6
首次出现
2026年1月29日
安全审计
安装于
cursor864
claude-code761
trae546
opencode339
codex337
gemini-cli336
The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.
| Topic | Description | Reference |
|---|---|---|
| Installation | Vite, PostCSS, CLI, and CDN setup | core-installation |
| Utility Classes | Understanding Tailwind's utility-first approach and styling elements | core-utility-classes |
| Theme Variables | Design tokens, customizing theme, and theme variable namespaces | core-theme |
| Responsive Design | Mobile-first breakpoints, responsive variants, and container queries | core-responsive |
| Variants | Applying utilities conditionally with state, pseudo-class, and media query variants | core-variants |
| Preflight | Tailwind's base styles and how to extend or disable them | core-preflight |
| Topic | Description | Reference |
|---|---|---|
| Display | flex, grid, block, inline, hidden, sr-only, flow-root, contents | layout-display |
| Flexbox | flex-direction, justify, items, gap, grow, shrink, wrap, order | layout-flexbox |
| Grid | grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid | layout-grid |
| Aspect Ratio | Controlling element aspect ratio for responsive media | layout-aspect-ratio |
| Columns | Multi-column layout for magazine-style or masonry layouts | layout-columns |
| Topic | Description | Reference |
|---|---|---|
| Position | Controlling element positioning with static, relative, absolute, fixed, and sticky | layout-position |
| Inset | Controlling placement of positioned elements with top, right, bottom, left, and inset utilities | layout-inset |
| Topic | Description | Reference |
|---|---|---|
| Width | Setting element width with spacing scale, fractions, container sizes, and viewport units | layout-width |
| Height | Setting element height with spacing scale, fractions, viewport units, and content-based sizing | layout-height |
| Min & Max Sizing | min-width, max-width, min-height, max-height constraints | layout-min-max-sizing |
| Topic | Description | Reference |
|---|---|---|
| Margin | Controlling element margins with spacing scale, negative values, logical properties, and space utilities | layout-margin |
| Padding | Controlling element padding with spacing scale, logical properties, and directional utilities | layout-padding |
| Topic | Description | Reference |
|---|---|---|
| Overflow | Controlling how elements handle content that overflows their container | layout-overflow |
| Topic | Description | Reference |
|---|---|---|
| Object Fit & Position | Controlling how images and video are resized and positioned | layout-object-fit-position |
| Topic | Description | Reference |
|---|---|---|
| Table Layout | border-collapse, table-auto, table-fixed | layout-tables |
| Topic | Description | Reference |
|---|---|---|
| Transform Base | Base transform utilities for enabling transforms, hardware acceleration, and custom transform values | transform-base |
| Translate | Translating elements on x, y, and z axes with spacing scale, percentages, and custom values | transform-translate |
| Rotate | Rotating elements in 2D and 3D space with degree values and custom rotations | transform-rotate |
| Scale | Scaling elements uniformly or on specific axes with percentage values | transform-scale |
| Skew | Skewing elements on x and y axes with degree values | transform-skew |
| Topic | Description | Reference |
|---|---|---|
| Font & Text | Font size, weight, color, line-height, letter-spacing, decoration, truncate | typography-font-text |
| Text Align | Controlling text alignment with left, center, right, justify, and logical properties | typography-text-align |
| List Style | list-style-type, list-style-position for bullets and markers | typography-list-style |
| Topic | Description | Reference |
|---|---|---|
| Background | Background color, gradient, image, size, position | visual-background |
| Border | Border width, color, radius, divide, ring | visual-border |
| Effects | Box shadow, opacity, mix-blend, backdrop-blur, filter | visual-effects |
| SVG | fill, stroke, stroke-width for SVG and icon styling | visual-svg |
| Topic | Description | Reference |
|---|---|---|
| Transition & Animation | CSS transitions, animation keyframes, reduced motion | effects-transition-animation |
| Visibility & Interactivity | Visibility, cursor, pointer-events, user-select, z-index | effects-visibility-interactivity |
| Form Controls | accent-color, appearance, caret-color, resize | effects-form-controls |
| Scroll Snap | scroll-snap-type, scroll-snap-align for carousels | effects-scroll-snap |
| Topic | Description | Reference |
|---|---|---|
| Dark Mode | Implementing dark mode with the dark variant and custom strategies | features-dark-mode |
| Topic | Description | Reference |
|---|---|---|
| Upgrade Guide | Migrating from v3 to v4, breaking changes, rename mappings | features-upgrade |
| Topic | Description | Reference |
|---|---|---|
| Custom Styles | Adding custom styles, utilities, variants, and working with arbitrary values | features-custom-styles |
| Functions & Directives | Tailwind's CSS directives and functions for working with your design system | features-functions-directives |
| Content Detection | How Tailwind detects classes and how to customize content scanning | features-content-detection |
| Topic | Description | Reference |
|---|---|---|
| Utility Patterns | Managing duplication, conflicts, important modifier, when to use components | best-practices-utility-patterns |
@theme directive to define design tokens@theme, @utility, and @custom-variant over JavaScript configsWeekly Installs
921
Repository
GitHub Stars
6
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor864
claude-code761
trae546
opencode339
codex337
gemini-cli336
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
YouTube视频分析师 - 逆向分析病毒内容公式,提取钩子、留存机制与情感触发点
647 周安装
SQLiteData 使用指南:SwiftData 轻量级替代方案,支持 CloudKit 同步
CTF密码学挑战速查指南 | 经典/现代密码攻击、RSA/ECC/流密码实战技巧
648 周安装
Bitrefill CLI:让AI智能体自主购买数字商品,支持加密货币支付
Bilibili 字幕提取工具 - 支持 AI 字幕检测与 ASR 转录,一键下载视频字幕
648 周安装
assistant-ui thread-list 线程列表:管理多聊天线程的 React AI SDK 组件
649 周安装