[CSS]TailwindCSS 사용법

1. next js를 설치한다.

npx create-next-app .

2. tailwind 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.js파일 수정

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Global.css 파일 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 적용여부 확인

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

※ 디자인 블럭 예시 사이트

https://tailblocks.cc/