[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)

강의랑 다른 부분 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;
}

@import 'tailwindcss';

@theme {
  --color-primary: #1d2745;
  ...
}

@layer utilities {
  .text-xs {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0px;
    font-weight: 400;
  }