Trouble installing Carbon Design System styles in Next.js 14 app

Question

I'm encountering issues while trying to install and apply the Carbon Design System styles to my Next.js 14 app. I've followed the documentation and attempted the following steps, but style seems not to be applied.

• yarn add @carbon/react
• import style in _app.tsx

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

• @use in globals.css

/* globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@use '@carbon/react';

• And then I import components in Home.tsx, but style seems not to be there.

import { Button, Form, TextInput } from "@carbon/react";

export default function Home() {
  return (
      <Form aria-label="Sign in">
        <div className="flex flex-col gap-1">
          <TextInput labelText="Username"/>
          <TextInput labelText="Password"/>
          <Button>Sign in</Button>
        </div>
      </Form>
  );
}

Despite these steps, style seems not to be applied. See screenshot

Node.js version: v18.17.0
npm. version: 9.6.7
next.js version: 14.0.3
Project structure: Pages Router

Question:
Should I use instead yarn add carbon-components?

UPDATE:
After converting globals.css. to globals.scss and replacing @use 'carbon-components-react'. to the top of the globals.scss carbon components started to highlight. Now the Problem is that by default it has no background and primary/blue background color is visible only on hover.
See screenshot.

Answer 1

The Problem was fixed after adding this carbon import in _app.tsx.

import "@/styles/globals.scss";
import '@carbon/react/index.scss';