Next.js Discord

Discord Forum

Tailwind not working in new next.js project

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Hi, I started off with the boilerplate next.js project, made a card component and added some tailwind to it. However, the tailwind does not work at all in any of the html elements. Any help would be appreciated thanks!
import Image from "next/image"

const Card = () => {
  return (
    <div className="border-white border-4">
        <Image 
            src="/test.jpeg"
            width={200}
            height={200}
            alt="test"
        />
        <h2 className="text-xl">John Smith</h2>
        <p className="">Web Developer</p>
    </div>
  )
}

export default Card

Here is the page.tsx file:
import Card from '@/component/Card'
import Image from 'next/image'

export default function Home() {
  return (
    <>
      <Card />
    </>
  )
}
Answered by Ray
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}',
  ],
  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
View full answer

5 Replies

Fire ant
How is your tailwind.config and globals.css?
Ray
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}',
  ],
  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
Answer
Ray
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}
Transvaal lionOP
Thank you! It works now, I had named the components folder "component" which messed it up.