Tailwind CSS 实用优先CSS框架 - 快速构建自定义UI界面 | v4.1.18教程

tailwindcss by hairyf/skills

921 周安装量

6 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/hairyf/skills --skill tailwindcss

开发 JavaScript 框架

🇨🇳中文介绍

Tailwind CSS

该技能基于 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 开发者，精准高效

联系我们

显示 & 弹性盒子 & 网格

主题	描述	参考链接
显示	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 指令定义设计令牌
移动优先的响应式设计 - 对移动设备使用无前缀实用程序，对断点使用带前缀的实用程序
使用完整的类名 - 切勿使用字符串插值动态构造类名
利用变体 - 堆叠变体以实现复杂的条件样式
优先使用 CSS 优先配置 - 使用 @theme、@utility 和 @custom-variant 而非 JavaScript 配置

🇺🇸English

Tailwind CSS

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.

Core References

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

Layout

Display & Flexbox & Grid

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

Positioning

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

Sizing

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

Spacing

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

Overflow

Topic	Description	Reference
Overflow	Controlling how elements handle content that overflows their container	layout-overflow

Images & Replaced Elements

Topic	Description	Reference
Object Fit & Position	Controlling how images and video are resized and positioned	layout-object-fit-position

Tables

Topic	Description	Reference
Table Layout	border-collapse, table-auto, table-fixed	layout-tables

Transforms

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

Typography

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

Visual

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

Effects & Interactivity

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

Features

Dark Mode

Topic	Description	Reference
Dark Mode	Implementing dark mode with the dark variant and custom strategies	features-dark-mode

Migration

Topic	Description	Reference
Upgrade Guide	Migrating from v3 to v4, breaking changes, rename mappings	features-upgrade

Customization

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

Best Practices

Topic	Description	Reference
Utility Patterns	Managing duplication, conflicts, important modifier, when to use components	best-practices-utility-patterns

Key Recommendations

Use utility classes directly in markup - Compose designs by combining utilities
Customize with theme variables - Use @theme directive to define design tokens
Mobile-first responsive design - Use unprefixed utilities for mobile, prefixed for breakpoints
Use complete class names - Never construct classes dynamically with string interpolation
Leverage variants - Stack variants for complex conditional styling
Prefer CSS-first configuration - Use @theme, @utility, and @custom-variant over JavaScript configs

Weekly Installs

921

Repository

hairyf/skills

GitHub Stars

First Seen

Jan 29, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

cursor864

claude-code761

trae546

opencode339

codex337

gemini-cli336

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

103,800 周安装

Tailwind CSS 实用优先CSS框架 - 快速构建自定义UI界面 | v4.1.18教程

🇨🇳中文介绍

Tailwind CSS

核心参考

相关 Skills

布局

显示 & 弹性盒子 & 网格

定位

尺寸

间距

溢出

图像与替换元素

表格

变换

排版

视觉

效果与交互

功能

深色模式

迁移

自定义

最佳实践

关键建议

🇺🇸English

Tailwind CSS

Core References

Layout

Display & Flexbox & Grid

Positioning

Sizing

Spacing

Overflow

Images & Replaced Elements

Tables

Transforms

Typography

Visual

Effects & Interactivity

Features

Dark Mode

Migration

Customization

Best Practices

Key Recommendations

最新 Skills