#Style not loading when moving the page to pages folder

19 messages · Page 1 of 1 (latest)

random terrace
#

I have bootstrapped the app using CNA and when i am moving the page component inside pages folder in src/pages/index it is not loading any css. I have tailwind and postcss configured correctly

image.png
dry kiteBOT
#
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)

random terrace
#

Noticed that this class on body is not applying neither any of the tailwind classes

image.png
prisma latch
random terrace
#

tailwind does have pages path set in content if thats what you want to know

# 
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
prisma latch
#

what do you mean?

moving the page component inside pages folder in src/pages/index

prisma latch
random terrace
#

Yes

prisma latch
#

create pages/_app.tsx and import the style

import '@/app/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
random terrace
#

So when i bootstrapped it i clicked the recommended one i believe it was app router

#

Aah that worked

prisma latch
#

please noted that, you could use app router and page router together but the route cannot be conflicted

random terrace
#

We should only use one router in the app ?

prisma latch
#

no you can use both

random terrace
#

Also is there any need of layout now ?

image.png
prisma latch
#

yes if you plan to use app router

dry kiteBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1193271908024733798 message)

random terrace
#

Okay let say i am trying to build a simple static clone of facebook which has side pane header and feed stuff, if later on if i plan to have each section to be routed what router is better ?

image.png