#Try to display extern component

21 messages · Page 1 of 1 (latest)

pastel egret
#

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.

image.png
golden oakBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

pastel egret
#

its like he havent any height

pastel egret
#

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

orchid whale
#

it's because CSS does not work like that. instead of h-full add min-h-screen or a fixed value

pastel egret
pastel egret
#

i've tried with just colored text and doesnt work too

#

like tailwind isnt install or working

orchid whale
#

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

pastel egret
#

and it must work like that if the name isnt page.tsx its a component

pastel egret
#

bump 🙏🏼

orchid whale
#

can you share your tailwind config file

pastel egret
# 
/** @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