Tailwind CSS설치 및 초기화
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p (-p를 붙이면 postcss.config.js파일까지 생성)
https://tailwindcss.com/docs/installation/using-postcss
이 세개를 터미널에 순차적으로 설치해준다.
다음 tailwind.config.js 파일을보자
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
theme: {
extend: {},
},
plugins: [],
};
콘텐츠안의 내용은 pages 폴더에 있는, 모든 폴더의 명시된 확장자 중 하나를 가지는 모든 파일이라는 의미다.
다음과 같이 표시되면 정상적으로 설치된것이다.
근데 localhost:3000에서 재대로 뜨지 않을 경우가 있으니 이럴 경우엔
npm run dev를 다시 실행시켜주자