스킬 Tailwind CSS V4 Mastery

📦

Tailwind CSS V4 Mastery

Name: Tailwind CSS V4 Mastery
Author: Calel33

v1.0.0 콘텐츠 리비전 r1 중간 위험 🔑 환경 변수⚙️ 외부 명령어📁 파일 시스템 접근🌐 네트워크 접근

Tailwind CSS V4 프로젝트 마스터하기

Tailwind CSS V4는 구성, 마이그레이션 단계, 성능 선택지를 변경합니다. 이 스킬은 Claude, Codex, Claude Code에 더 안전한 업그레이드와 더 나은 CSS 아키텍처를 위한 구조화된 지침을 제공합니다.

지원: Claude Codex Code(CC)

📊 70 적절함

Maintain this Skill? Claim it 📊 70 적절함

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "Tailwind CSS V4 Mastery" from https://skillstore.io/skills/calel33-tailwind-css-v4-mastery.md and its manifest at https://skillstore.io/api/skills/calel33-tailwind-css-v4-mastery/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/calel33-tailwind-css-v4-mastery.md 서명된 manifest GET /api/skills/calel33-tailwind-css-v4-mastery/manifest 서명된 lockfile GET /api/skills/calel33-tailwind-css-v4-mastery/lockfile

테스트해 보기

"Tailwind CSS V4 Mastery" 사용 중입니다. 사용자 지정 색상과 불투명도 유틸리티를 사용하는 Tailwind v3 앱을 마이그레이션해야 합니다.

예상 결과:

의존성 업데이트, CSS import 변경, 테마 변수 변환, 불투명도 대체, 시각적 회귀 검사를 다루는 마이그레이션 체크리스트.

"Tailwind CSS V4 Mastery" 사용 중입니다. 멀티브랜드 Tailwind V4 컴포넌트 시스템을 만드는 것을 도와주세요.

예상 결과:

브랜드 토큰, 테마 경계, 컴포넌트 클래스 규칙, dark mode 처리, 문서화 작업을 포함한 설계 계획.

"Tailwind CSS V4 Mastery" 사용 중입니다. 내 Tailwind V4 빌드가 예상보다 느립니다.

예상 결과:

plugin 선택, 테마 크기, breakpoint 수, source maps, 기준 측정값을 확인하는 성능 검토 계획.

보안 감사

중간 위험

v10 • 2026. 7. 19. 버전별 보고서 열기

All 97 static alerts are false positives tied to documentation formatting, CSS patterns, official URLs, a production literal, or expected Bash syntax. Two semantic risks remain: unpinned package installation and broad in-place project rewrites without confirmation. No prompt injection or exfiltration intent was found.

스캔된 파일

2,242

분석된 줄 수

검토 항목

오탐 무시됨

확인된 보안 우려 사항 (2)

중간

scripts/migrate-v3-to-v4.sh:53-68

Unpinned Package Installation

The migration script runs npm install with latest packages, allowing network retrieval and dependency lifecycle scripts. Execution changes the target project's dependency graph.

The script directly installs latest Tailwind packages without version pinning, lockfile enforcement, or lifecycle-script restrictions.

중간

scripts/migrate-v3-to-v4.sh:72-146

Broad In-Place Project Rewrites

The script recursively rewrites matching source files, removes temporary backups, and deletes tailwind.config.js. It lacks a dry run, scope exclusions, and confirmation.

The find, sed, and rm operations clearly mutate the selected project without preserving backups for every changed source file.

위험 요인

🔑 환경 변수 (2)

referenes/performance-tuning.md:201 referenes/performance-tuning.md:201

⚙️ 외부 명령어 (50)

scripts/migrate-v3-to-v4.sh:87 scripts/migrate-v3-to-v4.sh:137 scripts/migrate-v3-to-v4.sh:1 SKILL.md:29 SKILL.md:31 SKILL.md:43-46 SKILL.md:46-61 SKILL.md:61-62 SKILL.md:62 SKILL.md:72-73 SKILL.md:73-89 SKILL.md:89-95 SKILL.md:95-98 SKILL.md:98-101 SKILL.md:101 SKILL.md:102 SKILL.md:103 SKILL.md:106 SKILL.md:107 SKILL.md:108 SKILL.md:109 SKILL.md:118-128 SKILL.md:128-142 SKILL.md:142-159 SKILL.md:159-162 SKILL.md:162-173 SKILL.md:173-176 SKILL.md:176 SKILL.md:177 SKILL.md:178 SKILL.md:199-204 SKILL.md:204-211 SKILL.md:211-216 SKILL.md:216-234 SKILL.md:234-244 SKILL.md:244-248 SKILL.md:248-258 SKILL.md:258-262 SKILL.md:262-272 SKILL.md:272-278 SKILL.md:278-280 SKILL.md:280-281 SKILL.md:281-284 SKILL.md:284 SKILL.md:285-289 SKILL.md:289-290 SKILL.md:290 SKILL.md:291 SKILL.md:293-294 SKILL.md:294-295

📁 파일 시스템 접근 (27)

🌐 네트워크 접근 (4)

SKILL.md:365 SKILL.md:366 SKILL.md:367 SKILL.md:368

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/calel33-tailwind-css-v4-mastery/security.svg)](https://skillstore.io/skills/calel33-tailwind-css-v4-mastery?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/calel33-tailwind-css-v4-mastery?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/calel33-tailwind-css-v4-mastery/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/calel33-tailwind-css-v4-mastery.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

Calel33. (2026). Tailwind CSS V4 Mastery security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10

BibTeX 인용

@techreport{calel33-calel33-tailwind-css-v4-mastery-2026,
  author = {Calel33},
  title = {Tailwind CSS V4 Mastery security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "Tailwind CSS V4 Mastery security audit report (audit version 10)"
version: "1.0.0"
type: report
authors:
  - name: "Calel33"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/calel33-tailwind-css-v4-mastery/audits/10"
identifiers:
  - type: other
    value: "skillstore:calel33-tailwind-css-v4-mastery:audit:10"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

100

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

기존 앱 마이그레이션

Tailwind v3에서 v4로의 업그레이드를 계획하고, 호환성이 깨지는 변경 사항을 식별하며, 검증 단계를 정의합니다.

디자인 시스템 구축

CSS-first 테마 변수, 컴포넌트 규칙, 브랜드 인식 스타일링 패턴을 만듭니다.

빌드 성능 개선

적절한 Tailwind V4 통합 방식을 선택하고 빌드, reload, CSS 크기 개선 사항을 측정합니다.

이 프롬프트를 사용해 보세요

Tailwind V4 기본 사항 설명

내 프로젝트에 가장 중요한 Tailwind CSS V4 변경 사항을 설명해 주세요. CSS-first 구성, 브라우저 요구 사항, 일반적인 마이그레이션 위험을 다뤄 주세요.

마이그레이션 계획

Tailwind v3에서 v4로의 마이그레이션을 계획하도록 도와주세요. 단계를 제시하기 전에 내 빌드 도구, 사용자 지정 config, 브라우저 대상, 컴포넌트에 대해 질문해 주세요.

테마 시스템 설계

컴포넌트 라이브러리를 위한 Tailwind CSS V4 테마 시스템을 설계해 주세요. 변수 전략, 컴포넌트 명명, dark mode, 검증 단계를 포함해 주세요.

프로덕션 빌드 최적화

내 Tailwind CSS V4 성능 설정을 감사해 주세요. Vite, PostCSS, CLI 선택지를 비교한 뒤 측정 및 최적화 단계를 제안해 주세요.

모범 사례

각 마이그레이션은 사용자 지정 config, 브라우저 대상, 고위험 컴포넌트의 인벤토리로 시작하세요.
Tailwind V4 테마 변수는 작고 명확하게 유지하며 CSS에 문서화하세요.
테두리, ring, 그림자, 둥근 모서리, 불투명도 대체에 대한 시각적 변경 사항을 테스트하세요.

피하기

Tailwind v3 JavaScript config가 V4 프로젝트를 제어한다고 가정하지 마세요.
파일 편집 및 패키지 설치 내용을 검토하지 않고 마이그레이션 스크립트를 실행하지 마세요.
기준 측정값을 측정하기 전에 빌드 성능을 최적화하지 마세요.

자주 묻는 질문

이 스킬은 Tailwind v3를 지원하나요?

Tailwind CSS V4에 중점을 둡니다. v3에서의 마이그레이션을 설명할 수는 있지만, 완전한 v3 레퍼런스는 아닙니다.

마이그레이션을 자동으로 실행할 수 있나요?

패키지에는 셸 스크립트가 포함되어 있지만, 사용자는 실행하기 전에 이를 검토하고 브랜치에서 테스트해야 합니다.

디자인 시스템에도 도움이 되나요?

예. CSS 변수, 컴포넌트 레이어, 테마 구조, dark mode, 멀티브랜드 패턴을 다룹니다.

성능 조언도 포함되어 있나요?

예. plugin 선택, Oxide 동작, 빌드 측정, 일반적인 성능 함정을 설명합니다.

어떤 AI 도구에서 사용할 수 있나요?

보고서에는 Claude, Codex, Claude Code 지원이 명시되어 있습니다.

마이그레이션 후 사용자는 무엇을 확인해야 하나요?

사용자는 브라우저 대상, 시각적 변경 사항, 제거된 유틸리티, 테마 변수, 프로덕션 빌드 출력을 확인해야 합니다.

개발자 세부 정보

작성자

Calel33

라이선스

MIT

작성자 버전

v1.0.0

Skillstore 리비전

리포지토리

https://github.com/Calel33/my-flash-ui-app--1-/tree/main/skills/tailwindv4

참조

67e6747f5b57a33ea8c62a0043d8f2ef310189ab

유지보수 최신성

2026. 7. 18.

사용량

15 다운로드 · 197 조회

파일 구조

📄 FILE_MANIFEST.txt

📄 README.md

📁 referenes/

📄 breaking-changes.md

📄 configuration-guide.md

📄 performance-tuning.md

📄 tailwind-v4-quick-reference.md

📁 scripts/

📄 migrate-v3-to-v4.sh

React 및 Next.js 성능 최적화

작성자 vercel-labs

React 및 Next.js 앱은 워터폴, 큰 번들, 피할 수 있는 재렌더링으로 인해 속도가 저하되는 경우가 많습니다. 이 스킬은 에이전트에게 성능 중심 변경을 더 안전하게 수행하기 위한 구체적인 규칙을 제공합니다.

코딩 및 개발 보기

Tailwind CSS V4 Mastery

내 에이전트로 설치

에이전트가 읽기 쉬운 리소스

테스트해 보기

보안 감사

확인된 보안 우려 사항 (2)

위험 요인

보고서 링크 복사

Markdown 배지

HTML 배지

임베드 카드

APA 인용

BibTeX 인용

CITATION.cff

Skillstore 점수

만들 수 있는 것

기존 앱 마이그레이션

디자인 시스템 구축

빌드 성능 개선

이 프롬프트를 사용해 보세요

모범 사례

피하기

자주 묻는 질문

개발자 세부 정보

Calel33의 다른 스킬

exa-research

graphite-cli

Next.js 16 Launchpad

react-19

관련 스킬

vercel-react-view-transitions

react-email

vue-best-practices

vue-options-api-best-practices

senior-frontend

vercel-react-best-practices