Next.js Discord

Discord Forum

tailwind doesnt work

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
tailwind css styling isnt shown

35 Replies

Are you using Tailwind CSS v3 or v4?
Northeast Congo LionOP
3.3.0
@Northeast Congo Lion 3.3.0
Do you have a tailwind.config.ts file?
Northeast Congo LionOP
yes
@Northeast Congo Lion yes
Can I see it?
Northeast Congo LionOP
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}
Northeast Congo LionOP
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-white text-gray-700 container mx-auto dark:bg-gray-900 dark:text-gray-300 max-w-2xl
}
Northeast Congo LionOP
yes
@Northeast Congo Lion yes
The right way? Are you sure?
import "./globals.css";
Northeast Congo LionOP
yes
@Northeast Congo Lion yes
Can I have a screenshot of the file structure in your project?
Northeast Congo LionOP
@Northeast Congo Lion Click to see attachment
Do you want to stay on v3 or can I upgrade you to v4?
Northeast Congo LionOP
stay in 3
@Northeast Congo Lion Click to see attachment
Is Tailwind CSS faulty on all pages or just some?
Northeast Congo LionOP
all
What did you specify in postcss.config.mjs?
Northeast Congo LionOP
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;
I don't understand why, to be honest
Let's wait for someone else to help you solve your problem
Northeast Congo LionOP
i dont see this yellow border
also i see ul that i didnt see previously
American black bear
Try deleting the node_modules and .next folders, then run <package manager> install
after this start the dev server and screenshot the console
also your pages are .js instead of .jsx so that could be causing the problem since you cannot render jsx in .js as far as I know
I could be wrong on that one though
Northeast Congo LionOP
wow amazing
thanks
American black bear
what fixed it?
Northeast Congo LionOP
deleted node_modulesthen install again
American black bear
yeah that can often fix some mysterious bugs