TailWindCSS Setup

제동현·2023년 2월 27일
0

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를 다시 실행시켜주자

0개의 댓글