Docs Hub

TailwindCSSدرحال بازسازی

React

راه های ارتباطی با ما

Docs Hub

Tailwind CSS

Accent Color Adding Custom Styles Align Content Align Items Align Self Animation Appearance Aspect Ratio Backdrop Filter Backdrop Filter Blur Backdrop Filter Brightness Backdrop Filter Contrast Backdrop Filter Grayscale Backdrop Filter Hue Rotate Backdrop Filter Invert Backdrop Filter Opacity Backdrop Filter Saturate Backdrop Filter Sepia Backface Visibility Background Attachment Background Blend Mode Background Clip Background Color Background Image Background Origin Background Position Background Repeat Background Size Block Size Border Collapse Border Color Border Radius Border Spacing Border Style Border Width Box Decoration Break Box Shadow Box Sizing Break After Break Before Break Inside Caption Side Caret Color Clear Color Color Scheme Colors Columns Compatibility Content Cursor Dark Mode Detecting Classes In Source Files Display Editor Setup Field Sizing Fill Filter Filter Blur Filter Brightness Filter Contrast Filter Drop Shadow Filter Grayscale Filter Hue Rotate Filter Invert Filter Saturate Filter Sepia Flex Flex Basis Flex Direction Flex Grow Flex Shrink Flex Wrap Float Font Family Font Feature Settings Font Size Font Smoothing Font Stretch Font Style Font Variant Numeric Font Weight Forced Color Adjust Functions And Directives Gap Grid Auto Columns Grid Auto Flow Grid Auto Rows Grid Column Grid Row Grid Template Columns Grid Template Rows Height Hover Focus And Other States Hyphens Inline Size Isolation Justify Content Justify Items Justify Self Letter Spacing Line Clamp Line Height List Style Image List Style Position List Style Type Margin Mask Clip Mask Composite Mask Image Mask Mode Mask Origin Mask Position Mask Repeat Mask Size Mask Type Max Block Size Max Height Max Inline Size Max Width Min Block Size Min Height Min Inline Size Min Width Mix Blend Mode Object Fit Object Position Opacity Order Outline Color Outline Offset Outline Style Outline Width Overflow Overflow Wrap Overscroll Behavior Padding Perspective Perspective Origin Place Content Place Items Place Self Pointer Events Position Preflight Resize Responsive Design Rotate Scale Scroll Behavior Scroll Margin Scroll Padding Scroll Snap Align Scroll Snap Stop Scroll Snap Type Skew Stroke Stroke Width Styling With Utility Classes Table Layout Text Align Text Decoration Color Text Decoration Line Text Decoration Style Text Decoration Thickness Text Indent Text Overflow Text Shadow Text Transform Text Underline Offset Text Wrap Theme Top Right Bottom Left Touch Action Transform Transform Origin Transform Style Transition Behavior Transition Delay Transition Duration Transition Property Transition Timing Function Translate Upgrade Guide User Select Vertical Align Visibility White Space Width Will Change Word Break Z Index

gap

Utilities for controlling gutters between grid and flexbox items.

Examples

Basic example

Use gap-<number> utilities like gap-2 and gap-4 to change the gap between both rows and columns in grid and flexbox layouts:

Changing row and column gaps independently

Use gap-x-<number> or gap-y-<number> utilities like gap-x-8 and gap-y-4 to change the gap between columns and rows independently:

Using a custom value

Responsive design