No styling when clicking on button or inputing the URL in the browser??

[ryanzidago]

Summary

I'm using Next.JS 13.4.7 with TypeScript and TailwindCSS.

I have the following app/pages.tsx file:

import Contact from "@/pages/contact"

export default function Layout() {
  return (
    <main className="flex justify-center p-20 w-full">
      <Contact />
    </main>
  )
}

which displays the pages/contact.tsx page:

import TextInput from "@/components/text_input"
import Button from "@/components/button"

export default function Contact() {

  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full max-w-xl text-slate-700">
      <h1 className="text-xl">Personal Information</h1>
      {// ...}
      <div className="flex w-full justify-end">
      <Button href="/work_experience">Next {">"}</Button>
      </div>
    </div>
  )
}

When clicking on the button link, I'm redirected to the pages/work_experience.tsx page (similar to contact page), but without any styling, it's just pure HTML ...

Why is that? What do I need to do to have styling?

Also when I visit the root path and then append /contact to the URL in the browser, even my contact page has no styling.

Screen.Recording.2023-07-04.at.08.06.13.mov

Additional information

Next info output:



    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.1.0
      npm: 9.6.2
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.4.7
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6

### Example

https://github.com/ryanzidago/demodemo

[icyJoseph]

I think you have a conflict. You have a pages directory, which tells Next.js that you want a /contact page using the Pages Dir Router, but you are not doing any Tailwind loading there.

However, you seen to be using app directory which uses the App Dir Router. While these can be used in the same app, they need different setups.

You typically need an _app file, and there you load the globals that injects Tailwind.

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

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

You have the same problem with pages/work_experience, there's not _app that loads Tailwind for that route.

In short, you are mixing up two technologies. If you want to support pages you need an _app file, where you import the tailwind styles, as you do in, https://github.com/ryanzidago/demodemo/blob/main/src/app/globals.css

I think maybe you wanted to create, contact and work_experience, under app? or change the pages directory to avoid mixing up tech stacks.

Read the docs on how to do routing in the App Dir Router: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

[ryanzidago]

Thank you for your help! After reading your comment and lurking at the documentation, I realised that:

• you need to either have pages or app directory,
• pages need to be within a directory within the app directory

🙏

[ryanzidago]

This is the directory structure that make it work:

├── src
│   ├── app
│   │   ├── contact
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── work_experience
│   │       └── page.tsx
│   └── components
│       ├── button.tsx
│       └── text_input.tsx

[icyJoseph]

To be precise, you can have both... but that's more of a migration step.

I didn't want to confuse you, but strictly speaking, what you cannot have are matching routes, say app/foo/page.tsx and pages/foo.tsx would be problematic, because they point to the same route, that is, they match.

In your case, it seemed to me that you wanted to work with App Router more than anything else. Glad to have helped! Have fun!