Next.js Discord

Discord Forum

Try to display extern component

Unanswered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
Hi, Im doing my portfolio wich is composed of multiple complex component.

For the moment i just want to display a component in my page.tsx root. Like in the images.

For the background of that component i use a custom color made in the tailwind.config.ts.

The issue i got is that i havent my component displayed and didnt see him.

20 Replies

Goldstripe sardinellaOP
its like he havent any height
Goldstripe sardinellaOP
i've try to just display some colored text with tailwind but it doesnt work like he didnt detect tailwind but i've initiated my project with npx create-next-app@latest
Sun bear
it's because CSS does not work like that. instead of h-full add min-h-screen or a fixed value
@Sun bear it's because CSS does not work like that. instead of `h-full` add `min-h-screen` or a fixed value
Goldstripe sardinellaOP
i've tried with h-[100dvh] and it doesnt work too
Goldstripe sardinellaOP
i've tried with just colored text and doesnt work too
like tailwind isnt install or working
Sun bear
try moving your component out of the app directory. only pages, layouts and special files should be in it
move your components to src/components
and it must work like that if the name isnt page.tsx its a component
Goldstripe sardinellaOP
bump 🙏🏼
Sun bear
can you share your tailwind config file
Goldstripe sardinellaOP
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      // Or if using `src` directory:
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
ive tried with this one wich is the one recommended by the doc of tailwind
and this one :
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;
wich the one who come with the npx create-next-app@latest
Goldstripe sardinellaOP
okay so i init so many times a new project but this time it worked idk why