IDE 기능 가이드

<!-- Hover over any class to see full CSS output -->
<div class="df jcc aic gap2rem p2rem bg0A0A12 br12px sm-fdc">
  <p class="fs16px c71717A lh1-7 hover-cFFFFFF">Text</p>
</div>

<!-- Hover over 'class' keyword to see combined CSS -->
<!--        ↑ shows all classes' CSS combined -->

<!-- Shorthand override detection -->
<div class="p20px pl10px">
  <!-- Hover shows:
    padding-top: 20px
    padding-right: 20px
    padding-bottom: 20px
    padding-left: 10px  ← overridden by pl10px
  -->
</div>

<!-- Triggers in all these attribute types -->
<div class="...">         <!-- HTML class -->
<div className="...">     <!-- React JSX -->
<div :class="'...'">      <!-- Vue binding -->

<!-- After typing "df", flex-related classes are boosted -->
<div class="df |">
  <!-- Top suggestions: jcc, jcsb, aic, fdc, fww, gap... -->

<!-- Already used class won't appear again -->
<div class="df jcc |">
  <!-- jcc is excluded from suggestions -->

<!-- HEX colors show inline swatches -->
<div class="bg6366F1 cFFFFFF bc333333">

<!-- RGBA colors also supported -->
<div class="bg0-0-0-50 c255-255-255-80">

<!-- Works with pseudo-classes and media queries -->
<div class="hover-bgFF0000 sm-bg333333">

<!-- Border shorthand colors -->
<div class="b2pxsolid6366F1">

<!-- Invalid class: yellow underline + suggestion -->
<div class="df jc gap2rem">
  <!--           ↑↑
    "jc" is invalid
    Suggestion: jcc, jcsb, jcfs, jcfe, jcsa, jcse
  -->
</div>

<!-- Conflict detection (same media+pseudo) -->
<div class="w100px w200px">
  <!--  ⚠ conflict: both target width in same context -->
</div>

<!-- Different context = no conflict -->
<div class="w100px sm-w200px">
  <!--  ✓ OK: different media queries -->
</div>

<!-- Before: "jc" has yellow underline -->
<div class="df jc aic">

<!-- Ctrl+. on "jc" shows: -->
<!--   → Replace with "jcc"  (auto-correct) -->
<!--   → Replace with "jcsb" (similar) -->
<!--   → Delete "jc"         (remove) -->

<!-- After applying fix: -->
<div class="df jcc aic">

{
    "tokens": {
        "colors": {
            "primary": "6366F1",
            "danger": "EF4444",
            "text": "333333"
        },
        "spacing": [4, 8, 12, 16, 20, 24, 32, 40, 48],
        "fontSize": [12, 14, 16, 18, 20, 24, 32],
        "borderRadius": [4, 8, 12, 16, 50],
        "fontWeight": [400, 500, 600, 700]
    },
    "strict": false
}

<!-- With strict: true and spacing tokens [4, 8, 12, 16, 20, 24, 32] -->

<!-- ✓ Token value — no warning -->
<div class="gap16px p2rem mt2-4rem">

<!-- ⚠ Non-token value — warning + Quick Fix -->
<div class="gap15px p17px mt2-3rem">
<!--  gap15px: closest token → gap16px
      p17px: closest token → p16px
      mt2-3rem: closest token → mt2-4rem -->

:root {
    --primary: #6366F1;
    --surface: #111118;
    --text: #FAFAFA;
    --border: #1E1E2E;
    --accent: #38BDF8;
}

<!-- Type "bg--" to see variable suggestions from your project -->
<div class="bg--surface c--text b1pxsolid--border">
  <h1 class="c--primary">Title</h1>
  <a class="c--accent hover-c--primary">Link</a>
</div>

<!-- In the editor, decorations appear at the end of class attributes -->

<div class="df jcc aic">
<!-- ↑ shows: /* display | justify-content | align-items */  -->

<div class="bg6366F1 cFFFFFF p2rem br8px">
<!-- ↑ shows: /* background-color | color | padding | border-radius */  -->

<div class="w100p maxw120rem mxa">
<!-- ↑ shows: /* width | max-width | margin-left | margin-right */  -->