Submitted 18 days ago

Chat-app-css-illustration

tailwind-css, typescript, next

Abraham Ortega•620

@AbrahamOrtega

A solution to the Chat app CSS illustration challenge

Preview Code

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Thomas TS•1,520

@ttsoares

Posted 17 days ago

Greetings. A good-looking solution...

Only seems strange your structure of files and folders. The usual is something like this:

.
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── public
├── README.md
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
└── tsconfig.json

Anyhow, the page is not using the font family Rubik.

Typically the layout.tsx has:

import { Geist } from "next/font/google";
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
...
...
 return (
    <html lang="en">
      <body
        className={`${geistSans.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );

That will apply the Geist font to a Next project.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord