JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrapper">
  <p>demo</p>
</div>

SCSS

.wrapper {
  resize: horizontal;
  container-type: inline-size;
  margin: 50px;
  padding: 40px;
  background: #eeeeee;
  overflow: scroll;
  p {
    background: yellow;
  }
}
  
@container (min-width: 300px) {
  .wrapper p {
    background: red;
  }
}
  
@container (min-width: 400px) {
  .wrapper p {
    background: blue;
  }
}

@container (min-width: 500px) {
  .wrapper p {
    background: green;
  }
}