TailwindCSS: Layout: display-class

After doing my article on TailwindCSS I said I would do some articles on the classes so this one is for the layout display class

• Covered in the display will be:

  • block, inline-block and inline
  • flex and inline-flex
  • grid and inline-grid
  • contents
  • table(and various utilities)
  • hidden

• Instead of having to write out your css: display: flex; its as easy as just adding flex to a class class="flex" in your HTML file.

• The display is Utilities for controlling the display box type of an element.

Classes and properties

block, inline-block and inline

• These classes control the flow of texts and elements.

class="block"

• using the property block will put the element on its own line and fill its parent.

class="inline-block"

• Using the property of inline-block the element will wrap to prevent the text inside from extending beyond its parent.

class="inline"

• When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.

flex

• Use flex to create a block-level flex container

<div class="flex items-center">
    <img ----- >
</div>

• This example will centre your container and centre your content inside the container.

inline-flex

• Used to create an inline flex container that flows with the text

<p>
today I wrote an article 
   <span class="inline-flex">
      <img ----- >
   </span>
all about tailwindCSS
</p>

• This will put your image in the flow of the text.

grid

• Use grid to create a grid container

<div class="grid gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>

• This example will give you a 3 column 3 row grid with a gap between each element.

• You can use:

class="inline-grid"

to create an inline grid-container.

contents

• Use contents to create a phantom container whose children act like direct children of the parent.

class="contents"

table

• this incudes the classes for table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group.

• These are the utilities you can use to create elements that behave like their respective table elements.

• eg.

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
--- more table rows with table cells.
</div>

hidden

• used to set an element to display:none; and remove it from the page layout.

eg.

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

• The number 1 box will be completely gone from the page and the number 2 box will take its place.

Final note

• You can use Tailwind to conditionally apply utility classes in different states, like to add inline-flex only when hovered over, and also for different breakpoints like only using inline-flex at medium screens and over. eg.

<div class="flex hover:inline-flex">
  <!-- ... -->
</div>

and:

<div class="flex md:inline-flex">
  <!-- ... -->
</div>

• As you have seen Tailwind has a fantastic range of layout options to make your project look great without much effort, and it can mainly be done from your HTML file just by adding in the classes. Thank you for reading I hope you find this article useful.