Tailwind CSS: Build an Image Gallery App with IPFS and Tailwind CSS
Learn how to build an image gallery app with IPFS and Tailwind CSS.
Tailwind CSS is a utility-first CSS framework made for diverse yet simple website styling techniques.
Read below to learn how to build an image gallery app with IPFS and Tailwind CSS.
- Have an IDE or text editor for making changes to snippets of code.
Start by creating a Remix app by using the following command:
This command will ask you a series of questions. Here’s how we answered them:

- Where would you like to create your app? We chose ./image-gallery-dapp, but you can name your app anything and have it stored in any directory you’d like.
- What type of app do you want to create? Just the basics
- Where do you want to deploy? Remix App Server
- TypeScript or JavaScript? TypeScript
- Do you want me to run 'npm install'? y
cd image-gallery-dapp
npm install --save-dev concurrently tailwindcss
npx tailwindcss init
This will create a new file called
tailwind.config.js
. Open this file in a text editor and enter the following content:module.exports = {
mode: "jit",
purge: ["./app/**/*.{ts,tsx}"],
content: [],
theme: {
extend: {},
},
plugins: [],
};
"scripts": {
"build": "npm run build:css && remix build",
"build:css": "tailwindcss -o ./app/tailwind.css",
"dev": "concurrently \\"npm run dev:css\\" \\"remix dev\\"",
"dev:css": "tailwindcss -o ./app/tailwind.css --watch",
"postinstall": "remix setup node",
"start": "remix-serve build"
},
import tailwindCSS from "./tailwind.css";
export const links: LinksFunction = () => {
return [{ rel: "stylesheet", href: tailwindCSS }];
};
npm run dev
Your app will be running at
localhost:3000
. By default, it’ll look like this:
First, we need some images. To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.
Select ‘Create Bucket’ in the top right corner to create a new bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.


Once uploaded, it will be listed in the bucket.

Choose the method you prefer, and take note of the IPFS CID.

export default function gallery() {
return (
<body>
<center>
<div>
<a target="_blank" href="Filebase_Networks_Icon"> </a>
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Networks Icon" width="400" height="400"></img>
<div class="desc">Filebase supports the IPFS, Sia, Skynet, and Storj Networks</div>
</div>
<div>
<a target="_blank" href="Filebase_Icon"> </a>
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Icon" width="400" height="400"></img>
<div class="desc">The Filebase Logo</div>
</div>
<div>
<a target="_blank" href="Filebase_Robot"> </a>
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Robot" width="400" height="400"></img>
<div class="desc">The Filebase Robot</div>
</div>
</center>
</body>
);
}
Replace the
IPFS_CID
values with your IPFS CID’s from the images you uploaded to Filebase.You can edit the size of each image by changing the
width
and height
values.You can also change the names and descriptions of each image by changing the
desc
values and the alt
/ href
values.From here, you can style your gallery however you’d like, using the Tailwind CSS package. For more information about Tailwind CSS and the customization options, see their documentation here.
If you have any questions, please join our Discord server, or send us an email at [email protected]
Last modified 8mo ago