TIL 23.08.21 Tailwind CSS 세팅

1. Tailwind 홈페이지 -> Docs 에서 다운로드

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

yarn add -D tailwindcss

 

2. Next.js 와 적용할 것 이기 때문에, 사용할 컴포넌트나 폴더명을 다음과 같이 tailwind.config.ts 에 적용함

 

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

3. styles > globals.css 의 내용을 다음과 같이 수정

 

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

 

4. 다음과 같이 app 폴더 아래에 있는 page.tsx 에 입력

 

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

 

 

[Tailwind CSS 참고 사이트]

 

https://tailblocks.cc/

Tailblocks — Ready-to-use Tailwind CSS blocks