CODEWITHSUNDEEP
next.jstailwind-cssnext.js13
StanLachie
StanLachie

Reputation: 77

Tailwind not applying styles in subpages Next13

Today I've begun using NextJS, I want to use tailwind alongside it following this article from the NextJS documentation.

When I try to the main / directory Tailwind is working perfectly, the issue comes whenever I try to go into any of the directories that are under the page folder Tailwind does not work (Default styles, classes having no impact).

Folder Structure (Basic)

my-app/
├─ app/
│  ├─ globals.css
│  ├─ page.tsx
│  ├─ layout.tsx
├─ pages/
│  ├─ listings/
│  │  ├─ talent.tsx
├─ tailwind.config.js

Tailwind config

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Upvotes: 1

Views: 897

Answers (2)

IconoKio
IconoKio

Reputation: 1

adding

import 'tailwindcss/tailwind.css';

worked for me.

Upvotes: 0

Daniel B. Papp
Daniel B. Papp

Reputation: 126

In the article you provided, they are importing the gloabls.css file in their layout.tsx component, which is then used by all the pages in the app. If you aren't using the layout file in the same manner, you will need to import the CSS file on the pages where you want the styles to apply.

I suggest you either make use of the layout component in your page.tsx file to easily share the styles among your entire app, or use the per-page layout method that NextJS explains here.

Upvotes: 3

Related Questions