Tailwindcss is not working in the app router
Answered
Peterbald posted this in #help-forum
PeterbaldOP
Tailwindcss is not working on pages in Next.js project. To make it work, I had to manually import globals.css in all the pages component. Is there any better way to apply tailwind css in pages without requiring to import global css in every page
Answered by joulev
1. To use global css in the app router, import it to app/layout.tsx
2. To use global css in the pages router, import it to pages/_app.tsx, create the file if it doesn’t exist yet
2. To use global css in the pages router, import it to pages/_app.tsx, create the file if it doesn’t exist yet
17 Replies
PeterbaldOP
there is no _app.tsx, you mean layout.tsx? I created the app using "npx create-next-app" with the default question they ask
@Peterbald there is no _app.tsx, you mean layout.tsx? I created the app using "npx create-next-app" with the default question they ask
Are you using the pages router or the app router? The question makes it look like you are using the pages router, in that case the root is pages/[_app.tsx](https://nextjs.org/docs/pages/building-your-application/routing/custom-app). If you are using the app router then import the global css file to the root layout(s)
There is no pages/layout.tsx in the pages router
PeterbaldOP
I selected app router while installation that's why it didn't even create a pages directory
i meant app/layout.tsx
I will try with pages/_app.tsx, i need to create this file
@Peterbald I will try with pages/_app.tsx, i need to create this file
No you don’t. You are currently using the app router exclusively, so forget everything I said about _app.tsx. Just import the global css file to app/layout.tsx
PeterbaldOP
I already did but no luck with pages directory (/component and /app are fine ).
@Peterbald I already did but no luck with pages directory (/component and /app are fine ).
So are you using the pages router or not?
1. To use global css in the app router, import it to app/layout.tsx
2. To use global css in the pages router, import it to pages/_app.tsx, create the file if it doesn’t exist yet
2. To use global css in the pages router, import it to pages/_app.tsx, create the file if it doesn’t exist yet
Answer
If you use both routers you have to do both
PeterbaldOP
I am using an app-router, and I got the issue. Need to create router using app router as mentioned in this article https://www.freecodecamp.org/news/routing-in-nextjs/#:~:text=A%20key%20difference%20between%20the,routes%20within%20the%20app%20folder.
@Peterbald I am using an app-router, and I got the issue. Need to create router using app router as mentioned in this article https://www.freecodecamp.org/news/routing-in-nextjs/#:~:text=A%20key%20difference%20between%20the,routes%20within%20the%20app%20folder.
So I take it as you are not using the pages router? In other words, you are not using the pages/ directory?
@joulev 1. To use global css in the app router, import it to app/layout.tsx
2. To use global css in the pages router, import it to pages/_app.tsx, create the file if it doesn’t exist yet
In that case follow (1) here and no need to do (2)
PeterbaldOP
Yup, I was using app-router but mistakingly created pages/ as well. Tailwind css is working now when I created a route inside the app/
Thanks!