인프런 커뮤니티 질문&답변

강의랑 다른 부분 1. tailwind 설치 커맨드

: 커맨드가 간단해졌어요.
npm install tailwindcss @tailwindcss/vite

강의랑 다른 부분 2. vite.config.ts
: 이제 ***.tsx, ***.jsx 를 일일히 넣지 않아도 됩니다.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

강의랑 다른 부분 3. @import ~ 3줄
@import "tailwindcss";
한 줄로 초간단해짐..

강의랑 다른 부분 4. tailwind.config.js
: config.js 가 없어졌습니다. (자세한 내용: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration)

대신 index.css 에 아래와 같은 형식으로 theme 을 적용할 수 있습니다.

@import 'tailwindcss';

@theme {
  --color-primary: #1d2745;
  --color-secondary: #1de5d4;
  --color-tertiary: #1d2745;
  --color-white: #ffffff;
  --color-mono100: #f1f1f1;
  --color-mono200: #bebebe;
  --color-mono300: #d6d7d9;
  --color-error: #d01e1e;
  --color-social: #395997;
}