Style not loading when moving the page to pages folder
Answered
Plain Chachalaca posted this in #help-forum
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 correctlyAnswered by Ray
create
pages/_app.tsx
and import the styleimport '@/app/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
17 Replies
Plain ChachalacaOP
Noticed that this class on body is not applying neither any of the tailwind classes
Ray
can you show your
tailwind.config.js
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
Ray
what do you mean?
moving the page component inside pages folder in src/pages/index
do you mean you bootstrapped the app with app router and trying to create a page in
pages
folder?Plain ChachalacaOP
Yes
Ray
create
pages/_app.tsx
and import the styleimport '@/app/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
Answer
Plain ChachalacaOP
So when i bootstrapped it i clicked the recommended one i believe it was app router
Aah that worked
Ray
please noted that, you could use app router and page router together but the route cannot be conflicted
Plain ChachalacaOP
We should only use one router in the app ?
Ray
no you can use both
Plain ChachalacaOP
Also is there any need of layout now ?
Ray
yes if you plan to use app router
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 ?
Ray
both should work but app router should be better