How to get the same css that we have for demo apis in fumadocs documentation

[RajuGangitla]

To Reproduce

1. I followed the docs to generate apis using the script and openapis json schema

Below is the code for script

Current vs. Expected behavior

I got ui like this
screen-capture (22).webm

But I am expecting ui like this
screen-capture (23).webm

Provide environment information

Binaries:
  Node: v20.9.0
  npm: 10.2.4
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  "fumadocs-core": "13.4.10",
    "fumadocs-mdx": "10.0.2",
    "fumadocs-openapi": "^5.4.14",
    "fumadocs-typescript": "^2.1.0",
    "fumadocs-ui": "13.4.10",
    "next": "^14.2.8",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.5.4"
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

UI

Additional context

This is my tailwind.config.js

import { createPreset, presets } from 'fumadocs-ui/tailwind-plugin';


/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './content/**/*.{mdx,tsx}',
    './node_modules/fumadocs-ui/dist/**/*.js',
    './node_modules/fumadocs-openapi/dist/**/*.js'
  ],
  presets: [
    createPreset({
      addGlobalColors: true,
      preset: {
        ...presets.default,
        dark: {
          ...presets.default.dark,
          background: '0 0% 2%',
          foreground: '0 0% 98%',
          popover: '0 0% 4%',
          card: '0 0% 4%',
          muted: '0 0% 8%',
          border: '0 0% 14%',
          accent: '0 0% 15%',
          'accent-foreground': '0 0% 100%',
          'muted-foreground': '0 0% 60%',
        },
      },
    }),
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
        'repeat-gradient-to-r':
          'repeating-linear-gradient(to right, var(--tw-gradient-stops))',
        'repeat-gradient-to-br':
          'repeating-linear-gradient(to bottom right, var(--tw-gradient-stops))',
      },
      keyframes: {
        stroke: {
          from: {
            'stroke-dasharray': '1000',
          },
          to: {
            'stroke-dasharray': '1000',
            'stroke-dashoffset': '2000',
          },
        },
      },
      animation: {
        stroke: 'stroke 5s linear infinite',
      },
    },
  },
};

[fuma-nama]

I think it's caused by some misconfigurations on Tailwind CSS, please make sure the provided path to fumadocs-openapi in content is valid. (It may differs depending on the package manager and monorepo)
Also you should use markdown codeblocks, it is kinda unreadable

[RajuGangitla]

@fuma-nama i updated the code to markdown

this is my file structure

[fuma-nama]

If your app isn't large, you can provide a reproduction link (GitHub repo or CodeSandbox) so I can look into the issue

[RajuGangitla]

@fuma-nama https://github.com/RajuGangitla/project_docs

[fuma-nama]

You didn’t have Tailwind CSS configured correctly. Remove the original import to prebuilt style sheet from layout.tsx, and create a style.css for Tailwind CSS. See their next.js guide

[RajuGangitla]

@fuma-nama its worked thank you