Style not loading when moving the page to pages folder
Answered
Plain Chachalaca posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/attachments/1193271908024733798/1193271908645474344/image.png?ex=65ac1c10&is=6599a710&hm=22b44e523d3fea2a56b255482498989495bec59f77ec16ead46adf1e98c0e686&)
Answered 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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Plain ChachalacaOP
Noticed that this class on body is not applying neither any of the tailwind classes
![Image](https://cdn.discordapp.com/attachments/1193271908024733798/1193272208848592926/image.png?ex=65ac1c58&is=6599a758&hm=cc1aab92bcb75c449f59ef1b14a3c0c90b92f950f16fcffed7189772ba9cc352&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
can you show your
tailwind.config.js
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
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?![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Plain ChachalacaOP
Yes
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Plain ChachalacaOP
So when i bootstrapped it i clicked the recommended one i believe it was app router
Aah that worked
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
please noted that, you could use app router and page router together but the route cannot be conflicted
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Plain ChachalacaOP
We should only use one router in the app ?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
no you can use both
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Plain ChachalacaOP
Also is there any need of layout now ?
![Image](https://cdn.discordapp.com/attachments/1193271908024733798/1193486942113890324/image.png?ex=65ace454&is=659a6f54&hm=6bcd0e4dd6e14dd5b8667e3fcc617778f9da7716a0539925aafaf0914b780663&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yes if you plan to use app router
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/attachments/1193271908024733798/1193487707775705149/image.png?ex=65ace50b&is=659a700b&hm=d4a6af1e4acde8d640dd390a2b581db0927dbc31fa6093ff619e6d4a74576c39&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
both should work but app router should be better