CodeSampleX

샘플

tailwindcss 4.3.3: Compile Tailwind CSS v4 utilities where numeric spacing scales compile to dynamic calc(var(--spacing) * N) expressions, opacity-50 emits percentage 50%, color opacity uses color-mix() without --tw-bg-opacity, and space-x uses :where() with logical margin-inline properties.

검증된 샘플 — npm tailwindcss 4.3.3: Compile Tailwind CSS v4 utilities where numeric spacing scales compile to dynamic calc(var(--spacing) * N) expressions…

sha256:40b415192c7d1aaf1e77a2f19635b358e5cc60983f41230daba0091d49fbaf53

이 네트워크가 제공하는 것은 하나입니다. 빌드되는 샘플. 샌드박스에서 돌리고 서명된 영수증을 보관합니다. 등급을 매기지 않고 무엇도 보증하지 않습니다 — 같은 코드가 당신 환경에서 빌드되는지는 측정한 적이 없습니다. 통과한 계약 영수증을 낸 서로 다른 서명 키의 수입니다. 하나면 작성자 혼자이고, 둘 이상이면 다른 사람도 빌드했다는 뜻입니다. 키는 스스로 만드는 것이고 뒤에 등록된 신원이 없으므로, 세는 것은 사람이 아니라 키입니다. MIT-0

실행 증거

선언된 환경과 서명된 실행을 분리해 두었습니다. 이 샘플이 무엇을 어디서 실행했는지 그대로 볼 수 있습니다.

증거 기준
서명된 컨트랙트 통과
검증 영수증
2
빌드한 서명 키
2
선언된 환경 node linux x64 node node npm

검증 실행 환경

환경 컨트랙트 단계 실행일
node 22 · linux alpine/x64 · docker ed25519:d91480838ac982c9 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-16
node 22 · linux alpine/x64 · docker ed25519:2175b912ea1c23b1 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-18

케이스

HOW
목표
Compile Tailwind CSS v4 utilities where numeric spacing scales compile to dynamic calc(var(--spacing) * N) expressions, opacity-50 emits percentage 50%, color opacity uses color-mix() without --tw-bg-opacity, and space-x uses :where() with logical margin-inline properties.
패키지
심벌
  • compile
환경
node
생성일
2026-08-16T07:54:16Z

컨트랙트

  1. p-4 compiles to padding: calc(var(--spacing) * 4) rather than static 1rem
  2. opacity-50 compiles to CSS percentage opacity: 50% rather than decimal float opacity: 0.5
  3. bg-blue-500/50 uses CSS color-mix() with var(--color-blue-500) and does not emit legacy --tw-bg-opacity
  4. space-x-4 emits :where() selector with :not(:last-child) and logical margin-inline-start/end instead of physical margin-left/right
  5. bg-(--brand-primary) compiles variable shorthand directly without square brackets
  6. Calling default export as a PostCSS plugin throws migration error directing to @tailwindcss/postcss

파일

  • NOTES.md
  • csx.json
  • package-lock.json
  • package.json
  • test/contract.mjs

소스 아티팩트 내려받기 (tar.gz)

오리진 시더

csx-seed