tailwindcss-helper

# Tailwind CSS Helper ## 何时使用此技能 当你需要以下情况时使用此技能： - 查找特定的 Tailwind CSS 工具类 - 了解如何使用 Tailwind 实现 CSS 属性 - 查找代码示例和最佳实践 - 学习响应式设计、状态和变体 - 参考 Tailwind CSS 文档 ## 如何使用 要查找 Tailwind CSS 文档： 1. **确定主题** - 确定你需要什么 CSS 属性或功能（例如：`flex-direction`、`font-weight`、`background-color`） 2. **找到相关文件** - 在 [文档目录索引] 中找到对应的参考文件 3. **阅读文档** - 每个文件包含： - 基本用法示例 - 响应式变体 - 自定义值选项 - 状态变体（hover、focus、dark mode） - 最佳实践 ## 必须先看文档 1. **确定需求** - 明确你需要什么组件或功能（例如：按钮、模态框、表单验证） 2. **查阅文档分类** - 在下方的「文档目录索引」中找到对应类别的文档 3. **定位具体文件** - 根据分类中的文件名，在 `references/` 目录中找到对应文档 4. **阅读文档内容** - 使用 `read` 工具查看完整文档，理解后再实现 5. **参考示例代码** - 文档中包含完整的 HTML/CSS/JavaScript 示例 ## 文档目录索引 `references/` 目录包含 203 个涵盖所有 Tailwind CSS 功能的文档文件。 ### ./references/docs-accent-color.md - Apply Responsive Accent Color with Breakpoint Variant - Use Custom Theme Color in Markup - Customize Theme Colors with CSS Variables ### ./references/docs-adding-custom-styles.md - Apply Arbitrary Values with Responsive Modifiers in Tailwind CSS HTML - Use Simple Custom Utilities in HTML (HTML) - Apply Arbitrary CSS Properties with Modifiers in Tailwind CSS HTML - Combine Value Types with Multiple Arguments in CSS Utilities - Use Simple Custom Utilities with Variants in HTML (HTML) - Combine Value Types with Multiple Declarations in CSS Utilities - Define Functional Custom Utilities with `@utility` and `--value()` (CSS) - Define Simple Custom Utilities with `@utility` (CSS) - Support Literal Utility Values in Tailwind CSS Utilities - Define Custom Tailwind CSS Variants Using Shorthand Syntax - Import Tailwind CSS and Add Custom Styles (CSS) - Override Component Classes with Utility Classes (HTML) - Define Complex Custom Utilities with Nesting (CSS) - Support Fraction Values in CSS Utilities using `ratio` Data Type - Apply Arbitrary Values for Direct Styling in Tailwind CSS HTML - Support Negative Values in Tailwind CSS Utilities ### ./references/docs-align-content.md - Align rows to the start of the cross axis using Tailwind CSS - Apply responsive align-content utilities in Tailwind CSS - Distribute rows with space between using Tailwind CSS - Distribute rows with space around using Tailwind CSS - Distribute rows with space evenly using Tailwind CSS - Stretch rows to fill available space using Tailwind CSS - Align rows to the end of the cross axis using Tailwind CSS - Reset row alignment to normal using Tailwind CSS ### ./references/docs-align-items.md - Apply responsive align-items utilities in Tailwind CSS HTML - Align items to the cross-start with items-start in HTML - Align items to the cross-end with items-end in HTML - Apply items-stretch for cross-axis stretching in HTML - Align items by text baseline with items-baseline in HTML ### ./references/docs-align-self.md - Aligning Flex/Grid Item to Start of Cross Axis (self-start) in HTML - Applying Responsive align-self Utilities in Tailwind CSS (HTML) ### ./references/docs-animation.md - Responsive Animation with Breakpoint Variants - Customize Animation Theme with CSS Variables - Use Custom Themed Animation in Markup - Custom Animation with Arbitrary Values - Custom Animation with CSS Variables ### ./references/docs-appearance.md - Apply Tailwind CSS `appearance` Utilities Responsively - Remove Default Browser Styling with Tailwind CSS `appearance-none` ### ./references/docs-aspect-ratio.md - Apply responsive aspect ratios using Tailwind CSS variants - Use a custom aspect ratio utility defined in Tailwind CSS theme - Define a custom aspect ratio utility in Tailwind CSS theme - Set a custom aspect ratio with arbitrary values in Tailwind CSS - Apply a custom aspect ratio using a CSS variable in Tailwind CSS - Apply a specific aspect ratio to an element using Tailwind CSS - Apply a 16:9 video aspect ratio to an iframe using Tailwind CSS ### ./references/docs-backdrop-filter.md - Apply Basic Backdrop Filters with Tailwind CSS - Remove Backdrop Filters with Tailwind CSS ### ./references/docs-backdrop-filter-brightness.md - Apply Responsive Backdrop Brightness Filters in HTML with Tailwind CSS ### ./references/docs-backdrop-filter-contrast.md - Apply responsive backdrop contrast with Tailwind CSS breakpoints - Set custom backdrop contrast value with bracket notation ### ./references/docs-backdrop-filter-grayscale.md - Apply responsive backdrop grayscale with Tailwind CSS - Apply basic backdrop grayscale utilities in Tailwind CSS - Set custom backdrop grayscale value with Tailwind CSS ### ./references/docs-backdrop-filter-invert.md - Apply Basic Backdrop Invert Filters with Tailwind CSS - Apply Backdrop Invert with CSS Variable in Tailwind CSS - Apply Responsive Backdrop Invert Filters with Tailwind CSS ### ./references/docs-backdrop-filter-opacity.md - Apply Responsive Backdrop Opacity with Tailwind CSS - Apply Basic Backdrop Opacity Filters with Tailwind CSS ### ./references/docs-backdrop-filter-saturate.md - Apply backdrop saturation with Tailwind CSS utilities - Reference CSS custom properties for backdrop saturation ### ./references/docs-backdrop-filter-sepia.md - Apply responsive backdrop sepia with breakpoint variants - Apply backdrop sepia filter with Tailwind CSS utility classes - Apply custom backdrop sepia value with arbitrary syntax ### ./references/docs-backface-visibility.md - Apply Responsive backface-visibility Utility in HTML - Apply backface-visibility Utilities in HTML ### ./references/docs-background-attachment.md - Responsive background-attachment with breakpoint variants ### ./references/docs-background-blend-mode.md - Responsive background blend mode with Tailwind CSS breakpoints ### ./references/docs-background-clip.md - Apply responsive background-clip utilities in HTML (Tailwind CSS) - Apply basic background-clip utilities in HTML (Tailwind CSS) - Crop background to text shape in HTML (Tailwind CSS) ### ./references/docs-background-color.md - Map Tailwind `bg-*` Classes to CSS Background Colors - Apply Responsive Background Color using Tailwind CSS Breakpoint Variants ### ./references/docs-background-image.md - Apply Responsive Gradient Utilities with Breakpoint Variants - Create Conic Gradient Backgrounds with Tailwind CSS - Create Radial Gradient Backgrounds with Tailwind CSS - Create Linear Gradient Backgrounds with Tailwind CSS ### ./references/docs-background-origin.md - Responsive background-origin with breakpoint variants ### ./references/docs-background-position.md - Apply Tailwind CSS background-position utilities for basic positioning - Apply background-position using CSS variables in Tailwind CSS - Apply responsive background-position utilities in Tailwind CSS ### ./references/docs-background-repeat.md - Responsive background-repeat with Tailwind CSS breakpoints ### ./references/docs-background-size.md - Apply custom `background-size` value in Tailwind CSS - Apply responsive `background-size` utilities in Tailwind CSS - Apply `bg-cover` for background image fill in Tailwind CSS - Apply custom CSS variable for `background-size` in Tailwind CSS - Apply `bg-auto` for default background image size in Tailwind CSS - Apply `bg-contain` for background image fill without cropping in Tailwind CSS ### ./references/docs-border-color.md - Basic Border Color Example - HTML - Apply Amber 400 Border Start Color with Tailwind CSS - Apply Amber 600 Border Start Color with Tailwind CSS - Apply Amber 500 Border Start Color with Tailwind CSS - Apply Amber 300 Border Start Color with Tailwind CSS - Apply Amber 200 Border Start Color with Tailwind CSS - Apply Amber 100 Border Start Color with Tailwind CSS - Apply Amber 50 Border Start Color with Tailwind CSS - Apply Orange 950 Border Start Color with Tailwind CSS - Apply Orange 400 Border Start Color with Tailwind CSS - Apply Orange 700 Border Start Color with Tailwind CSS - Apply Orange 600 Border Start Color with Tailwind CSS - Apply Orange 900 Border Start Color with Tailwind CSS - Apply Orange 800 Border Start Color with Tailwind CSS - Apply Red 700 Border Start Color with Tailwind CSS - Apply Orange 500 Border Start Color with Tailwind CSS - Apply Orange 300 Border Start Color with Tailwind CSS - Apply Red 900 Border Start Color with Tailwind CSS - Apply Red 600 Border Start Color with Tailwind CSS - Apply Red 950 Border Start Color with Tailwind CSS - Apply Orange 100 Border Start Color with Tailwind CSS - Apply Orange 200 Border Start Color with Tailwind CSS - Apply Orange 50 Border Start Color with Tailwind CSS - Apply Red 800 Border Start Color with Tailwind CSS - Apply Red 500 Border Start Color with Tailwind CSS - Apply Border Color on Focus State with Tailwind CSS - Tailwind CSS Utilities for `border-inline-start-color` - Apply Border Inline End Color with Tailwind CSS Utility Classes - Set Border Block Color with Tailwind CSS Utilities - Apply Border Inline Color with Tailwind CSS and CSS ### ./references/docs-border-radius.md - Apply directional border radius (start) with Tailwind CSS ### ./references/docs-border-spacing.md - Use CSS Custom Property for Border Spacing in HTML with Tailwind CSS - Apply Basic Border Spacing to HTML Tables with Tailwind CSS - Customize Tailwind CSS Spacing Theme Variable for Border Spacing - Apply Responsive Border Spacing in HTML with Tailwind CSS ### ./references/docs-border-style.md - Apply responsive border styles with breakpoint variants ### ./references/docs-border-width.md - Apply responsive border width with breakpoint variants - Set custom border width with bracket notation - Add borders between child elements with divide utilities - Logical property border-width utilities in Tailwind CSS - Reverse divide direction for reversed flex layouts ### ./references/docs-box-decoration-break.md - Responsive box-decoration-break with breakpoint variant - Apply box-decoration-clone utility in HTML ### ./references/docs-box-shadow.md - Apply Different Sized Box Shadows in HTML with Tailwind CSS - Apply Responsive Box Shadows in Tailwind CSS - Set Custom Box Shadow Colors in HTML with Tailwind CSS - Apply Custom Box Shadow Values in Tailwind CSS - Define Inset Ring Colors with Tailwind CSS Variables ### ./references/docs-box-sizing.md - Apply responsive box-sizing with Tailwind CSS breakpoint variants - Apply box-content utility in HTML with Tailwind CSS - Apply box-border utility in HTML with Tailwind CSS ### ./references/docs-break-after.md - break-after Basic Example with Columns - break-after Responsive Design with Breakpoint Variant ### ./references/docs-break-before.md - Control Column/Page Breaks with Tailwind CSS `break-before` Utilities - Apply Responsive `break-before` Utilities in Tailwind CSS ### ./references/docs-break-inside.md - Apply responsive break-inside utilities in HTML - Apply break-inside utilities in HTML ### ./references/docs-caption-side.md - Responsive caption-side with breakpoint variants ### ./references/docs-caret-color.md - Apply Responsive Caret Colors with Tailwind CSS - Set Custom Caret Color with Hex Value in Tailwind CSS ### ./references/docs-clear.md - Apply Responsive Clears with Tailwind CSS Breakpoint Variants - Disable Clears with Tailwind CSS `clear-none` Utility ### ./references/docs-color.md - Apply predefined text color utilities in HTML - Apply responsive text color with breakpoint variants in HTML ### ./references/docs-color-scheme.md - Apply Tailwind CSS color scheme utilities conditionally in dark mode ### ./references/docs-colors.md - Applying Tailwind CSS Color Utilities in a Notification Component (HTML) - Using Arbitrary Opacity Values and CSS Variables with Tailwind CSS Colors (HTML) ### ./references/docs-columns.md - Apply responsive column layouts with Tailwind CSS breakpoints - Specify column gap with Tailwind CSS - Use custom Tailwind CSS column utility in HTML - Apply custom column width using arbitrary values in Tailwind CSS - Customize Tailwind CSS column utilities in theme configuration - Set ideal column width with Tailwind CSS - Apply fixed number of columns with Tailwind CSS - Apply custom column width using CSS variables in Tailwind CSS ### ./references/docs-compatibility.md - Use CSS Variables in CSS Modules to Improve Tailwind Performance - Apply color utilities with Tailwind hover states - Reference Global Styles in CSS Modules for Tailwind @apply - Reference Global Styles in Vue/Svelte/Astro Components for Tailwind @apply - Bundle CSS imports with Tailwind - Use native CSS variables in Tailwind - Flatten nested CSS with Tailwind - Use CSS Variables in Vue/Svelte/Astro Components for Better Tailwind Performance ### ./references/docs-content.md - Set Content for Pseudo-elements with Tailwind CSS - Apply Responsive Content Utilities with Tailwind CSS - Control Tailwind CSS Content with CSS Variables ### ./references/docs-cursor.md - Apply Responsive Cursor Styles with Tailwind CSS - Apply Basic Cursor Styles with Tailwind CSS ### ./references/docs-dark-mode.md - Activate Tailwind CSS Dark Mode Manually with HTML Class ### ./references/docs-detecting-classes-in-source-files.md - Correct Prop Mapping for Static Class Names in JSX - Advanced Prop Mapping for Varied Class Names in JSX - Setting Tailwind's Base Path for Source Detection in CSS - Safelist Utilities with Variants in Tailwind CSS - Correct Dynamic Class Name Usage in HTML - Safelist Utilities with Ranges in Tailwind CSS - Explicitly Exclude Classes in Tailwind CSS - Incorrect Dynamic Class Name Construction in HTML - Example JSX Component with Tailwind Classes - Incorrect Dynamic Class Name Construction with Props in JSX - Registering Additional Tailwind Source Paths in CSS ### ./references/docs-display.md - Create Inline Grid Containers with Tailwind CSS Inline-Grid Utility - Create Block Formatting Contexts with Tailwind CSS Flow Root Utility - Create Inline Flex Containers with Tailwind CSS Inline-Flex Utility - Implement Tailwind CSS Table Layouts with Utility Classes - Apply Responsive Display Utilities in Tailwind CSS - Create Block-Level Flex Containers with Tailwind CSS Flex Utility - Create Grid Containers with Tailwind CSS Grid Utility ### ./references/docs-editor-setup.md - Sort Tailwind CSS Classes with Prettier Plugin (HTML) ### ./references/docs-field-sizing.md - Apply responsive field sizing with Tailwind CSS - Apply content-based field sizing with Tailwind CSS - Apply fixed field sizing with Tailwind CSS ### ./references/docs-fill.md - Apply Tailwind CSS fill-cyan-300 utility - Customize Tailwind CSS Theme for Fill Colors - Apply Responsive Fill Colors to SVG in Tailwind CSS ### ./references/docs-filter.md - Apply responsive filter utilities with breakpoints - Remove all filters with filter-none utility - Apply filter utilities on hover state - Apply custom CSS variable filters - Apply blur and grayscale filters with Tailwind CSS - Apply custom filter values with bracket notation ### ./references/docs-filter-blur.md - Apply responsive blur filters in Tailwind CSS ### ./references/docs-filter-brightness.md - Apply Brightness Filters with Tailwind CSS and CSS Variables - Apply Basic Brightness Filters with Tailwind CSS - Apply Responsive Brightness Filters with Tailwind CSS - Apply Custom Brightness Filters with Tailwind CSS Arbitrary Values ### ./references/docs-filter-contrast.md - Apply custom contrast value with bracket notation - Apply responsive contrast filter with breakpoint variants - Apply contrast filter using CSS custom properties - Apply contrast filter with predefined Tailwind utilities ### ./references/docs-filter-drop-shadow.md - Remove Drop Shadow with Tailwind CSS Utility - Adjust Drop Shadow Opacity with Tailwind CSS Modifiers - Set Drop Shadow Color with Tailwind CSS Color Utilities - Apply Drop Shadow with Tailwind CSS Classes ### ./references/docs-filter-grayscale.md - Apply Custom Grayscale Values and CSS Variables with Tailwind CSS - Apply Basic Grayscale Filters to Images using Tailwind CSS ### ./references/docs-filter-hue-rotate.md - Apply responsive hue-rotate utilities in HTML - Apply custom hue-rotate values with bracket notation in HTML - Apply negative hue-rotate values in HTML - Apply hue-rotate filter with predefined values in HTML ### ./references/docs-filter-invert.md - Apply Responsive Invert Filter with Tailwind CSS Breakpoints ### ./references/docs-filter-saturate.md - Apply Basic Saturation Filters with Tailwind CSS - Use CSS Variables for Saturation with Tailwind CSS - Apply Responsive Saturation Filters with Tailwind CSS - Apply Custom Saturation Values with Tailwind CSS ### ./references/docs-filter-sepia.md - Apply responsive sepia filters to images with Tailwind CSS breakpoints - Apply basic sepia filters to images with Tailwind CSS - Apply custom sepia filter values using Tailwind CSS arbitrary values - Apply sepia filter using CSS custom properties in Tailwind CSS ### ./references/docs-flex.md - flex-initial Utility Example - Basic flex-1 Utility Example - flex-auto Utility Example - flex-none Utility Example - Custom flex Value with Bracket Notation - Responsive flex Utility with Breakpoint Variant - Custom flex Property with CSS Variable ### ./references/docs-flex-basis.md - Apply flex-basis using percentage fractions in Tailwind CSS - Apply flex-basis using spacing scale in Tailwind CSS - Apply flex-basis using container scale in Tailwind CSS - Apply responsive flex-basis utilities in Tailwind CSS - Apply flex-basis with custom arbitrary values in Tailwind CSS - Use custom container basis utility in Tailwind CSS - Apply flex-basis with custom CSS variables in Tailwind CSS ### ./references/docs-flex-direction.md - Apply responsive `flex-direction` with Tailwind CSS variants - Apply `flex-col` for vertical flex items in Tailwind CSS - Apply `flex-row` for horizontal flex items in Tailwind CSS - Apply `flex-col-reverse` for reversed vertical flex items in Tailwind CSS - Apply `flex-row-reverse` for reversed horizontal flex items in Tailwind CSS ### ./references/docs-flex-grow.md - Applying Responsive Flex Grow Utilities with Tailwind CSS Breakpoints - Setting Custom Flex Grow Values with Tailwind CSS `grow-[<value>]` Syntax - Allowing Flex Items to Grow with Tailwind CSS `grow` Utility - Proportionally Growing Flex Items with Tailwind CSS `grow-<number>` Utilities - Applying CSS Variables for Flex Grow with Tailwind CSS `grow-(<custom-property>)` - Preventing Flex Items from Growing with Tailwind CSS `grow-0` Utility ### ./references/docs-flex-shrink.md - Applying Responsive Shrink Utilities with Tailwind CSS - Using Custom Shrink Values with Tailwind CSS - Using CSS Variables for Shrink Values in Tailwind CSS - Allowing Flex Items to Shrink with Tailwind CSS ### ./references/docs-flex-wrap.md - Apply Responsive Flex Wrap Utilities with Tailwind CSS ### ./references/docs-float.md - Apply Logical Float Properties with Tailwind CSS - Apply Responsive Float with Tailwind CSS Breakpoints ### ./references/docs-font-size.md - Set font-size with line-height modifiers in HTML - Define Custom Font Size Utility in Tailwind CSS Theme - Apply responsive font-size utilities in HTML ### ./references/docs-font-smoothing.md - Responsive font-smoothing with Tailwind CSS breakpoints ### ./references/docs-font-stretch.md - Apply responsive font-stretch utilities in HTML with Tailwind CSS - Apply percentage-based font-stretch in HTML with Tailwind CSS - Apply basic font-stretch utilities in HTML with Tailwind CSS - Apply CSS variable for font-stretch in HTML with Tailwind CSS - Apply custom font-stretch values in HTML with Tailwind CSS ### ./references/docs-font-style.md - Responsive font-style with Tailwind CSS breakpoints ### ./references/docs-font-variant-numeric.md - Combine Multiple Numeric Font Variants with Tailwind CSS ### ./references/docs-font-weight.md - Apply responsive font-weight with breakpoint variants ### ./references/docs-forced-color-adjust.md - Restoring forced colors with Tailwind CSS - Applying forced-color-adjust responsively with Tailwind CSS - Opting out of forced colors with Tailwind CSS ### ./references/docs-functions-and-directives.md - Load Legacy Tailwind CSS Plugin with @plugin Directive (CSS) - Access Tailwind Theme Values with theme() Function (CSS) - Generate spacing values with --spacing() function ### ./references/docs-gap.md - Apply responsive gap in Tailwind CSS - Apply custom gap value in Tailwind CSS - Apply uniform gap in Tailwind CSS Grid - Apply custom gap using CSS variable in Tailwind CSS ### ./references/docs-grid-auto-columns.md - Apply responsive grid-auto-columns utilities in Tailwind CSS - Apply basic grid-auto-columns utilities in Tailwind CSS - Set custom grid-auto-columns value in Tailwind CSS - Apply grid-auto-columns with CSS variables in Tailwind CSS ### ./references/docs-grid-auto-flow.md - Basic grid-auto-flow Example - Tailwind HTML - Responsive grid-auto-flow Design - Tailwind HTML ### ./references/docs-grid-auto-rows.md - Implement responsive `grid-auto-rows` with Tailwind CSS breakpoints - Apply basic `grid-auto-rows` utilities in Tailwind CSS ### ./references/docs-grid-column.md - Control Grid Column Start/End with Tailwind CSS `col-start`/`col-end` - Implement Responsive Grid Column Spanning with Tailwind CSS Breakpoints - Span Columns with Tailwind CSS `col-span-<number>` ### ./references/docs-grid-row.md