<div class="tabs_content">tabs_content without clearfix
  <div class="tab_item">tab_item 1</div>
  <div class="tab_item">tab_item 2</div>
  <div class="tab_item">tab_item 3</div>
  <div class="tab_item">tab_item 4</div>
</div>

<div class="tabs_content">tabs_content with 3 tab_item and clearfix
  <div class="tab_item">tab_item 1</div>
  <div class="tab_item">tab_item 2</div>
  <div class="tab_item">tab_item 3</div>
  <div class="clearfix">clearfix</div>
</div>

<div class="tabs_content">tabs_content with 4 tab_item and clearfix
  <div class="tab_item">tab_item 1</div>
  <div class="tab_item">tab_item 2</div>
  <div class="tab_item">tab_item 3</div>
  <div class="tab_item">tab_item 4</div>
  <div class="clearfix">clearfix</div>
</div>

<div class="tabs_content">tabs_content with 3 tab_item without clearfix
  <div class="tab_item">tab_item 1</div>
  <div class="tab_item">tab_item 2</div>
  <div class="tab_item">tab_item 3</div>
</div>

body {
  height: 100vh;
  display: flex;
  justify-content:center;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 0.8rem;
}

.tabs_content {
  margin:auto;
  border: 1px solid #0002;
  border-radius: .5rem;
  padding:1rem;
  background: #55f2;
  font-weight: 900;
  text-align: center;
}

.tab_item {
  padding:1rem;
  margin: .3rem 0;
  border: 1px solid #0003;
  border-radius: .2rem;
  background: #5e51;
  font-weight: 100;
}

.clearfix {
  // display:none;
  padding: 1rem;
  border: 1px solid #5553;
  border-radius: 0 0 .6rem .6rem;
  background: #fff8;
  color: #5558;
}

.last {
  background: #f55;
  color: #fff;
  border: 2px solid #333;
  font-weight: 900;
  font-size: .9rem;
}

const tabs = document.querySelectorAll(".tabs_content");

tabs.forEach(item => {
  let el = item.querySelectorAll(".tab_item"); 
  if (el.length === 3) {
      item.children[el.length - 1].classList.add("last");
  }
});