Let's build 3 essential website layouts using Tailwind CSS. 1.Pancake, 2.Sidebar and 3.Pancake with double sidebars.

#tailwindcss #css #webdev #tutorial

Hello everyone!😀 In this mini-article let's learn to build 3 essential website layouts using Tailwind CSS which are,

Pancake Layout
Sidebar Layout
Pancake layout with double sidebars

1. Pancake Layout

<div class="parent h-screen bg-gray-400 flex flex-col text-center">
      <header class="bg-red-400 p-4">Header</header>
      <main class="bg-green-400 flex-1">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi numquam rerum, perspiciatis atque cumque dolore quod repudiandae neque facilis voluptatibus incidunt laudantium accusantium tempora doloribus a, consectetur repellendus vero quisquam omnis alias. Molestias necessitatibus accusamus nam numquam perferendis tempora nobis dicta dolor porro non voluptatem esse quia animi sit obcaecati, placeat nulla omnis recusandae magnam natus debitis voluptatum. Eveniet aliquam quis totam quia quod quidem ullam dicta expedita illum enim sit dolor dolorum veritatis dolore reprehenderit, repellendus incidunt similique maiores est? Odio, ipsam possimus? Quasi maxime impedit sit sed quam officia tempore, corporis asperiores cum minus fuga exercitationem dolores ipsam possimus saepe, provident nostrum corrupti sapiente alias eos a nam nihil ullam. Consequatur, beatae illo sunt atque ipsam tenetur et, laudantium architecto dolorem velit blanditiis magnam incidunt possimus impedit ad cupiditate laborum voluptates reprehenderit quasi ducimus ut quas accusantium. Dolores, incidunt consequatur atque consectetur aperiam saepe soluta rerum repellat?
      </main>
      <footer class="bg-blue-400 p-4">Footer</footer>
</div>

So, there are 4 elements here i.e. a parent container, the header, the main content with some lorem ipsum text, and the footer. Now let's see what all the Tailwind CSS classes do for each element.

1. Parent container classes.

h-screen: this class gives the parent height of 100vh
bg-gray-400: this class gives it a background color of gray
flex: for adding display:flex
flex-col: adds flex-direction:column on the parent
text-center: adds text-align:center

2. Header classes.

bg-red-400: gives background color of red
p-4: adds padding on the header

3. Main section classes.

bg-green-400: gives background color of green
flex-1(most imp class): adds flex-1 on the main section so it takes the maximum space of the viewport.

4. Footer classes.

bg-blue-400: gives background color of blue
p-4: adds padding on the footer

Codepen link : Pancake Layout codepen

2. Sidebar Layout

For this layout, we are adding the 'md' prefix to most of our classes so the sidebar only shows on devices with width more than 768px.

<div class="parent md:h-screen md:grid md:grid-cols-6">
      <section class="sidebar bg-green-400 md:col-span-1">Sidebar</section>
      <main class="main bg-blue-400 md:col-span-5">Main</main>
</div>

So, there are 3 elements here i.e. a parent container, the sidebar, and the main content section. Now let's see what all the Tailwind CSS classes do for each element.

1. Parent container classes.

md:h-screen: this class gives the parent height of 100vh
md:grid: adds display:grid on the parent container.
md:grid-cols-6: adds grid-template-columns: repeat(6, minmax(0, 1fr)) on the parent container.

2. Sidebar classes.

bg-green-400: gives background color of green
md:col-span-1: adds grid-column: span 1 / span 1 on the sidebar so it spans across 1 column of the grid

3. Main content section classes.

bg-blue-400: gives background color of blue
md:col-span-5: adds grid-column: span 5 / span 5 on the main section so it spans across 5 columns of the grid.

Codepen link : Sidebar Layout codepen

3. Pancake layout with double sidebar.

So, for this layout, we are going to basically combine the previous 2 layouts so I am not going to explain all these classes again (they all are the same as the previous 2 layouts😅)

<div class="parent text-center flex flex-col h-screen">
      <header class="bg-green-400 p-4">Header</header>
      <main class="bg-gray-400 flex-1 flex">
          <div class="sidebar-1 bg-yellow-400 p-4">Sidebar 1</div>
          <div class="content flex-1">Content</div>
          <div class="sidebar-2 bg-yellow-400 p-4">Sidebar 2</div>
      </main> 
      <footer class="bg-blue-400 p-4">Footer</footer>
</div>