Tailwind CSS 4 테마 토큰 및 승인된 유틸리티 패턴을 사용하여 캔버스 구성요소의 스타일을 지정합니다. (1) 새 구성요소 생성, (2) 구성요소에 색상 또는 스타일 추가, (3) Tailwind 테마 토큰 작업, (4) global.css에서 디자인 토큰 추가 또는 업데이트, (5) 색상/스타일 소품 생성, (6) 구성요소 소품이 추가/제거/이름 변경/다시 입력되고 렌더링된 스타일에 영향을 미칠 수 있는 변경 사항이 있을 때 사용합니다. @theme 변수, CVA 변형 및 cn() 유틸리티를 다룹니다.
명령줄에서 canvas-styling-conventions AI 스킬을 개발 환경에 빠르게 설치
출처: acquia/nebula.
| Tailwind CSS 4.1+ | Styling | | class-variance-authority (CVA) | Component variants | | clsx + tailwind-merge via cn() | Class name merging |
Only use these dependencies for styling. Do not add third-party CSS libraries or create new styling utilities.
Use cn() to merge Tailwind classes. It combines clsx for conditional classes with tailwind-merge to resolve conflicting utilities. Import from either source:
Tailwind CSS 4 테마 토큰 및 승인된 유틸리티 패턴을 사용하여 캔버스 구성요소의 스타일을 지정합니다. (1) 새 구성요소 생성, (2) 구성요소에 색상 또는 스타일 추가, (3) Tailwind 테마 토큰 작업, (4) global.css에서 디자인 토큰 추가 또는 업데이트, (5) 색상/스타일 소품 생성, (6) 구성요소 소품이 추가/제거/이름 변경/다시 입력되고 렌더링된 스타일에 영향을 미칠 수 있는 변경 사항이 있을 때 사용합니다. @theme 변수, CVA 변형 및 cn() 유틸리티를 다룹니다. 출처: acquia/nebula.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventionsTailwind CSS 4 테마 토큰 및 승인된 유틸리티 패턴을 사용하여 캔버스 구성요소의 스타일을 지정합니다. (1) 새 구성요소 생성, (2) 구성요소에 색상 또는 스타일 추가, (3) Tailwind 테마 토큰 작업, (4) global.css에서 디자인 토큰 추가 또는 업데이트, (5) 색상/스타일 소품 생성, (6) 구성요소 소품이 추가/제거/이름 변경/다시 입력되고 렌더링된 스타일에 영향을 미칠 수 있는 변경 사항이 있을 때 사용합니다. @theme 변수, CVA 변형 및 cn() 유틸리티를 다룹니다. 출처: acquia/nebula.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventions 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/acquia/nebula