
- Tailwind CSS - Home
- Tailwind CSS - Roadmap
- Tailwind CSS - Introduction
- Tailwind CSS - Installation
- Tailwind CSS - Editor Setup
- Tailwind CSS - Utility-First Fundamentals
- Tailwind CSS - Hover, Focus, and Other States
- Tailwind CSS - Responsive Design
- Tailwind CSS - Dark Mode
- Tailwind CSS - Reusing Styles
- Tailwind CSS - Adding Custom Styles
- Tailwind CSS - Functions & Directives
- Tailwind CSS - Customization
- Tailwind CSS - Configuration
- Tailwind CSS - Content Configuration
- Tailwind CSS - Theme Configuration
- Tailwind CSS - Customizing Screens
- Tailwind CSS - Customizing Colors
- Tailwind CSS - Customizing Spacing
- Tailwind CSS - Plugins
- Tailwind CSS - Presets
- Tailwind CSS - Base Styles
- Tailwind CSS - Preflight
- Tailwind CSS - Layout
- Tailwind CSS - Aspect Ratio
- Tailwind CSS - Container
- Tailwind CSS - Columns
- Tailwind CSS - Break After
- Tailwind CSS - Break Before
- Tailwind CSS - Break Inside
- Tailwind CSS - Box Decoration Break
- Tailwind CSS - Box Sizing
- Tailwind CSS - Display
- Tailwind CSS - Floats
- Tailwind CSS - Clear
- Tailwind CSS - Isolation
- Tailwind CSS - Object Fit
- Tailwind CSS - Object Position
- Tailwind CSS - Overflow
- Tailwind CSS - Overscroll Behavior
- Tailwind CSS - Position
- Tailwind CSS - Top / Right / Bottom / Left
- Tailwind CSS - Visibility
- Tailwind CSS - Z-Index
- Tailwind CSS - Flexbox & Grid
- Tailwind CSS - Flex Basis
- Tailwind CSS - Flex Direction
- Tailwind CSS - Flex Wrap
- Tailwind CSS - Flex
- Tailwind CSS - Flex Grow
- Tailwind CSS - Flex Shrink
- Tailwind CSS - Order
- Tailwind CSS - Grid Template Columns
- Tailwind CSS - Grid Column Start / End
- Tailwind CSS - Grid Template Rows
- Tailwind CSS - Grid Row Start / End
- Tailwind CSS - Grid Auto Flow
- Tailwind CSS - Grid Auto Columns
- Tailwind CSS - Grid Auto Rows
- Tailwind CSS - Gap
- Tailwind CSS - Justify Content
- Tailwind CSS - Justify Items
- Tailwind CSS - Justify Self
- Tailwind CSS - Align Content
- Tailwind CSS - Align Items
- Tailwind CSS - Align Self
- Tailwind CSS - Place Content
- Tailwind CSS - Place Items
- Tailwind CSS - Place Self
- Tailwind CSS - Spacing
- Tailwind CSS - Padding
- Tailwind CSS - Margin
- Tailwind CSS - Space Between
- Tailwind CSS - Sizing
- Tailwind CSS - Width
- Tailwind CSS - Min-Width
- Tailwind CSS - Max-Width
- Tailwind CSS - Height
- Tailwind CSS - Min-Height
- Tailwind CSS - Max-Height
- Tailwind CSS - Size
- Tailwind CSS - Typography
- Tailwind CSS - Font Family
- Tailwind CSS - Font Size
- Tailwind CSS - Font Smoothing
- Tailwind CSS - Font Style
- Tailwind CSS - Font Weight
- Tailwind CSS - Font Variant Numeric
- Tailwind CSS - Letter Spacing
- Tailwind CSS - Line Clamp
- Tailwind CSS - Line Height
- Tailwind CSS - List Style Image
- Tailwind CSS - List Style Position
- Tailwind CSS - List Style Type
- Tailwind CSS - Text Align
- Tailwind CSS - Text Color
- Tailwind CSS - Text Decoration
- Tailwind CSS - Text Decoration Color
- Tailwind CSS - Text Decoration Style
- Tailwind CSS - Text Decoration Thickness
- Tailwind CSS - Text Underline Offset
- Tailwind CSS - Text Transform
- Tailwind CSS - Text Overflow
- Tailwind CSS - Text Wrap
- Tailwind CSS - Text Indent
- Tailwind CSS - Vertical Align
- Tailwind CSS - Whitespace
- Tailwind CSS - Word Break
- Tailwind CSS - Hyphens
- Tailwind CSS - Content
- Tailwind CSS - Backgrounds
- Tailwind CSS - Background Attachment
- Tailwind CSS - Background Clip
- Tailwind CSS - Background Color
- Tailwind CSS - Background Origin
- Tailwind CSS - Background Position
- Tailwind CSS - Background Repeat
- Tailwind CSS - Background Size
- Tailwind CSS - Background Image
- Tailwind CSS - Gradient Color Stops
- Tailwind CSS - Borders
- Tailwind CSS - Border Radius
- Tailwind CSS - Border Width
- Tailwind CSS - Border Color
- Tailwind CSS - Border Style
- Tailwind CSS - Divide Width
- Tailwind CSS - Divide Color
- Tailwind CSS - Divide Style
- Tailwind CSS - Outline Width
- Tailwind CSS - Outline Color
- Tailwind CSS - Outline Style
- Tailwind CSS - Outline Offset
- Tailwind CSS - Ring Width
- Tailwind CSS - Ring Color
- Tailwind CSS - Ring Offset Width
- Tailwind CSS - Ring Offset Color
- Tailwind CSS - Effects
- Tailwind CSS - Box Shadow
- Tailwind CSS - Box Shadow Color
- Tailwind CSS - Opacity
- Tailwind CSS - Mix Blend Mode
- Tailwind CSS - Background Blend Mode
- Tailwind CSS - Filters
- Tailwind CSS - Blur
- Tailwind CSS - Brightness
- Tailwind CSS - Contrast
- Tailwind CSS - Drop Shadow
- Tailwind CSS - Grayscale
- Tailwind CSS - Hue Rotate
- Tailwind CSS - Invert
- Tailwind CSS - Saturate
- Tailwind CSS - Sepia
- Tailwind CSS - Backdrop Blur
- Tailwind CSS - Backdrop Brightness
- Tailwind CSS - Backdrop Contrast
- Tailwind CSS - Backdrop Grayscale
- Tailwind CSS - Backdrop Hue Rotate
- Tailwind CSS - Backdrop Invert
- Tailwind CSS - Backdrop Opacity
- Tailwind CSS - Backdrop Saturate
- Tailwind CSS - Backdrop Sepia
- Tailwind CSS - Tables
- Tailwind CSS - Border Collapse
- Tailwind CSS - Border Spacing
- Tailwind CSS - Table Layout
- Tailwind CSS - Caption Side
- Tailwind CSS - Transitions & Animation
- Tailwind CSS - Transition Property
- Tailwind CSS - Transition Duration
- Tailwind CSS - Transition Timing Function
- Tailwind CSS - Transition Delay
- Tailwind CSS - Animation
- Tailwind CSS - Transform
- Tailwind CSS - Scale
- Tailwind CSS - Rotate
- Tailwind CSS - Translate
- Tailwind CSS - Skew
- Tailwind CSS - Transform Origin
- Tailwind CSS - Interactivity
- Tailwind CSS - Accent Color
- Tailwind CSS - Appearance
- Tailwind CSS - Cursor
- Tailwind CSS - Caret Color
- Tailwind CSS - Pointer Events
- Tailwind CSS - Resize
- Tailwind CSS - Scroll Behavior
- Tailwind CSS - Scroll Margin
- Tailwind CSS - Scroll Padding
- Tailwind CSS - Scroll Snap Align
- Tailwind CSS - Scroll Snap Stop
- Tailwind CSS - Scroll Snap Type
- Tailwind CSS - Touch Action
- Tailwind CSS - User Select
- Tailwind CSS - Will Change
- Tailwind CSS - SVG
- Tailwind CSS - Fill
- Tailwind CSS - Stroke
- Tailwind CSS - Stroke Width
- Tailwind CSS - Accessibility
- Tailwind CSS - Screen Readers
- Tailwind CSS - Forced Color Adjust
- Tailwind CSS - Bonus
- Tailwind CSS - Using with Preprocessors
- Tailwind CSS - Optimizing for Production
- Tailwind CSS - References
- Tailwind CSS - Core Concepts
- Tailwind CSS - Customization
- Tailwind CSS - Layout
- Tailwind CSS - Flexbox & Grid
- Tailwind CSS - Spacing
- Tailwind CSS - Sizing
- Tailwind CSS - Typography
- Tailwind CSS - Backgrounds
- Tailwind CSS - Borders
- Tailwind CSS - Effects
- Tailwind CSS - Filters
- Tailwind CSS - Tables
- Tailwind CSS - Transitions & Animation
- Tailwind CSS - Transforms
- Tailwind CSS - Interactivity
- Tailwind CSS - Resources
- Tailwind CSS - Discussion
- Tailwind CSS - Useful Resources
Tailwind CSS - Flexbox & Grid
Tailwind CSS Flexbox and Grid is a layout module that efficiently aligns items within a flex or grid container. It consists of a list of utility classes that enable the effective construction of flex and grid containers such as flex-basis, flex grow, flex shrink, grid-template-columns,grid-auto-rows, gap, and many more..
Tailwind CSS Flexbox & Grid Reference
Below mentioned topics can be used to create an effective Layout on elements.
Topic | Description | Example |
---|---|---|
Tailwind CSS - Flex Basis | Flex Basis is used to define the initial size of flex items. | |
Tailwind CSS - Flex Direction | Flex Direction is used to set the direction of flex items within a flex container. | |
Tailwind CSS - Flex Wrap | Flex Wrap utility controls whether flex items wrap to a new line or not. | |
Tailwind CSS - Flex | Flex class specifies how flex items both grow and shrink within a flex container. | |
Tailwind CSS - Flex Grow | Flex Grow class specifies how flex items grow within a flex container. | |
Tailwind CSS - Flex Shrink | Flex Shrink class specifies how flex items shrink within a flex container. | |
Tailwind CSS - Order | Order Class specifies the order of flex and grid items within its container. | |
Tailwind CSS - Grid Template Columns | Grid Template Columns class specifies the number and size of columns in a grid layout. | |
Tailwind CSS - Grid Column Start/End | Grid Column Start/End class specifies the arrangement and size of columns across grid columns | |
Tailwind CSS - Grid Template Row | Grid Template Row specifies the number and size of rows in a grid layout. | |
Tailwind CSS - Grid Row Start/End | Grid Row Start/End class specifies the arrangement and size of rows across grid rows | |
Tailwind CSS - Grid Auto Flow | Grid Auto Flow class specifies the automatic alignment of an element in a grid layout. | |
Tailwind CSS - Grid Auto Columns | grid auto columns class specifies the size of grid columns that are created implicitly. | |
Tailwind CSS - Grid Auto Rows | Grid Auto Rows specifies the size of grid rows that are created implicitly. | |
Tailwind CSS - Gap | Gap class is used to add space between grid and flex items. | |
Tailwind CSS - Justify Content | Justify Content is used to align flex and grid items along the main axis or horizontal plane. | |
Tailwind CSS - Justify Items | Justify Items is used to align grid items along their inline axis or horizontal alignment of grid items within their grid cells. | |
Tailwind CSS - Justify Self | Justify self class is used to align individual grid items along its inline axis. | |
Tailwind CSS - Align Content | Align Content is used to positioned rows in a multi-row flex container and grid container along the cross axis. | |
Tailwind CSS - Align Items | Align Items is used to position flex and grid items along the containers cross-axis. | |
Tailwind CSS - Align Self | Align Self is used to align individual grid and flex items along its container's cross axis. | |
Tailwind CSS - Place Content | Place content class is used to justify and align content simultaneously | |
Tailwind CSS - Place Items | Place Items class is used to justify and align items simultaneously | |
Tailwind CSS - Place Self | Place self class is used to justify and align individual items simultaneously |
Example of Tailwind CSS Flexbox
In the following example we will cover some of the above mentioned Flexbox classes
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> </head> <body class="p-8"> <h2 class="text-2xl font-bold mb-2"> Tailwind CSS Flexbox Classes </h2> <p class="mb-2"> The following example is illustrating the combine use of Flex, Flex-wrap, Gap, and Order classes. </p> <div class="flex flex-wrap gap-2 mb-4"> <div class="bg-red-500 p-4 w-32 h-28 order-5">Item 1</div> <div class="bg-blue-500 p-4 w-32 h-28 order-4">Item 2</div> <div class="bg-green-500 p-4 w-32 h-28 order-3">Item 3</div> <div class="bg-yellow-500 p-4 w-32 h-28 order-2">Item 4</div> <div class="bg-orange-500 p-4 w-32 h-28 order-1">Item 5</div> </div> </body> </html>
Example of Tailwind CSS Grid
In the following example we will cover some of the above mentioned Grid classes
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8"> <h2 class="text-2xl font-bold mb-2"> Tailwind CSS Grid Classes </h2> <p class="mb-2"> The following example is illustrating the combine use of Grid, Grid-template-column, Gap, and Place-items classes. </p> <div class="grid grid-cols-3 gap-2 p-1 h-44"> <div class="border-2 border-green-500 p-1 grid place-items-start bg-green-300"> <div class="bg-orange-500 p-4"> Item 1 </div> </div> <div class="border-2 border-green-500 p-1 grid place-items-start bg-green-300"> <div class="bg-blue-500 p-4"> Item 2 </div> </div> <div class="border-2 border-green-500 p-1 grid place-items-start bg-green-300"> <div class="bg-pink-500 p-4"> Item 3 </div> </div> </div> </body> </html>