Next.js Discord

Discord Forum

Next is not picking up tailwind

Answered
American Fuzzy Lop posted this in #help-forum
Open in Discord
American Fuzzy LopOP
Hi Folks, I know there is another thread on here for setting next and tailwind up, but I am having trouble fixing my issues even while following the steps in the other post and I am hoping someone can help me here.

I am having difficulty figuring out why my application won't apply my tailwind styles. The custom css in my files are being read such that when I hover over buttons, I see the cursor pointer change. However, nothing happens with tailwind. I have tried different browsers, tried restructuring my folder system rebuilding my tsconfig to no avail. The one thing I have avoided doing is reinstalling my project, I want to try and avoid this.

I have attached my current folder structure and a reflection of what's appearing in my browsers. I am currently using Vivaldi, but Chrome and FireFox don't show anything either.

Do you have any suggestions? Any help is appreciated. Thank you.
Answered by Ray
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
View full answer

37 Replies

American Fuzzy LopOP
Spectacled Caiman
Ensure that Tailwind CSS is properly installed in your project.
If you are using Tailwind CSS with a production build, ensure that you have configured it to purge unused styles.
If you are using PostCSS with Tailwind, make sure your PostCSS configuration is correct.
No PostCSS either
What you see is what's on the project
Spectacled Caiman
can you provide source code?
American Fuzzy LopOP
Unfortunately no, private repo owned by someone else
Spectacled Caiman
so his github account?
American Fuzzy LopOP
Private org
Spectacled Caiman
okay
American Fuzzy LopOP
Which is why I have the screenshots with no personal info attached
Spectacled Caiman
so do you have no source code?
American Fuzzy LopOP
tsconfig:
import type { Config } from "tailwindcss"

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/styles/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    colors: {
      black: "#121d29",
      gray: "#5a5a5a",
      white: "#f8f8f8",
      lightGray: "#f5f5f5",
      blue: "#013366",
      lightBlue: "#ebf4ff",
      orange: "#f6921e",
      lightOrange: "#fff5e7",
    },
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
}
export default config
Global css:
@tailwind base;
@tailwind components;
@tailwind utilities;

/* hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar,
.no-scrollbar::ms-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
}

a:hover,
button:hover {
  cursor: pointer;
}
layout.tsx
import "../styles/reset.css"
import "../styles/globals.css"
import type { Metadata } from "next"
import { manrope } from "@/fonts"

export const metadata: Metadata = {
  title: "",
  description:
    "",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={manrope.className}>{children}</body>
    </html>
  )
}
src/app/(home)/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="bg-lightBlue text-xl">hello lf</h1>
      <button className="bg-lightBlue text-xl">button</button>
      <button className="bg-lightBlue text-xl">button</button>
    </main>
  )
}
This is what I can provide
Spectacled Caiman
okay
let me see.
American Fuzzy LopOP
Thank you
Spectacled Caiman
in my opinion, it seems like your configuration files and styles are set up correctly.
@American Fuzzy Lop This is what I can provide
Ray
could you show postcss.config.js?
American Fuzzy LopOP
Yes,
postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
  },
}
@American Fuzzy Lop Yes, postcss.config.js module.exports = { plugins: { autoprefixer: {}, }, }
Ray
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Answer
American Fuzzy LopOP
Thanks I'll add that and report back
Spectacled Caiman
try cleaning your build by deleting the node_modules folder and the package-lock.json file (or yarn.lock if you are using Yarn), and then reinstalling dependencies.
Spectacled Caiman
please explain in detail.
@Spectacled Caiman please explain in detail.
Ray
which mean he didn't enable tailwind plugin in the postcss config
Spectacled Caiman
okay
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
like this?
Spectacled Caiman
great
@Ray yeah
Spectacled Caiman
Hi @Ray , do you love Messi.
@Ray ts module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
American Fuzzy LopOP
This worked. Thank you very much. I had removed the option at one point because it was giving me troubles, it slipped my mind that it could be it