Knowledge Base
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.
What is 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.
Prerequisites:
- Have an IDE or text editor for making changes to snippets of code.
- Have a Filebase account. If you don’t have one yet,
1. For this tutorial we’ll be using Remix, a Javascript framework, to serve the webpage of our image gallery.
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
2. Navigate into your new app directory:
cd image-gallery-dapp3. Next, we’ll install Tailwind to be used with styling our app’s CSS:
npm install --save-dev concurrently tailwindcss4. Then initialize your Tailwind package:
npx tailwindcss initThis will create a new file called
tailwind.config.js. Open this file in a text editor and enter the following content:1
module.exports = {
2
mode: "jit",
3
purge: ["./app/**/*.{ts,tsx}"],
4
content: [],
5
theme: {
6
extend: {},
7
},
8
plugins: [],
9
};
Copied!
5. Next, open the package.json file and in the scripts section, replace the content with the following:
package.json file and in the scripts section, replace the content with the following:1
"scripts": {
2
"build": "npm run build:css && remix build",
3
"build:css": "tailwindcss -o ./app/tailwind.css",
4
"dev": "concurrently \\"npm run dev:css\\" \\"remix dev\\"",
5
"dev:css": "tailwindcss -o ./app/tailwind.css --watch",
6
"postinstall": "remix setup node",
7
"start": "remix-serve build"
8
},
Copied!
6. Open the app/root.tsx file. Insert the following line at the top of the file:
app/root.tsx file. Insert the following line at the top of the file:import tailwindCSS from "./tailwind.css";7. Then anywhere in the body of the app/root.tsx file, enter the following function lines:
app/root.tsx file, enter the following function lines:1
export const links: LinksFunction = () => {
2
return [{ rel: "stylesheet", href: tailwindCSS }];
3
};
Copied!
8. Now let’s get our app up and running. Use the command:
npm run devYour app will be running at
localhost:3000. By default, it’ll look like this:
9. Now let’s make it into our image gallery.
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.
11. Enter a bucket name and choose the IPFS storage network to create the bucket.
In this guide, we’re calling the bucket
filebase-IPFS.Typically, IPFS pinned files are stored on centralized cloud providers, like AWS. On Filebase, all files that are pinned onto IPFS are actually being stored on the Sia network. This creates an environment where the data storage layer for Filebase IPFS nodes is highly available, and most importantly, geo-redundant.
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.
12. Next, select the bucket from your list of buckets, then select ‘Upload’ in the top right corner to upload an image file.
13. Select an image to be uploaded.
Once uploaded, it will be listed in the bucket.
14. You can view the object’s IPFS CID in the CID column, or you can click on your uploaded object to display the metadata for the object, which includes the IPFS CID.
Choose the method you prefer, and take note of the IPFS CID.
15. Upload as many images as you’d like to use for your Image Gallery and take note of the CID for each one.
16. Now, let’s open the file in the app/routes directory called index.tsx. In this file, insert the following code:
index.tsx. In this file, insert the following code:1
export default function gallery() {
2
return (
3
<body>
4
<center>
5
<div>
6
<a target="_blank" href="Filebase_Networks_Icon"> </a>
7
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Networks Icon" width="400" height="400"></img>
8
<div class="desc">Filebase supports the IPFS, Sia, Skynet, and Storj Networks</div>
9
</div>
10
​
11
<div>
12
<a target="_blank" href="Filebase_Icon"> </a>
13
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Icon" width="400" height="400"></img>
14
<div class="desc">The Filebase Logo</div>
15
</div>
16
​
17
<div>
18
<a target="_blank" href="Filebase_Robot"> </a>
19
<img src="https://ipfs.filebase.io/ipfs/IPFS_CID" alt="Filebase Robot" width="400" height="400"></img>
20
<div class="desc">The Filebase Robot</div>
21
</div>
22
​
23
</center>
24
​
25
</body>
26
);
27
}
Copied!
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.Here’s what ours looks like:
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 1mo ago
Copy link
Contents
What is Tailwind CSS?
1. For this tutorial we’ll be using Remix, a Javascript framework, to serve the webpage of our image gallery.
2. Navigate into your new app directory:
3. Next, we’ll install Tailwind to be used with styling our app’s CSS:
4. Then initialize your Tailwind package:
5. Next, open the package.json file and in the scripts section, replace the content with the following:
6. Open the app/root.tsx file. Insert the following line at the top of the file:
7. Then anywhere in the body of the app/root.tsx file, enter the following function lines:
8. Now let’s get our app up and running. Use the command:
9. Now let’s make it into our image gallery.
10. Select ‘Buckets’ from the left side bar menu, or navigate to console.filebase.com/buckets.
11. Enter a bucket name and choose the IPFS storage network to create the bucket.
12. Next, select the bucket from your list of buckets, then select ‘Upload’ in the top right corner to upload an image file.
13. Select an image to be uploaded.
14. You can view the object’s IPFS CID in the CID column, or you can click on your uploaded object to display the metadata for the object, which includes the IPFS CID.
15. Upload as many images as you’d like to use for your Image Gallery and take note of the CID for each one.
16. Now, let’s open the file in the app/routes directory called index.tsx. In this file, insert the following code: