Search⌘ K
Home
Courses
An Introduction to Developing Web3 Apps Using Solidity and React

Styling the App

Explore how to style your Web3 app frontend by integrating Tailwind CSS within a Next.js project. Learn to configure Tailwind, apply responsive and hover styles, and enhance form inputs using the @tailwindcss/forms plugin. This lesson guides you in creating a polished user interface for decentralized applications.

We'll cover the following...

Updating the frontend

It’s an excellent time to start styling the app because we have some HTML elements visible on the page. We’ll describe how to do that in this lesson. We’ll be using Tailwind in our Next.js project. The Tailwind installation instructions can be found in the Appendix.

After the installation, we’ll update the tailwind.config.js file to point to the paths where we’ll be writing application styles.

Node.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    ],
  theme: {
    extend: {},
  },
  plugins: [],
  };

We’ll then replace the contents of the ./styles/global.css file with @tailwind directives.

NAME_
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
...