Next.js Discord

Discord Forum

Style not loading when moving the page to pages folder

Answered
Plain Chachalaca posted this in #help-forum
Open in Discord
Avatar
Plain ChachalacaOP
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
Answered by Ray
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} />
}
View full answer

17 Replies

Avatar
Plain ChachalacaOP
Noticed that this class on body is not applying neither any of the tailwind classes
Image
Avatar
Plain ChachalacaOP
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
Avatar
Ray
what do you mean?
moving the page component inside pages folder in src/pages/index
Avatar
Plain ChachalacaOP
Yes
Avatar
Ray
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} />
}
Answer
Avatar
Plain ChachalacaOP
So when i bootstrapped it i clicked the recommended one i believe it was app router
Aah that worked
Avatar
Ray
please noted that, you could use app router and page router together but the route cannot be conflicted
Avatar
Plain ChachalacaOP
We should only use one router in the app ?
Avatar
Ray
no you can use both
Avatar
Plain ChachalacaOP
Also is there any need of layout now ?
Image
Avatar
Ray
yes if you plan to use app router
Avatar
Plain ChachalacaOP
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
Avatar
Ray
both should work but app router should be better