선생님 nextjs에서 tailwindcss 적용 문제.,.

[정중식]

이런 구조를 갖고있는데요,
Main컴포넌트에서 tailwindcss 적용이 잘 안됩니다.
Main컴포넌트 내용을 원래는 page.js컴포넌트에 넣어놨었는데, 이때는 css적용이 잘됬는데
컴포넌트 분리를 시키니까 적용이 잘안됩니다. 왜그런걸까요?

page.js ( index.js라고생각하면됩니다.)
'use client';

import Main from '@/component/Main';

import { getRandomQuote } from '../util/wiseSaying';

export default function Home() {
  const quote = getRandomQuote();

  return (
    <>
      <Main />
    </>
  );
}

'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';

const Main = () => {
  return (
    <motion.div
      className='flex justify-center items-center absolute inset-0 '
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      <Image
        src='/calendar.png'
        className='text-9xl'
        alt='캘린더이미지'
        width={120}
        height={120}
      />
      <span className='separator'></span>

      <Image
        src='/notes.png'
        className='text-9xl'
        alt='포스트잇 이미지'
        width={120}
        height={120}
      />
      <span className='separator'></span>

      <Image
        src='/fortuneCookie.png'
        className='text-9xl'
        alt='포츈쿠키이미지'
        width={120}
        height={120}
      />
      <span className='separator'></span>
      <Image
        src='/exercise1.png'
        className='text-9xl'
        alt='운동이미지'
        width={120}
        height={120}
      />
    </motion.div>
  );
};

export default Main;

[codingapple]

알수없군요 콘솔창 에러메세지같은거 있나 확인해봅시다

[정중식]

해결완료!
tailwind.config.js 세팅과 다른 컴포넌트폴더이름명을 사용했어요

tailwind.config.js에는 components/ 이렇게해줫는데
저는 실제로 component/ 이렇게 사용했네요 ㅋㅋ 

[글쓴이]

글