SETTING ASTRO

설치

bun create astro@latest .

tailwind 추가

bun x astro add tailwind
# bun add @tailwindcss/vite@^4.2.4 tailwindcss@^4.2.4  실행됨
# astro.config.mjs에서 vite 플러그인에 tailwindcss가 추가됨

문서에서 적용시키려면 아래코드를 삽입해야 한다

import '../styles/global.css'; 

global.css 에서 아래 코드가 있는지 확인한다.

# 모든 레이어를 불러옴
@import "tailwindcss";

# 레이어에 스타일을 추가 할 수있다
@layer base {
    a {
    color: inherit;
    text-decoration: none;
  }
}
@layer components {}
@layer utilities {}

만약 @theme @apply 키워드에 경고가 표시되면 VS Code 마켓플레이스에서 [PostCSS Language Support] (작성자: csstools)를 설치하세요.

daisyUI

bun add -D daisyui@latest

scr/styles/global.css 에 아래 코드 추가

@import "tailwindcss";
@plugin "daisyui";

paths 별칭 설정

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@pages/*": ["./src/pages/*"]
    }
  }
}

빌드 캐시 없애기

rm -rf dist .astro node_modules/.vite