Next.js Discord

Discord Forum

Debugging tailwind CSS

Answered
Oak shoot sawfly posted this in #help-forum
Open in Discord
Oak shoot sawflyOP
I have a project using nextauth and tailwindcss but for some reason tailwind css does not seem to work.

Does anyone have any tips or suggestions on how I can go about debugging this?

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.10",
    "next": "13.4.10",
    "next-auth": "^4.22.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "autoprefixer": "10.4.14",
    "postcss": "8.4.26",
    "sass": "^1.69.5",
    "tailwindcss": "3.3.3"
  }
}


I have this in my global styles
/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;


None of the tailwind classes seem to work
Answered by Clown
See that content field? Its pointing to all the components and pages that can use tailwindcss
View full answer

31 Replies

Clown
Is the global styles file imported inside the root layout?
What does your tailwind config file looks like
Oak shoot sawflyOP
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};


tailwind.config.js
yes its imported in my pages/_app.tsx
import { SessionProvider } from "next-auth/react";
import type { Metadata } from "next";
import type { AppProps } from "next/app";
import type { Session } from "next-auth";
import "./styles.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

// Use of the <SessionProvider> is mandatory to allow components that call
// `useSession()` anywhere in your application to access the `session` object.
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
Clown
Are you using pages and app router simultaneously?

Also are you using a src directory?
Oak shoot sawflyOP
im not using a src dir, but im kinda new to all this so maybe im answering the questions wrong
Answer
Clown
If you arent using a src directory then you have to edit that to not include src dir in the path
Oak shoot sawflyOP
oh isee, so its pointing at the wrong places entirely
nothing is under /src/ its all under /pages and /components
Clown
Thats weird
Oak shoot sawflyOP
ya thats 100% it
Clown
It seems that you initially created this project with a src directory but pulled the contents out into the root directory
Oak shoot sawflyOP
yes so this is what i did
i started a nextjs project, then started adding nextjs-auth to it, but the example wasnt using src
so i kinda pieced it together not fully understanding it
Clown
Welp, im not sure if that src directory path is being referenced else where
Oak shoot sawflyOP
ill do a grep on that path and see if i find it anywhere else
thank you so much for your help btw
Clown
:sunglasses_1:
Mark the answer pls
Oak shoot sawflyOP
do you use src dir?
normally in your projects?
Clown
Nope
I think the main idea behind using src was to separate app router and pages router
@Clown I think the main idea behind using src was to separate app router and pages router
Clown
That way you can use both and keep them separated in a single folder
Oak shoot sawflyOP
can you tell me what your tsconfig.json looks like?
i found ./src/* in there
Clown
{ 
   "compilerOptions": { 
     "target": "es5", 
     "lib": ["dom", "dom.iterable", "esnext"], 
     "allowJs": true, 
     "skipLibCheck": true, 
     "strict": true, 
     "forceConsistentCasingInFileNames": true, 
     "noEmit": true, 
     "esModuleInterop": true, 
     "module": "esnext", 
     "moduleResolution": "node", 
     "resolveJsonModule": true, 
     "isolatedModules": true, 
     "jsx": "preserve", 
     "incremental": true, 
     "plugins": [ 
       { 
         "name": "next" 
       } 
     ], 
     "paths": { 
       "@/*": ["./*"] 
     } 
   }, 
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 
   "exclude": ["node_modules"] 
 }
Oak shoot sawflyOP
thank you, its the "paths" thats slightly differnet