How to create an image gallery using Tailwind CSS

Beginner’s tutorial on how to start using Tailwind CSS

5 min readMay 3, 2023

If you’re just getting started or know nothing about Tailwind CSS, this is for you. After reading this and following along, you will understand how Tailwind CSS works. You will learn how to design stunning applications without writing plain CSS code.

Here we go! If you’re ready, let’s get started!

If you have never used Tailwind CSS before, your first question may be, “What is Tailwind CSS, and why do we use it?”

So, Tailwind CSS is a framework that provides low-level utility classes that enable you to create fully customized designs without ever leaving your HTML.

Installation

To continue working on it, you need to set up Tailwind CSS on your computer. Do not worry, I will show you how to do that; it is really simple. You can install Tailwind CSS using npm, yarn, or any other package manager.

OpeTo install with npm, copy and paste the following command into your terminal and press the Enter key:

npm install -D tailwindcss

To install with yarn, run the following command:

yarn add tailwindcss

It will install Tailwind CSS in your project’s root directory.

After that, copy and paste the following code into your terminal and press Enter again.

npx tailwindcss init

This will create a tailwind.config.js file in your project's root directory. You can customize the configuration as per your requirements.

Configuration

Add the code below to your tailwind.config.js file to configure the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importing CSS

Add the following code tailwind directives to your main CSS file.

@import 'tailwindcss/base'; 
@import 'tailwindcss/components'; 
@import 'tailwindcss/utilities';

Start the build process

Run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css — watch

Use Tailwind in your HTML

Tailwind CSS provides a lot of utility classes that can be used to apply styles to your HTML elements.

For example:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-8 px-16 m-10 rounded-full">
Click me
</button>
</body>
</html>

In the example above, the text-white class sets the text color to white, the font-bold class sets the font weight to bold, the py-8 and px-16 classes set the padding to 8 and 16 respectively, the m-10 class adds a margin of 10, and the unded-full class adds rounded corners to the button. The hover:bg-blue-700 class changes the background color to a darker blue on hover.

See the outcome of the code above in the example button below.

What you will see in the browser:

Tailwind CSS Image Gallery

Let’s use Tailwind CSS to build a simple photo gallery application. In this tutorial, you will learn to create a simple six-image photo gallery 3 images in the first row and 3 in the second row. You can easily modify the code to include extra rows and images and create your very own unique and beautiful image gallery. I also added a small hover animation to give it a more elegant appearance.

HTML

When you use Tailwind CSS in your projects, your HTML will look like this. At first, Tailwind CSS may seem overwhelming, but as you get more comfortable with it, you’ll find that it makes your life 10x faster than writing plain CSS.

Also, if CSS is your area of expertise, picking up Tailwind CSS will be a piece of cake for you. For this reason, you should learn CSS before using its frameworks, such as Tailwind CSS or Bootstrap. Learn the language first, then explore its frameworks — this concept applies to all languages, not only CSS.

The code below is not rocket science; it is just simple HTML and Tailwind CSS classes used in the code below to style your HTML components. Add this code to your index.html file by copying and pasting.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="bg-gray-100 h-screen">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-3 gap-4 mt-10">
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
        <div class="bg-cover" style="background-image: url(image-url)">
        </div>
      </div>
    </div>
  </body>
  </body>
</html>

CSS

In the CSS file, first you need to import the Tailwind CSS if you are working in the Codepen editor. On a local machine, you don’t have to do this; just follow the above-mentioned steps to install and configure it, and you will be good to go. Just copy and paste the code into your respective files and run the application.

In this example, the container class sets a maximum width for the container and centers it horizontally, the grid class sets up a grid with 3 columns, and the gap-4 class sets a gap of 4 units between each column. The bg-cover class sets the background image to cover the entire element, and the bg-gray-100 class sets the background color to light gray. The h-screen class sets the height of the body to the full-screen height.

@import url('https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css');

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;


.bg-gray-100 {
  background-color: #f7fafc;
}

.h-screen {
  height: 100vh;
}

.container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

.mt-10 {
  margin-top: 2.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  justify-items: center;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 200px;
  width: 100%;
  cursor: pointer;
}
.bg-cover:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

What you will get

CodePen:

That’s it! With these steps, you will have a basic understanding of how to use Tailwind CSS in your projects. You can learn more about Tailwind CSS and its features from the Official Documentation. Don’t forget to mention me on Twitter when you build your beautiful image gallery using Tailwind CSS. Also, follow me for more content and subscribe to my newsletter to read the posts directly in your email, so you don’t have to open the browser to read.

Happy building :)