入门
- 安装
- 编辑器设置
- Using with Preprocessors
- Optimizing for Production
- Browser Support
核心概念
- Upgrade Guide
- Utility-First Fundamentals
- Handling Hover, Focus, and Other States
- Responsive Design
- Dark Mode
- Reusing Styles
- Adding Custom Styles
- Functions & Directives
定制
- Configuration
- Content Configuration
- Theme Configuration
- Customizing Screens
- Customizing Colors
- Customizing Spacing
- Plugins
- Presets
Base Styles
- Preflight
布局
- Aspect Ratio
- Container
- Columns
- Break After
- Break Before
- Break Inside
- Box Decoration Break
- Box Sizing
- Display
- Floats
- Clear
- Isolation
- Object Fit
- Object Position
- Overflow
- Overscroll Behavior
- Position
- Top / Right / Bottom / Left
- Visibility
- Z-Index
Flexbox & Grid
- Flex Basis
- Flex Direction
- Flex Wrap
- Flex
- Flex Grow
- Flex Shrink
- Order
- Grid Template Columns
- Grid Column Start / End
- Grid Template Rows
- Grid Row Start / End
- Grid Auto Flow
- Grid Auto Columns
- Grid Auto Rows
- Gap
- Justify Content
- Justify Items
- Justify Self
- Align Content
- Align Items
- Align Self
- Place Content
- Place Items
- Place Self
间隔
- Padding
- Margin
- Space Between
尺寸
- Width
- Min-Width
- Max-Width
- Height
- Min-Height
- Max-Height
- Size
排版
- Font Family
- Font Size
- Font Smoothing
- Font Style
- Font Weight
- Font Variant Numeric
- Letter Spacing
- Line Clamp
- Line Height
- List Style Image
- List Style Position
- List Style Type
- Text Align
- Text Color
- Text Decoration
- Text Decoration Color
- Text Decoration Style
- Text Decoration Thickness
- Text Underline Offset
- Text Transform
- Text Overflow
- Text Wrap
- Text Indent
- Vertical Align
- Whitespace
- Word Break
- Hyphens
- Content
背景
- Background Attachment
- Background Clip
- Background Color
- Background Origin
- Background Position
- Background Repeat
- Background Size
- Background Image
- Gradient Color Stops
边框
- Border Radius
- Border Width
- Border Color
- Border Style
- Divide Width
- Divide Color
- Divide Style
- Outline Width
- Outline Color
- Outline Style
- Outline Offset
- Ring Width
- Ring Color
- Ring Offset Width
- Ring Offset Color
Effects
- Box Shadow
- Box Shadow Color
- Opacity
- Mix Blend Mode
- Background Blend Mode
Filters
- Blur
- Brightness
- Contrast
- Drop Shadow
- Grayscale
- Hue Rotate
- Invert
- Saturate
- Sepia
- Backdrop Blur
- Backdrop Brightness
- Backdrop Contrast
- Backdrop Grayscale
- Backdrop Hue Rotate
- Backdrop Invert
- Backdrop Opacity
- Backdrop Saturate
- Backdrop Sepia
表格 Tables
- Border Collapse
- Border Spacing
- Table Layout
- Caption Side
Transitions & Animation
- Transition Property
- Transition Duration
- Transition Timing Function
- Transition Delay
- Animation
Transforms
- Scale
- Rotate
- Translate
- Skew
- Transform Origin
Interactivity
- Accent Color
- Appearance
- Cursor
- Caret Color
- Pointer Events
- Resize
- Scroll Behavior
- Scroll Margin
- Scroll Padding
- Scroll Snap Align
- Scroll Snap Stop
- Scroll Snap Type
- Touch Action
- User Select
- Will Change
SVG
- Fill
- Stroke
- Stroke Width
Accessibility
- Screen Readers
- Forced Color Adjust
其他
- Install Tailwind CSS using PostCSS
- Framework Guides
- Try Tailwind CSS using the Play CDN
- Install Tailwind CSS with Next.js
- Install Tailwind CSS with Laravel
- Install Tailwind CSS with Vite
- Install Tailwind CSS with Nuxt
- Install Tailwind CSS with Gatsby
- Install Tailwind CSS with SolidJS
- Install Tailwind CSS with SvelteKit
- Install Tailwind CSS with Angular
- Install Tailwind CSS with Ruby on Rails
- Install Tailwind CSS with Remix
- Install Tailwind CSS with Phoenix
- Install Tailwind CSS with Parcel
- Install Tailwind CSS with Symfony
- Install Tailwind CSS with Meteor
- Install Tailwind CSS with Create React App
- Install Tailwind CSS with Adonis
- Install Tailwind CSS With Ember.js
- Install Tailwind CSS with Astro
- Install Tailwind CSS with Qwik
- Install Tailwind CSS with Rspack

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

Ring Offset Color

发布于 2024-07-30 22:15:54 字数 133257 浏览 0 评论 0 收藏 0

Utilities for setting the color of outline ring offsets.

Quick reference

Class	Properties
ring-offset-inherit	--tw-ring-offset-color: inherit; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-current	--tw-ring-offset-color: currentColor; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-transparent	--tw-ring-offset-color: transparent; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-black	--tw-ring-offset-color: #000; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-white	--tw-ring-offset-color: #fff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-50	--tw-ring-offset-color: #f8fafc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-100	--tw-ring-offset-color: #f1f5f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-200	--tw-ring-offset-color: #e2e8f0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-300	--tw-ring-offset-color: #cbd5e1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-400	--tw-ring-offset-color: #94a3b8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-500	--tw-ring-offset-color: #64748b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-600	--tw-ring-offset-color: #475569; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-700	--tw-ring-offset-color: #334155; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-800	--tw-ring-offset-color: #1e293b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-900	--tw-ring-offset-color: #0f172a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-950	--tw-ring-offset-color: #020617; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-50	--tw-ring-offset-color: #f9fafb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-100	--tw-ring-offset-color: #f3f4f6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-200	--tw-ring-offset-color: #e5e7eb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-300	--tw-ring-offset-color: #d1d5db; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-400	--tw-ring-offset-color: #9ca3af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-500	--tw-ring-offset-color: #6b7280; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-600	--tw-ring-offset-color: #4b5563; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-700	--tw-ring-offset-color: #374151; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-800	--tw-ring-offset-color: #1f2937; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-900	--tw-ring-offset-color: #111827; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-950	--tw-ring-offset-color: #030712; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-50	--tw-ring-offset-color: #fafafa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-100	--tw-ring-offset-color: #f4f4f5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-200	--tw-ring-offset-color: #e4e4e7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-300	--tw-ring-offset-color: #d4d4d8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-400	--tw-ring-offset-color: #a1a1aa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-500	--tw-ring-offset-color: #71717a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-600	--tw-ring-offset-color: #52525b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-700	--tw-ring-offset-color: #3f3f46; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-800	--tw-ring-offset-color: #27272a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-900	--tw-ring-offset-color: #18181b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-zinc-950	--tw-ring-offset-color: #09090b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-50	--tw-ring-offset-color: #fafafa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-100	--tw-ring-offset-color: #f5f5f5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-200	--tw-ring-offset-color: #e5e5e5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-300	--tw-ring-offset-color: #d4d4d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-400	--tw-ring-offset-color: #a3a3a3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-500	--tw-ring-offset-color: #737373; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-600	--tw-ring-offset-color: #525252; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-700	--tw-ring-offset-color: #404040; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-800	--tw-ring-offset-color: #262626; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-900	--tw-ring-offset-color: #171717; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-neutral-950	--tw-ring-offset-color: #0a0a0a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-50	--tw-ring-offset-color: #fafaf9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-100	--tw-ring-offset-color: #f5f5f4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-200	--tw-ring-offset-color: #e7e5e4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-300	--tw-ring-offset-color: #d6d3d1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-400	--tw-ring-offset-color: #a8a29e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-500	--tw-ring-offset-color: #78716c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-600	--tw-ring-offset-color: #57534e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-700	--tw-ring-offset-color: #44403c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-800	--tw-ring-offset-color: #292524; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-900	--tw-ring-offset-color: #1c1917; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-stone-950	--tw-ring-offset-color: #0c0a09; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-50	--tw-ring-offset-color: #fef2f2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-100	--tw-ring-offset-color: #fee2e2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-200	--tw-ring-offset-color: #fecaca; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-300	--tw-ring-offset-color: #fca5a5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-400	--tw-ring-offset-color: #f87171; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-500	--tw-ring-offset-color: #ef4444; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-600	--tw-ring-offset-color: #dc2626; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-700	--tw-ring-offset-color: #b91c1c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-800	--tw-ring-offset-color: #991b1b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-900	--tw-ring-offset-color: #7f1d1d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-950	--tw-ring-offset-color: #450a0a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-50	--tw-ring-offset-color: #fff7ed; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-100	--tw-ring-offset-color: #ffedd5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-200	--tw-ring-offset-color: #fed7aa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-300	--tw-ring-offset-color: #fdba74; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-400	--tw-ring-offset-color: #fb923c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-500	--tw-ring-offset-color: #f97316; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-600	--tw-ring-offset-color: #ea580c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-700	--tw-ring-offset-color: #c2410c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-800	--tw-ring-offset-color: #9a3412; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-900	--tw-ring-offset-color: #7c2d12; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-orange-950	--tw-ring-offset-color: #431407; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-50	--tw-ring-offset-color: #fffbeb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-100	--tw-ring-offset-color: #fef3c7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-200	--tw-ring-offset-color: #fde68a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-300	--tw-ring-offset-color: #fcd34d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-400	--tw-ring-offset-color: #fbbf24; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-500	--tw-ring-offset-color: #f59e0b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-600	--tw-ring-offset-color: #d97706; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-700	--tw-ring-offset-color: #b45309; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-800	--tw-ring-offset-color: #92400e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-900	--tw-ring-offset-color: #78350f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-amber-950	--tw-ring-offset-color: #451a03; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-50	--tw-ring-offset-color: #fefce8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-100	--tw-ring-offset-color: #fef9c3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-200	--tw-ring-offset-color: #fef08a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-300	--tw-ring-offset-color: #fde047; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-400	--tw-ring-offset-color: #facc15; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-500	--tw-ring-offset-color: #eab308; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-600	--tw-ring-offset-color: #ca8a04; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-700	--tw-ring-offset-color: #a16207; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-800	--tw-ring-offset-color: #854d0e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-900	--tw-ring-offset-color: #713f12; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-950	--tw-ring-offset-color: #422006; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-50	--tw-ring-offset-color: #f7fee7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-100	--tw-ring-offset-color: #ecfccb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-200	--tw-ring-offset-color: #d9f99d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-300	--tw-ring-offset-color: #bef264; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-400	--tw-ring-offset-color: #a3e635; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-500	--tw-ring-offset-color: #84cc16; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-600	--tw-ring-offset-color: #65a30d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-700	--tw-ring-offset-color: #4d7c0f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-800	--tw-ring-offset-color: #3f6212; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-900	--tw-ring-offset-color: #365314; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-lime-950	--tw-ring-offset-color: #1a2e05; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-50	--tw-ring-offset-color: #f0fdf4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-100	--tw-ring-offset-color: #dcfce7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-200	--tw-ring-offset-color: #bbf7d0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-300	--tw-ring-offset-color: #86efac; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-400	--tw-ring-offset-color: #4ade80; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-500	--tw-ring-offset-color: #22c55e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-600	--tw-ring-offset-color: #16a34a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-700	--tw-ring-offset-color: #15803d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-800	--tw-ring-offset-color: #166534; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-900	--tw-ring-offset-color: #14532d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-950	--tw-ring-offset-color: #052e16; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-50	--tw-ring-offset-color: #ecfdf5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-100	--tw-ring-offset-color: #d1fae5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-200	--tw-ring-offset-color: #a7f3d0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-300	--tw-ring-offset-color: #6ee7b7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-400	--tw-ring-offset-color: #34d399; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-500	--tw-ring-offset-color: #10b981; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-600	--tw-ring-offset-color: #059669; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-700	--tw-ring-offset-color: #047857; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-800	--tw-ring-offset-color: #065f46; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-900	--tw-ring-offset-color: #064e3b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-emerald-950	--tw-ring-offset-color: #022c22; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-50	--tw-ring-offset-color: #f0fdfa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-100	--tw-ring-offset-color: #ccfbf1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-200	--tw-ring-offset-color: #99f6e4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-300	--tw-ring-offset-color: #5eead4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-400	--tw-ring-offset-color: #2dd4bf; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-500	--tw-ring-offset-color: #14b8a6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-600	--tw-ring-offset-color: #0d9488; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-700	--tw-ring-offset-color: #0f766e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-800	--tw-ring-offset-color: #115e59; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-900	--tw-ring-offset-color: #134e4a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-teal-950	--tw-ring-offset-color: #042f2e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-50	--tw-ring-offset-color: #ecfeff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-100	--tw-ring-offset-color: #cffafe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-200	--tw-ring-offset-color: #a5f3fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-300	--tw-ring-offset-color: #67e8f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-400	--tw-ring-offset-color: #22d3ee; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-500	--tw-ring-offset-color: #06b6d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-600	--tw-ring-offset-color: #0891b2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-700	--tw-ring-offset-color: #0e7490; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-800	--tw-ring-offset-color: #155e75; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-900	--tw-ring-offset-color: #164e63; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-cyan-950	--tw-ring-offset-color: #083344; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-50	--tw-ring-offset-color: #f0f9ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-100	--tw-ring-offset-color: #e0f2fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-200	--tw-ring-offset-color: #bae6fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-300	--tw-ring-offset-color: #7dd3fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-400	--tw-ring-offset-color: #38bdf8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-500	--tw-ring-offset-color: #0ea5e9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-600	--tw-ring-offset-color: #0284c7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-700	--tw-ring-offset-color: #0369a1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-800	--tw-ring-offset-color: #075985; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-900	--tw-ring-offset-color: #0c4a6e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-sky-950	--tw-ring-offset-color: #082f49; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-50	--tw-ring-offset-color: #eff6ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-100	--tw-ring-offset-color: #dbeafe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-200	--tw-ring-offset-color: #bfdbfe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-300	--tw-ring-offset-color: #93c5fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-400	--tw-ring-offset-color: #60a5fa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-500	--tw-ring-offset-color: #3b82f6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-600	--tw-ring-offset-color: #2563eb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-700	--tw-ring-offset-color: #1d4ed8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-800	--tw-ring-offset-color: #1e40af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-900	--tw-ring-offset-color: #1e3a8a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-950	--tw-ring-offset-color: #172554; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-50	--tw-ring-offset-color: #eef2ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-100	--tw-ring-offset-color: #e0e7ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-200	--tw-ring-offset-color: #c7d2fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-300	--tw-ring-offset-color: #a5b4fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-400	--tw-ring-offset-color: #818cf8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-500	--tw-ring-offset-color: #6366f1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-600	--tw-ring-offset-color: #4f46e5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-700	--tw-ring-offset-color: #4338ca; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-800	--tw-ring-offset-color: #3730a3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-900	--tw-ring-offset-color: #312e81; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-950	--tw-ring-offset-color: #1e1b4b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-50	--tw-ring-offset-color: #f5f3ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-100	--tw-ring-offset-color: #ede9fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-200	--tw-ring-offset-color: #ddd6fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-300	--tw-ring-offset-color: #c4b5fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-400	--tw-ring-offset-color: #a78bfa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-500	--tw-ring-offset-color: #8b5cf6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-600	--tw-ring-offset-color: #7c3aed; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-700	--tw-ring-offset-color: #6d28d9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-800	--tw-ring-offset-color: #5b21b6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-900	--tw-ring-offset-color: #4c1d95; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-violet-950	--tw-ring-offset-color: #2e1065; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-50	--tw-ring-offset-color: #faf5ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-100	--tw-ring-offset-color: #f3e8ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-200	--tw-ring-offset-color: #e9d5ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-300	--tw-ring-offset-color: #d8b4fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-400	--tw-ring-offset-color: #c084fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-500	--tw-ring-offset-color: #a855f7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-600	--tw-ring-offset-color: #9333ea; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-700	--tw-ring-offset-color: #7e22ce; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-800	--tw-ring-offset-color: #6b21a8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-900	--tw-ring-offset-color: #581c87; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-950	--tw-ring-offset-color: #3b0764; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-50	--tw-ring-offset-color: #fdf4ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-100	--tw-ring-offset-color: #fae8ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-200	--tw-ring-offset-color: #f5d0fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-300	--tw-ring-offset-color: #f0abfc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-400	--tw-ring-offset-color: #e879f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-500	--tw-ring-offset-color: #d946ef; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-600	--tw-ring-offset-color: #c026d3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-700	--tw-ring-offset-color: #a21caf; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-800	--tw-ring-offset-color: #86198f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-900	--tw-ring-offset-color: #701a75; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-fuchsia-950	--tw-ring-offset-color: #4a044e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-50	--tw-ring-offset-color: #fdf2f8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-100	--tw-ring-offset-color: #fce7f3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-200	--tw-ring-offset-color: #fbcfe8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-300	--tw-ring-offset-color: #f9a8d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-400	--tw-ring-offset-color: #f472b6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-500	--tw-ring-offset-color: #ec4899; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-600	--tw-ring-offset-color: #db2777; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-700	--tw-ring-offset-color: #be185d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-800	--tw-ring-offset-color: #9d174d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-900	--tw-ring-offset-color: #831843; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-950	--tw-ring-offset-color: #500724; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-50	--tw-ring-offset-color: #fff1f2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-100	--tw-ring-offset-color: #ffe4e6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-200	--tw-ring-offset-color: #fecdd3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-300	--tw-ring-offset-color: #fda4af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-400	--tw-ring-offset-color: #fb7185; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-500	--tw-ring-offset-color: #f43f5e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-600	--tw-ring-offset-color: #e11d48; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-700	--tw-ring-offset-color: #be123c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-800	--tw-ring-offset-color: #9f1239; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-900	--tw-ring-offset-color: #881337; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-rose-950	--tw-ring-offset-color: #4c0519; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Basic usage

Setting the ring offset color

Use the ring-offset-* utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren’t actually possible in CSS.

ring-offset-slate-50 dark:ring-offset-slate-900

<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
  Save Changes
</button>

Changing the opacity

Use the color opacity modifier to control the opacity of an element’s ring offset color.

<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/50"></button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/[.55]"></button>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:ring-offset-blue-500 to only apply the ring-offset-blue-500 utility on hover.

<div class="ring-2 ring-offset-2 ring-offset-blue-300 hover:ring-offset-blue-500">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:ring-offset-blue-500 to apply the ring-offset-blue-500 utility at only medium screen sizes and above.

<div class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind makes the entire default color palette available as ring offset color colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your ring offset color colors by editing theme.ringOffsetColor or theme.extend.ringOffsetColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off ring offset color value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="ring-offset-[#50d71e]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据