Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Tailwind CSS Tutorial
  • Tailwind Interview Questions
  • Tailwind Layout
  • Tailwind Flexbox
  • Tailwind Grid
  • Tailwind Alignment
  • Tailwind Spacing
  • Tailwind Sizing
  • Tailwind Typography
  • Tailwind Backgrounds
  • Tailwind Borders
  • Tailwind Effects
  • Tailwind Filters
  • Tailwind Tables
  • Tailwind Transitions and Animation
  • Tailwind Transforms
  • Tailwind Interactivity
  • CSS Frameworks
  • Web Technology
Open In App
Next Article:
Tailwind CSS Flexbox Complete Reference
Next article icon

Tailwind CSS Layout Complete Reference

Last Updated : 18 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Tailwind CSS is a utility-first CSS framework for rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. We can make the layout of a very quickly nice page using Tailwind CSS layout.

Tailwind CSS Class

Description

ContainerIt fix the max-width of an element to match the min-width of the breakpoint.
Box SizingIt defines how the user should calculate the total width and height of an element.
DisplayIt defines how the components (div, hyperlink, heading, etc) are going to be placed on the web page.
FloatIt defines the flow of content for controlling the wrapping of content around an element.
ClearIt is used to specify which side of floating elements are not allowed to float.
Object FitIt specifies how an image or video should be resized to fit its content box.
Object PositionIt specifies how an image or video element is positioned with x/y coordinates.
OverflowIt tells whether to clip content or to add scroll bars.
overscroll BehaviorIt sets the behavior of the browser when the boundary of a scrolling area is reached.
PositionIt is used for controlling how an element is positioned in the DOM.
Top/Right/Bottom/LeftThese classes are used to control the alignment of a positioned element.
VisibilityIt is used to specify whether an element is visible or not.
Z-indexIt describes the z-index along the three-dimensional plane.

Below example will give you a brief idea about the Layout of Tailwind CSS:

Example:

HTML 
<!DOCTYPE html> <html>  <head>     <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"          rel="stylesheet"> </head>  <body class="text-center">     <h1 class="text-green-600 text-5xl font-bold">         GeeksforGeeks     </h1>     <b>Tailwind CSS float Class</b>     <div class="mx-10">         <img class="float-right p-2" src=     "https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">          <p class="text-justify ">             How many times were you frustrated while looking out             for a good collection of programming/algorithm/interview             questions? What did you expect and what did you get?             This portal has been created to provide well written,             well thought and well explained solutions for selected             questions. An IIT Roorkee alumnus and founder of             GeeksforGeeks. He loves to solve programming problems             in most efficient ways. Apart from GeeksforGeeks, he             has worked with DE Shaw and Co. as a software developer             and JIIT Noida as an assistant professor.It is a good             platform to learn programming. It is an educational             website. Prepare for the Recruitment drive of product             based companies like Microsoft, Amazon, Adobe etc with             a free online placement preparation course.         </p>     </div> </body>  </html>

Output:

Tailwind CSS Layout

Tailwind CSS Layout 


Next Article
Tailwind CSS Flexbox Complete Reference
author
kartik
Improve
Article Tags :
  • CSS
  • Tailwind CSS
  • Web Technologies

Similar Reads

  • Tailwind CSS Layout Complete Reference
    Tailwind CSS is a utility-first CSS framework for rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the proje
    3 min read
  • Tailwind CSS Flexbox Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in Tailwind CSS all the properties are covered as in class form. we had a
    2 min read
  • Tailwind CSS Grid Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Grid describes the number of properties that allow to design of the grid structure of the grid and control the placement of the grid. Tailwind CSS Class Description G
    2 min read
  • Tailwind CSS Alignment Complete Reference
    Tailwind CSS is basically a utility first CSS framework for rapid custom UI. Tailwind CSS Alignment controls how the flex and grid items are aligned along with the container for fast front-end development. suppose Tailwind CSS Justify Content controlling how flex and grid items are positioned along
    2 min read
  • Tailwind CSS Spacing Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Spacing utilities manage and control the elements of padding, element's margin, and space between child elements. Tailwind CSS Class Description PaddingIt creates spa
    1 min read
  • Tailwind CSS Sizing Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Sizing that set the size of elements like setting element width, height, min-max width, and min-max height. Tailwind CSS Class Description WidthIt sets the width of t
    1 min read
  • Tailwind CSS Typography Complete Reference
    Tailwind is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Typography, In which all style, properties, and spacing are covered in this class. For ex. Font family has multiple fonts as backups, font size has set the font size of t
    2 min read
  • Tailwind CSS Backgrounds Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Background, In which all the properties are covered in this class. it is controlling the background portion of the page like a background Image that can set one or mo
    2 min read
  • Tailwind CSS Borders Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Border utility settings the radius, width, color, opacity, etc., of element's borders. all the properties covered as in this class form. Tailwind CSS Class Descriptio
    2 min read
  • Tailwind CSS Effects Complete Reference
    Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Effects control the effects on elements. that provide classes to apply effects on elements like box-shadow, opacity/transparency. Tailwind CSS Class Description Box S
    1 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences