CODEWITHSUNDEEP
reactjsnext.jstailwind-css
TicknockTokomak
TicknockTokomak

Reputation: 31

Tailwind CSS styles not applying to some Next.js components

I built a single-page portfolio site on Next using Tailwind and everything is working perfectly. I'm trying to add a second page.

I have added a file to the pages directory, and referenced a new component. My content is accessible using the pages routing but there are no styles applied..

Why is this and how can I fix it?

It may be worth noting that MovieAPI.tsx is the only file in the pages directory.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ]

pages>MovieAPI.tsx:

"use client"
import React from "react";
import MovieAPISection from "@/components/MovieAPISection"

function MovieApi() {
    return <MovieAPISection></MovieAPISection>
}

export default MovieApi

components>MovieAPISection.tsx:

import React from 'react'
import Image from 'next/image'

const MovieAPISection = () => {
  return (
    <section id="MovieAPISection">
          <div className="my-12 pb-12 md:pt-16 md:pb-48">
                <h1 className="text-center font-bold text-4xl">Movie API Project
                    <hr className="w-6 h-1 mx-auto my-4 bg-teal-500 border-0 rounded" />
                </h1>
          </div>
    </section>
      
  )
}

export default MovieAPISection

Upvotes: 1

Views: 761

Answers (1)

TicknockTokomak
TicknockTokomak

Reputation: 31

The problem was solved by using the Next app router, instead of the Pages router.

Upvotes: -1

Related Questions