Next.js Discord

Discord Forum

Tailwind CSS is not working with Next.js and Shadcn/UI

Answered
nikkuv posted this in #help-forum
Open in Discord
I set up shadcn UI with next js following this installation guide https://ui.shadcn.com/docs/installation/next

but the tailwind is not working.
Answered by nikkuv
It's working now, I think it was a problem because of the css varibales in global.css file.
View full answer

4 Replies

This is my tailwind.config.ts file
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}',
  ],
  // content: ["./src/app/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
  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: [],
};
export default config;
First, I was getting 404 when I ran npm run dev and then I removed the app folder which wasn't there in the src folder.
It's working now, I think it was a problem because of the css varibales in global.css file.
Answer
Cuckoo wasp
@nikkuv did you get the animations etc. I cannot get it to show like it is on the website.