<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>I Love Tailwind. Sorry Not Sorry - DEV Community</title>
    
    <style>
/* ==========================================================================
   THE 418 CHALLENGE: THEME-AWARE RETRO EDITION
   ========================================================================== */

.articletag-418challenge {
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif !important;
  cursor: crosshair !important;
}

/* Destroy modern rounded corners and add brutal borders */
.articletag-418challenge .crayons-card,
.articletag-418challenge .crayons-article__main,
.articletag-418challenge .crayons-article__header {
  border-radius: 0 !important;
  margin-bottom: 2rem !important;
}

/* Typography specifics */
.articletag-418challenge h1,
.articletag-418challenge h2,
.articletag-418challenge h3 {
  text-transform: uppercase !important;
}

/* Fake <marquee> effect for the main article title */
.articletag-418challenge h1.fs-3xl {
  animation: retro-slide 5s linear infinite alternate;
  overflow: visible;
}

/* Spin those avatars */
.articletag-418challenge .crayons-article__header__meta img {
  border-radius: 0 !important; 
  animation: retro-spin 5s linear infinite;
}

/* Obnoxious tags */
.articletag-418challenge .crayons-tag {
  border-radius: 0 !important;
  font-weight: 900 !important;
  transform: rotate(-3deg);
  display: inline-block;
}
.articletag-418challenge .crayons-tag:nth-child(even) {
  transform: rotate(3deg);
}

/* --------------------------------------------------------------------------
   2. LIGHT THEME (Windows 95 / Office 97 Vibes)
   -------------------------------------------------------------------------- */
body:not(.dark-theme) .articletag-418challenge {
  background-color: #008080 !important; /* Win95 Teal Desktop */
}

body:not(.dark-theme) .articletag-418challenge .crayons-card,
body:not(.dark-theme) .articletag-418challenge .crayons-article__main,
body:not(.dark-theme) .articletag-418challenge .crayons-article__header {
  background-color: #c0c0c0 !important; /* Classic dialog gray */
  color: #000000 !important;
  border: 4px outset #ffffff !important;
  box-shadow: 8px 8px 0px #000000 !important;
}

body:not(.dark-theme) .articletag-418challenge h1,
body:not(.dark-theme) .articletag-418challenge h2,
body:not(.dark-theme) .articletag-418challenge h3 {
  color: #ff0000 !important;
  text-shadow: 2px 2px 0px #ffff00 !important;
  border-bottom: 3px dashed #0000ff !important;
}

body:not(.dark-theme) .articletag-418challenge a,
body:not(.dark-theme) .articletag-418challenge .crayons-link {
  color: #0000ff !important; /* Standard unvisited blue */
  text-decoration: underline !important;
  font-weight: bold !important;
}

body:not(.dark-theme) .articletag-418challenge a:hover,
body:not(.dark-theme) .articletag-418challenge .crayons-link:hover {
  background-color: #ffff00 !important;
  color: #ff0000 !important;
}

body:not(.dark-theme) .articletag-418challenge .crayons-tag {
  background: #ffff00 !important;
  color: #ff0000 !important;
  border: 2px dotted #0000ff !important;
}

/* --------------------------------------------------------------------------
   3. DARK THEME (1999 Hacker / Deep GeoCities Vibes)
   -------------------------------------------------------------------------- */
body.dark-theme .articletag-418challenge {
  background-color: #000000 !important;
  /* Dumb CSS: A scrolling, eye-bleeding neon green hacker grid with CRT scanlines */
  background-image: 
    linear-gradient(transparent 50%, rgba(0, 255, 0, 0.25) 50%), 
    linear-gradient(90deg, rgba(0, 255, 0, 0.5) 1px, transparent 1px), 
    linear-gradient(rgba(0, 255, 0, 0.5) 1px, transparent 1px) !important;
  background-size: 100% 4px, 20px 20px, 20px 20px !important;
  animation: retro-pan 60s linear infinite !important;
}

body.dark-theme .articletag-418challenge .crayons-card,
body.dark-theme .articletag-418challenge .crayons-article__main,
body.dark-theme .articletag-418challenge .crayons-article__header {
  background-color: #111111 !important;
  color: #00ff00 !important; /* Terminal Green */
  border: 4px outset #555555 !important;
  box-shadow: 8px 8px 0px #ff00ff !important; /* Hot pink shadow */
}

body.dark-theme .articletag-418challenge h1,
body.dark-theme .articletag-418challenge h2,
body.dark-theme .articletag-418challenge h3 {
  color: #ff00ff !important; /* Magenta headers */
  text-shadow: 2px 2px 0px #00ffff !important; /* Cyan shadow */
  border-bottom: 3px dashed #00ff00 !important;
}

body.dark-theme .articletag-418challenge a,
body.dark-theme .articletag-418challenge .crayons-link {
  color: #00ffff !important; /* Cyan links */
  text-decoration: underline !important;
  font-weight: bold !important;
}

body.dark-theme .articletag-418challenge a:hover,
body.dark-theme .articletag-418challenge .crayons-link:hover {
  background-color: #ff00ff !important;
  color: #ffffff !important;
}

body.dark-theme .articletag-418challenge .crayons-tag {
  background: #000000 !important;
  color: #00ff00 !important;
  border: 2px dotted #ff00ff !important;
}

/* --------------------------------------------------------------------------
   4. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes retro-spin {
  100% { transform: rotate(360deg); }
}

@keyframes retro-slide {
  0% { transform: translateX(-2%); }
  100% { transform: translateX(2%); }
}

@keyframes retro-pan {
  0% { background-position: 0 0, 0 0, 0 0; }
  /* Numbers must be multiples of the background-size (4px and 20px) to loop perfectly */
  100% { background-position: 0 100px, 40px 40px, 40px 40px; }
}

/* --------------------------------------------------------------------------
   5. BONUS: CAUTION TAPE REACTION BAR
   -------------------------------------------------------------------------- */
.articletag-418challenge .crayons-article-actions {
  background: repeating-linear-gradient(
    45deg,
    #ffff00,
    #ffff00 10px,
    #000000 10px,
    #000000 20px
  ) !important;
  border: 4px solid #ff0000 !important;
  border-radius: 0 !important;
}

.articletag-418challenge .crayons-article-actions button {
  background:black;
  color: #ff00ff !important;
}

.articletag-418challenge .crayons-article-actions .crayons-reaction__count {
    color: #ff00ff !important;
    font-weight: bold !important;
}

.articletag-418challenge .crayons-icon:not(.crayons-icon--default) * {
    fill: #ffff00 !important;
}

.articletag-418challenge .c-embed .crayons-btn--primary {
  color: #00ff00 !important;
}

.articletag-418challenge .popover-billboard {
margin-bottom: 0 !important;
}

.crayons-story__contentpreview .ltag__link--embedded {
margin-top: 0 !important;
}

.subscription-icon {
    max-height: 16px !important;
    display: inline-block !important;
}

@media screen and (min-width: 950px) {
    .event-show-layout {
        margin-top: 24px !important;
    }
}

@media screen and (max-width: 949px) {
    .event-show-layout {
        padding: 11px !important;
    }
}


</style>
  </head>
<div id="page-content" class="wrapper stories stories-show articletag-css articletag-tailwindcss articletag-frontend articletag-discuss articleuser-3535771" data-current-page="stories-show">
  <div id="page-content-inner" data-internal-nav="true" data-viewable-id="" data-viewable-type="">
    <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div>

    
<style>
  .html-variant-wrapper { display: none}
</style>



<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js"
        integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy"
        crossorigin="anonymous" defer></script>

  <script src="https://assets.dev.to/assets/webShare-0686f0b9ac40589694ef6ae6a6202c44119bc781c254f6cf6d52d8a008461156.js" defer="defer"></script>
<script src="https://assets.dev.to/assets/articlePage-ed23d70916aed9a7fec41f94e64aac17438d3210c1bb1d6fceace80f15445213.js" defer="defer"></script>
<script src="https://assets.dev.to/assets/commentDropdowns-7a28d130e5b78d38b30a9495a964003a66bd64fa455fc70b766d69cf06b9ba24.js" defer="defer"></script>


  <!-- You may be seeing the canonical URL in the body for human inspection -->
  <!-- This is because of navigation via InstantClick, instantclick.io -->
  <!-- However, the crawled version of the page has the canonical in the head. -->
  <!-- This is confirmed by the canonical url inspector. See https://github.com/forem/forem/issues/9509#issuecomment-732259221. -->
  <link rel="canonical" href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh" />
  <meta name="description" content="I’m going on a short vacation this week, so this post is coming out a bit earlier than usual. I... Tagged with css, tailwindcss, frontend, discuss.">
  <meta name="keywords" content="css, tailwindcss, frontend, discuss, software, coding, development, engineering, inclusive, community">

  <div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
    <aside class="crayons-layout__sidebar-left" aria-label="Article actions">
      <script>
  if (/Twitter for (iPhone|iPad|Android)/i.test(navigator.userAgent)) {
    document.documentElement.classList.add('is-twitter-in-app');
  }
</script>

  <div class="crayons-article-actions print-hidden">
    <div class="crayons-article-actions__inner">

      
<div class="reaction-drawer__outer hoverdown" style="">
  <button
    id="reaction-drawer-trigger"
    aria-label="reaction-drawer-trigger"
    aria-pressed="false"
    class="hoverdown-trigger crayons-reaction pseudo-reaction crayons-tooltip__activator relative">
      <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction--like crayons-reaction__icon--inactive" style="width: 40px; height: 40px">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon">
    <g clip-path="url(#clip0_988_3276)">
        <path d="M19 14V17H22V19H18.999L19 22H17L16.999 19H14V17H17V14H19ZM20.243 4.75698C22.505 7.02498 22.583 10.637 20.479 12.992L19.059 11.574C20.39 10.05 20.32 7.65998 18.827 6.16998C17.324 4.67098 14.907 4.60698 13.337 6.01698L12.002 7.21498L10.666 6.01798C9.09103 4.60598 6.67503 4.66798 5.17203 6.17198C3.68203 7.66198 3.60703 10.047 4.98003 11.623L13.412 20.069L12 21.485L3.52003 12.993C1.41603 10.637 1.49503 7.01898 3.75603 4.75698C6.02103 2.49298 9.64403 2.41698 12 4.52898C14.349 2.41998 17.979 2.48998 20.242 4.75698H20.243Z" fill="#525252"></path>
    </g>
    <defs>
        <clipPath id="clip0_988_3276">
        <rect width="24" height="24" fill="white"></rect>
        </clipPath>
    </defs>
</svg>

      </span>
      <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--active" style="width: 40px; height: 40px">
        <img aria_hidden="true" height="24" width="24" src="https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg" />
      </span>
      <span class="crayons-reaction__count" id="reaction_total_count">
        <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
      </span>
      <span class="crayons-tooltip__content">
        Add reaction
      </span>
  </button>

  <div class="reaction-drawer" aria-expanded="false">
    <div class="reaction-drawer__container">
        <button
  id="reaction-butt-like"
  name="Like"
  aria-label="Like"
  aria-pressed="false"
  class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2"
  data-category="like">
    <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0">
      <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" />
    </span>
    <span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
</button>

        <button
  id="reaction-butt-unicorn"
  name="Unicorn"
  aria-label="Unicorn"
  aria-pressed="false"
  class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2"
  data-category="unicorn">
    <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0">
      <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" />
    </span>
    <span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Unicorn
    </span>
</button>

        <button
  id="reaction-butt-exploding_head"
  name="Exploding Head"
  aria-label="Exploding Head"
  aria-pressed="false"
  class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2"
  data-category="exploding_head">
    <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0">
      <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" />
    </span>
    <span class="crayons-reaction__count" id="reaction-number-exploding_head"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Exploding Head
    </span>
</button>

        <button
  id="reaction-butt-raised_hands"
  name="Raised Hands"
  aria-label="Raised Hands"
  aria-pressed="false"
  class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2"
  data-category="raised_hands">
    <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0">
      <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" />
    </span>
    <span class="crayons-reaction__count" id="reaction-number-raised_hands"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Raised Hands
    </span>
</button>

        <button
  id="reaction-butt-fire"
  name="Fire"
  aria-label="Fire"
  aria-pressed="false"
  class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2"
  data-category="fire">
    <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0">
      <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" />
    </span>
    <span class="crayons-reaction__count" id="reaction-number-fire"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Fire
    </span>
</button>

    </div>
  </div>
</div>

<button
  id="reaction-butt-comment"
  aria-label="Jump to Comments"
  aria-pressed="false"
  class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative"
  data-category="comment">
    <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
    <path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path>
</svg>

    </span>
    <span class="crayons-reaction__count" id="reaction-number-comment" data-count="99">
      <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
    </span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Jump to Comments
    </span>
</button>

<button
  id="reaction-butt-readinglist"
  aria-label="Add to reading list"
  aria-pressed="false"
  class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative"
  data-category="readinglist">
    <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
    <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
</svg>

    </span>
    <span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      Save
    </span>
</button>


<button
  id="reaction-butt-boost"
  aria-label="Boost"
  aria-pressed="false"
  class="crayons-reaction crayons-reaction--boost crayons-tooltip__activator relative">
    <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true" class="crayons-icon" width="24" height="24">
  <path transform="translate(24,0) scale(-1,1)" d="M6 4H21C21.5523 4 22 4.44772 22 5V12H20V6H6V9L1 5L6 1V4ZM18 20H3C2.44772 20 2 19.5523 2 19V12H4V18H18V15L23 19L18 23V20Z"></path>
</svg>

    </span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Boost
    </span>
</button>


      <div class="only-sidebar-menu-item">
        <div id="mod-actions-menu-btn-area" class="print-hidden trusted-visible-block align-center">
        </div>
      </div>
      <div class="align-center m:relative">
        <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atm2xwop1i93nx9rfex0u2bnfcbfdztn" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="atm2xwop1i93nx9rfex0u2bnfcbfdztn">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>

        </button>

        <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
          <div>
            <button
              id="copy-post-url-button"
              class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
              data-postUrl="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh">
              <span class="fw-bold">Copy link</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="a6dv9xknoww4i0ucgeg0dg5agbi9lh4c" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a6dv9xknoww4i0ucgeg0dg5agbi9lh4c">Copy link</title>
    <path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path>
</svg>

            </button>
            <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div>
          </div>

          <div class="Desktop-only">
            <a
              target="_blank"
              class="crayons-link crayons-link--block"
              rel="noopener"
              href='https://twitter.com/intent/tweet?text=%22I%20Love%20Tailwind.%20Sorry%20Not%20Sorry%22%20by%20%40SylwiaLask8977%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fsylwia-lask%2Fi-love-tailwind-sorry-not-sorry-5cfh'>
              Share to X
            </a>
            <a
              target="_blank"
              class="crayons-link crayons-link--block"
              rel="noopener"
              href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fsylwia-lask%2Fi-love-tailwind-sorry-not-sorry-5cfh&title=I%20Love%20Tailwind.%20Sorry%20Not%20Sorry&summary=I%E2%80%99m%20going%20on%20a%20short%20vacation%20this%20week%2C%20so%20this%20post%20is%20coming%20out%20a%20bit%20earlier%20than%20usual.%20I...&source=DEV%20Community">
              Share to LinkedIn
            </a>
            <a
              target="_blank"
              class="crayons-link crayons-link--block"
              rel="noopener"
              href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fsylwia-lask%2Fi-love-tailwind-sorry-not-sorry-5cfh">
              Share to Facebook
            </a>
            <a
              target="_blank"
              class="crayons-link crayons-link--block"
              rel="noopener"
              href="https://s2f.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fsylwia-lask%2Fi-love-tailwind-sorry-not-sorry-5cfh">
              Share to Mastodon
            </a>
          </div>

          <web-share-wrapper shareurl="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh" sharetitle="I Love Tailwind. Sorry Not Sorry" sharetext="I’m going on a short vacation this week, so this post is coming out a bit earlier than usual. I..." template="web-share-button">
          </web-share-wrapper>
          <template id="web-share-button">
            <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a>
          </template>

          <a href="/report-abuse" class="crayons-link crayons-link--block" id="ReportButtonAuthor">Report Abuse</a>
        </div>
      </div>
    </div>
  </div>

    </aside>

    <main id="main-content" class="crayons-layout__content grid gap-4">
      <div class="article-wrapper">


        <article class="crayons-card crayons-article mb-4"
          id="article-show-container"
          data-article-id="3605102"
          data-article-slug="i-love-tailwind-sorry-not-sorry-5cfh"
          data-author-id="3535771"
          data-author-name="Sylwia Laskowska"
          data-author-username="sylwia-lask"
          data-co-author-ids=""
          data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh"
          data-pin-path="/stories/feed/pinned_article"
          data-pinned-article-id=""
          data-published="true"
          data-scheduled="false"
          lang=en
           >
          <script>
            try {
              if(localStorage) {
                let currentUser = localStorage.getItem('current_user');

                if (currentUser) {
                  currentUser = JSON.parse(currentUser);
                  if (currentUser.id === 3535771) {
                    document.getElementById('article-show-container').classList.add('current-user-is-article-author');
                  }
                }
              }
            } catch (e) {
              console.error(e);
            }
          </script>
          <header class="crayons-article__header" id="main-title">
              <a class="crayons-article__cover" href="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fli5mqjfv32ln8lmmjh5f.png">
                <img
                  src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fli5mqjfv32ln8lmmjh5f.png"
                  style="aspect-ratio: auto 1000 / 420;"
                  width="1000" height="420"
                  class="crayons-article__cover__image" alt="Cover image for I Love Tailwind. Sorry Not Sorry">
              </a>

            <div class="crayons-article__header__meta">
              <div class="flex s:items-start flex-col s:flex-row">
                <div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div>
                <div class="flex flex-1 mb-5 items-start">
                  <div class="relative">
                      <a href="/sylwia-lask"><img class="radius-full align-middle" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" width="40" height="40" alt="Sylwia Laskowska" /></a>
                  </div>
                  <div class="pl-3 flex-1">
                    <a href="/sylwia-lask" class="crayons-link fw-bold">Sylwia Laskowska</a>
                    
                    <p class="fs-xs color-base-60">
                        Posted on <time datetime="2026-05-04T08:54:09Z" class="date-no-year">May 4</time>


                    </p>
                  </div>
                </div>
              </div>

              <div class="multiple_reactions_engagement">
    <button
      class="reaction_engagement_like hidden crayons-reaction crayons-reaction--like"
      data-category="like"
      aria-label="Like"
      type="button"
    ><span class="crayons-reaction__icon crayons-reaction__icon--inactive p-1"><img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24" /></span>
      <span class="crayons-reaction__count" id="reaction_engagement_like_count">&nbsp;</span>
    </button>    <button
      class="reaction_engagement_unicorn hidden crayons-reaction crayons-reaction--unicorn"
      data-category="unicorn"
      aria-label="Unicorn"
      type="button"
    ><span class="crayons-reaction__icon crayons-reaction__icon--inactive p-1"><img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24" /></span>
      <span class="crayons-reaction__count" id="reaction_engagement_unicorn_count">&nbsp;</span>
    </button>    <button
      class="reaction_engagement_exploding_head hidden crayons-reaction crayons-reaction--exploding_head"
      data-category="exploding_head"
      aria-label="Exploding Head"
      type="button"
    ><span class="crayons-reaction__icon crayons-reaction__icon--inactive p-1"><img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24" /></span>
      <span class="crayons-reaction__count" id="reaction_engagement_exploding_head_count">&nbsp;</span>
    </button>    <button
      class="reaction_engagement_raised_hands hidden crayons-reaction crayons-reaction--raised_hands"
      data-category="raised_hands"
      aria-label="Raised Hands"
      type="button"
    ><span class="crayons-reaction__icon crayons-reaction__icon--inactive p-1"><img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24" /></span>
      <span class="crayons-reaction__count" id="reaction_engagement_raised_hands_count">&nbsp;</span>
    </button>    <button
      class="reaction_engagement_fire hidden crayons-reaction crayons-reaction--fire"
      data-category="fire"
      aria-label="Fire"
      type="button"
    ><span class="crayons-reaction__icon crayons-reaction__icon--inactive p-1"><img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24" /></span>
      <span class="crayons-reaction__count" id="reaction_engagement_fire_count">&nbsp;</span>
    </button>
</div>


              <h1 class=" fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 medium">
                I Love Tailwind. Sorry Not Sorry
              </h1>
              
                  <div class="spec__tags flex flex-wrap">
                      <a class="crayons-tag   " style="
        --tag-bg: rgba(41, 101, 241, 0.10);
        --tag-prefix: #2965F1;
        --tag-bg-hover: rgba(41, 101, 241, 0.10);
        --tag-prefix-hover: #2965F1;
      " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a>
                      <a class="crayons-tag   " style="
        --tag-bg: rgba(0, 0, 0, 0.10);
        --tag-prefix: #000000;
        --tag-bg-hover: rgba(0, 0, 0, 0.10);
        --tag-prefix-hover: #000000;
      " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a>
                      <a class="crayons-tag   " style="
        --tag-bg: rgba(255, 51, 224, 0.10);
        --tag-prefix: #ff33e0;
        --tag-bg-hover: rgba(255, 51, 224, 0.10);
        --tag-prefix-hover: #ff33e0;
      " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a>
                      <a class="crayons-tag   " style="
        --tag-bg: rgba(113, 234, 139, 0.10);
        --tag-prefix: #71EA8B;
        --tag-bg-hover: rgba(113, 234, 139, 0.10);
        --tag-prefix-hover: #71EA8B;
      " href="/t/discuss"><span class="crayons-tag__prefix">#</span>discuss</a>
                  </div>
            </div>
          </header>

          <div class="crayons-article__main ">
              <div class="crayons-article__context-note">
                <p>A CSS veteran’s take on speed vs purity</p>


              </div>
            <div class="crayons-article__body text-styles spec__body" data-article-id="3605102" id="article-body">
                <p>I’m going on a short vacation this week, so this post is coming out a bit earlier than usual. I actually had a different, more “useful” topic in mind — something educational, something responsible. But then I came across this fascinating article: <a href="https://dev.to/freshcaffeine/i-dont-like-tailwind-sorry-not-sorry-50b5">I don’t like Tailwind. Sorry not sorry</a> written by <a class="mentioned-user" href="https://dev.to/freshcaffeine">@freshcaffeine</a> , and I couldn’t get it out of my head.</p>

<p>So I decided to write a response instead.<br>
Useful content will have to wait 😄</p>

<p>I actually agree with many of the points in the original article — especially around learning fundamentals. I just have a different perspective shaped by a different kind of work.</p>

<p>Let me start with a small disclaimer: I’ve written a lot — and I mean <em>a lot</em> — of handcrafted CSS in my life. Entire design systems. In fact, I got my first job in IT mostly thanks to my CSS skills, because my programming skills at the time were… let’s say “a work in progress” 😉</p>

<p>There was even a period when I made extra money building simple websites for clients. People literally paid me for delivering clean, aesthetic CSS. </p>

<p>So in theory, I should be the first person to defend handcrafted CSS and criticize Tailwind for polluting HTML.</p>

<p>And yet… I’m not.</p>

<p>Despite all its flaws, I love Tailwind. Deeply, sincerely, and yes — unapologetically.<br>
Because it gives us something incredibly valuable in real-world development: <strong>speed and predictability</strong>.</p>


<hr>

<h2>
  <a name="pumpkin-pie-homemade-or-storebought" href="#pumpkin-pie-homemade-or-storebought">
  </a>
  Pumpkin pie: homemade or store-bought?
</h2>

<p>The author of the original article uses a pumpkin pie analogy. Handcrafted CSS is like baking a pie from scratch — roasting the pumpkin, making the dough, carefully preparing everything with love. Tailwind, on the other hand, is like using pre-made ingredients. You open a can, use ready-made crust, assemble everything quickly. Sure, it’s still a pie, but not quite like the one your grandma would make.</p>

<p>It’s a nice analogy. It really is.</p>

<p>The problem is — most businesses are not running artisan bakeries.<br>
They’re running factories.<br>
And those factories aren’t even in the pie business.</p>

<p>In reality, business rarely needs a handcrafted pie. Honestly, it often doesn’t even need a “semi-handmade” one. What it really wants is mass production: something that’s sweet enough, looks good enough, doesn’t cause stomachache, and can be delivered fast. If you can add a small decorative touch on top to make it feel slightly more unique — great. But even that is optional.</p>

<p>And there’s no point being offended by this. We can absolutely build beautiful, handcrafted CSS when we want to. But most of the time, businesses choose speed — because they are selling a product, not CSS.</p>

<p>I’m not building a piece of art.<br>
I’m building software that five teams won’t break next week.</p>


<hr>

<h2>
  <a name="repetition-isnt-always-a-bug" href="#repetition-isnt-always-a-bug">
  </a>
  Repetition isn’t always a bug
</h2>

<p>One of the arguments against Tailwind is that everything starts to look the same. And honestly — that’s true.</p>

<p>But here’s the thing: very often, that’s exactly what the client wants.</p>

<p>Back when I was building websites for clients, the happiest ones were those who got three templates to choose from and a bit of customization on top. They didn’t want a masterpiece. They wanted something clean, modern, and effective — something that sells.</p>

<p>Tailwind is often simply <em>good enough</em> for that.</p>

<p>And in many cases, <strong>good enough delivered fast beats perfect delivered late</strong>.</p>


<hr>

<h2>
  <a name="messy-html" href="#messy-html">
  </a>
  “Messy HTML”
</h2>

<p>Yes — if you just throw classes around randomly, your HTML will look messy.</p>

<p>But let’s be honest: if we’re “craft-oriented developers,” we can organize our components properly, right? In real projects, that long Tailwind class list usually lives inside a component anyway. You don’t copy-paste that everywhere.</p>

<p>Also:</p>

<p>HTML is “noisy”? Sure.<br>
But at least the rules are right next to what they affect.</p>

<p>I’ve seen plenty of “beautiful” CSS codebases where styling logic was scattered across multiple files, overridden in unexpected places, and impossible to trace without jumping through five layers of abstraction. I’ll take explicit over “hidden magic” any day.</p>


<hr>

<h2>
  <a name="junior-developers-and-not-learning-css" href="#junior-developers-and-not-learning-css">
  </a>
  Junior developers and “not learning CSS”
</h2>

<p>I actually agree with one part: Tailwind doesn’t replace learning CSS. I even wrote about that in my article: <a href="https://dev.to/sylwia-lask/is-learning-css-a-waste-of-time-in-2026-nj3">Is Learning CSS a Waste of Time in 2026?</a></p>

<p>But the argument that Tailwind is somehow “hurting juniors” always makes me smile a bit.</p>

<p>On one hand, we have mass layoffs in tech and endless discussions about AI replacing developers. On the other, we worry that juniors might not learn CSS because things are… too easy?</p>

<p>Let’s be real for a second.</p>

<p>“Junior” doesn’t mean “child.” These are adults. If someone wants to grow as a frontend developer, learning CSS is part of the job. It’s not some hidden, mystical knowledge. And we don’t need to choose our entire tech stack based on making things harder just so people are forced to learn.</p>

<p>Also — I’ve seen plenty of experienced developers who still struggle with CSS after years in the industry. At that point, I’d honestly rather have them use Tailwind and ship something consistent than fight yet another specificity war.</p>

<p>Tailwind doesn’t create bad developers.<br>
Lack of fundamentals does.</p>


<hr>

<h2>
  <a name="about-craft" href="#about-craft">
  </a>
  About “craft”
</h2>

<p>There’s this idea that writing CSS is a form of craftsmanship — something closer to art, something deeply satisfying.</p>

<p>And yes, it can be.</p>

<p>But the last few years — especially with the rise of LLMs — have made it pretty clear where our “craft” actually sits in the bigger picture. In most business applications, CSS is not art. It’s not painting. It’s not sculpture.</p>

<p>It’s closer to baking pumpkin pies at scale.</p>

<p>There will always be places where handcrafted work matters — just like there are bakeries selling beautiful, artisanal cakes. But if you’re selling paper clips and organizing a corporate event, you’re probably not baking everything from scratch. You’re ordering something decent that gets the job done.</p>

<p>And that’s fine.</p>


<hr>

<h2>
  <a name="why-i-actually-like-tailwind" href="#why-i-actually-like-tailwind">
  </a>
  Why I actually like Tailwind
</h2>

<p>Let’s be clear — Tailwind is not perfect. It has trade-offs.</p>

<p>But it solves very real problems.</p>

<p>It gives you:</p>

<ul>
<li>
<strong>speed</strong> — you don’t context-switch between files every 10 seconds</li>
<li>
<strong>predictability</strong> — no guessing what some class name means</li>
<li>
<strong>consistency</strong> — especially across large teams</li>
<li>
<strong>simple selectors</strong> — which are often easier for browsers to process than deeply nested CSS</li>
<li>
<strong>less dead code</strong> — thanks to modern build setups</li>
</ul>

<p>And most importantly:</p>

<p>It removes ambiguity.</p>

<p>The real problem in large codebases isn’t that CSS isn’t “beautiful” enough.<br>
It’s that it becomes inconsistent, fragile, and slow to evolve.</p>

<p>I’ve never seen a project fail because CSS wasn’t handcrafted enough.<br>
I’ve seen plenty fail because things were inconsistent and took forever to build.</p>


<hr>

<h2>
  <a name="when-handcrafted-css-still-makes-sense" href="#when-handcrafted-css-still-makes-sense">
  </a>
  When handcrafted CSS still makes sense
</h2>

<p>I don’t think Tailwind (or something similar) should replace handcrafted CSS everywhere.</p>

<p>There are cases where writing CSS by hand is not just useful — it’s the better choice.</p>

<p><strong>Design systems and shared UI foundations</strong> — where you need full control and long-term consistency<br>
<strong>Highly custom or experimental UI</strong> — where utility classes start to fight you instead of helping<br>
<strong>Performance-critical interfaces</strong> — where you want precise control over what gets shipped<br>
<strong>Learning and understanding the fundamentals</strong> — because at some point, abstractions always leak</p>


<hr>

<h2>
  <a name="final-thoughts" href="#final-thoughts">
  </a>
  Final thoughts
</h2>

<p>Tailwind isn’t about replacing CSS.<br>
It’s about making frontend development survivable at scale.</p>

<p>And no — this post is not sponsored by Tailwind. (But if someone from Tailwind happens to read this… feel free to reach out 😄)</p>

<p>And what do you guys think? Are you Team Tailwind or more into 'craft' CSS? Or maybe something in between?</p>

<p>Thanks for reading! If you enjoyed this post, I'd love to have you follow me here on <a href="https://www.linkedin.com/in/sylwia-laskowska-5a8467131/" target="_blank" rel="noopener noreferrer">LinkedIn</a>. </p>


            </div>

              <div class="below-post-bb body-billboard-container" data-async-url="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/bmar11/post_body_bottom"></div>
          </div>
          <section id="comments" data-follow-button-container="true" data-updated-at="2026-05-06 08:41:23 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
    <header class="relative flex justify-between items-center mb-6">
      <div class="flex items-center">
        <h2 class="crayons-subtitle-1">
          Top comments <span class="js-comments-count" data-comments-count="99">(99)</span>
        </h2>
      </div>


      <div id="comment-subscription" class="print-hidden">
        <div class="crayons-btn-group">
          <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
        </div>
      </div>
    </header>
    <div id="billboard_delay_trigger"></div>
    <div
      id="comments-container"
      data-testid="comments-container"
      data-commentable-id="3605102"
      data-commentable-type="Article"
      data-has-recent-comment-activity="true">

        <div id="response-templates-data" class="hidden"></div>


<form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" />

  <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">

    <input value="3605102" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />
    <input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />
    

  <span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
    <img src="https://media2.dev.to/dynamic/image/width=256,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
  </span>
  <div class="comment-form__inner">
    <div class="comment-form__field" data-tracking-name="comment_form_textfield">
      <textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]">
</textarea>

    </div>

    <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
      <header class="mb-3">
        <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
        <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button>
      </header>

      <div class="personal-responses-container">
      </div>
      <div class="moderator-responses-container hidden">
      </div>

      <a target="_blank" rel="noopener nofollow" href="/settings/response-templates">
        Create template
      </a>
      <p>Templates let you quickly answer FAQs or store snippets for re-use.</p>
    </div>

    <div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>

    <div class="comment-form__buttons mb-4">
      <button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button>
      <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button>
      <a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a>
    </div>
  </div>

  <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
</form>


      <div class="comments" id="comment-trees-container">
              <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abt1mxep3gjhebvovpai6r9tymdeckgn" class="crayons-icon expanded"><title id="abt1mxep3gjhebvovpai6r9tymdeckgn">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7p8a8wwu18gq5lw82i6ewb07cgna1jn" class="crayons-icon collapsed"><title id="a7p8a8wwu18gq5lw82i6ewb07cgna1jn">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505070"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1505070"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gb8"
    data-comment-author-id="1002243"
    data-content-user-id="1002243">
    <a name="comment-37gb8" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/adamthedeveloper" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002243%2F84fa5f44-c4e1-4fec-934c-9fa687161e10.webp" alt="adamthedeveloper profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/adamthedeveloper" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Adam - The Developer
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505070" aria-controls="comment-profile-preview-content-1505070" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Adam - The Developer profile details">
      Adam - The Developer
      
    </button>
    <div id="comment-profile-preview-content-1505070" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/adamthedeveloper" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002243%2F84fa5f44-c4e1-4fec-934c-9fa687161e10.webp" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Adam - The Developer
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:1002243,&quot;name&quot;:&quot;Adam - The Developer&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Adam - The Developer" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    hey i&#39;m adam. i&#39;m a software engineer who&#39;s way too into backend, distributed systems, and hunting down edge cases for fun. also i play piano by ear and math&#39;s kinda fun
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:adaminiature@gmail.com">adaminiature@gmail.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Phnom Penh, Cambodia.
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              University Of Cambodia
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              origin/main
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Piper
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2023-01-05T08:13:57Z" class="date">Jan 5, 2023</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gb8" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T06:27:33Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505070" aria-controls="comment-dropdown-1505070" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asy2kom5i7zr6kzm9u7gxvs95v1h03rk" class="crayons-icon pointer-events-none"><title id="asy2kom5i7zr6kzm9u7gxvs95v1h03rk">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505070" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gb8" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Adam - The Developer&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="1002243" data-action="settings-button" data-path="https://dev.to/adamthedeveloper/comment/37gb8/settings" aria-label="Go to Adam - The Developer&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="1002243">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505070"
                data-comment-url="https://dev.to/adamthedeveloper/comment/37gb8"
                aria-label="Hide Adam - The Developer&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/adamthedeveloper/comment/37gb8/mod" aria-label="Moderate Adam - The Developer&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/adamthedeveloper/comment/37gb8" aria-label="Report Adam - The Developer&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I'll write another one: " What Is Tailwind? Sorry Not Sorry "</p>

<p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fufj1m71247wgumtvu100.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fufj1m71247wgumtvu100.png" alt=" " loading="lazy"></a></p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505070"
    data-comment-id="1505070"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="areb34y60yq1lr5wboc4r9knp1167l5t" class="crayons-icon reaction-icon not-reacted"><title id="areb34y60yq1lr5wboc4r9knp1167l5t">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="al2nusgk3ttktgfrnq5ds409z2iu87cv" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="al2nusgk3ttktgfrnq5ds409z2iu87cv">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">8</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505070"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gb8"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505070"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq9kel6mnbgfhebl182js7ewiat75977" class="crayons-icon reaction-icon not-reacted"><title id="aq9kel6mnbgfhebl182js7ewiat75977">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a60p6yrtehkbrzeepvpesxxst2e3t9u0" class="crayons-icon expanded"><title id="a60p6yrtehkbrzeepvpesxxst2e3t9u0">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aruu9ts231we8j31rs3e5pr5ptyggg2z" class="crayons-icon collapsed"><title id="aruu9ts231we8j31rs3e5pr5ptyggg2z">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505083"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505083"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gbl"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gbl" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505083" aria-controls="comment-profile-preview-content-1505083" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505083" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gbl" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T06:42:38Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505083" aria-controls="comment-dropdown-1505083" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2hsj7o06mkcredpi7gxq1nniz9a3x3x" class="crayons-icon pointer-events-none"><title id="a2hsj7o06mkcredpi7gxq1nniz9a3x3x">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505083" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gbl" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gbl/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505083"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gbl"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gbl/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gbl" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Hahahahaha I’m crying 😂</p>

<p>Do it! And then I’ll follow up with: “What is Google Search? Sorry not sorry” 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505083"
    data-comment-id="1505083"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akligjvug645lygpgvescm2i6e2zmf8s" class="crayons-icon reaction-icon not-reacted"><title id="akligjvug645lygpgvescm2i6e2zmf8s">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asvcoeaxqk7afonhy8luprdudo3v49l5" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asvcoeaxqk7afonhy8luprdudo3v49l5">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">4</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505083"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gbl"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505083"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="at1tsywoza75f0pm6xoalejqs6zx04mj" class="crayons-icon reaction-icon not-reacted"><title id="at1tsywoza75f0pm6xoalejqs6zx04mj">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acscwp11otuazhn2n2ut9tkuowr64th3" class="crayons-icon expanded"><title id="acscwp11otuazhn2n2ut9tkuowr64th3">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="apc5gim77lnxrciudrvnsu78efpvmpg0" class="crayons-icon collapsed"><title id="apc5gim77lnxrciudrvnsu78efpvmpg0">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505155"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505155"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gef"
    data-comment-author-id="2081107"
    data-content-user-id="2081107">
    <a name="comment-37gef" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/freshcaffeine" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2081107%2F2e2972d2-af5d-4853-b418-098e9c384f3d.png" alt="freshcaffeine profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/freshcaffeine" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Andy Robinson
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505155" aria-controls="comment-profile-preview-content-1505155" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Andy Robinson profile details">
      Andy Robinson
      
    </button>
    <div id="comment-profile-preview-content-1505155" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #206c8d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/freshcaffeine" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2081107%2F2e2972d2-af5d-4853-b418-098e9c384f3d.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Andy Robinson
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:2081107,&quot;name&quot;:&quot;Andy Robinson&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Andy Robinson" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Caffeine-fuelled software engineer, father, husband, analogue camera lover, former fork-lift driver. 
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Grimsby/London - UK
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              University of Plymouth
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Chief Nerd @FilmTailor AI | Software Engineer @Omnio
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2024-09-16T13:26:18Z" class="date">Sep 16, 2024</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gef" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:02:13Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505155" aria-controls="comment-dropdown-1505155" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5lbuk23s3kmmsrmkav9xe0pkkchvcry" class="crayons-icon pointer-events-none"><title id="a5lbuk23s3kmmsrmkav9xe0pkkchvcry">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505155" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gef" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Andy Robinson&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="2081107" data-action="settings-button" data-path="https://dev.to/freshcaffeine/comment/37gef/settings" aria-label="Go to Andy Robinson&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="2081107">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505155"
                data-comment-url="https://dev.to/freshcaffeine/comment/37gef"
                aria-label="Hide Andy Robinson&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/freshcaffeine/comment/37gef/mod" aria-label="Moderate Andy Robinson&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/freshcaffeine/comment/37gef" aria-label="Report Andy Robinson&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I'm totally up for continuing the "Sorry Not Sorry" theme</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505155"
    data-comment-id="1505155"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahjw2q0jobjkgatxmicmyojyv56kdsdo" class="crayons-icon reaction-icon not-reacted"><title id="ahjw2q0jobjkgatxmicmyojyv56kdsdo">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as6r3jy21w3260wu4slbgxq3emhr74ld" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="as6r3jy21w3260wu4slbgxq3emhr74ld">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505155"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gef"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505155"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abuicoy5up32n1sevxtv0p1kwhnydgfs" class="crayons-icon reaction-icon not-reacted"><title id="abuicoy5up32n1sevxtv0p1kwhnydgfs">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5bi1tkqunaoa7oj36d6zylis9n389mj" class="crayons-icon expanded"><title id="a5bi1tkqunaoa7oj36d6zylis9n389mj">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a34ueygljqxsrmnial9nym1m8inkrl3m" class="crayons-icon collapsed"><title id="a34ueygljqxsrmnial9nym1m8inkrl3m">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505651"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505651"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h7h"
    data-comment-author-id="68989"
    data-content-user-id="68989">
    <a name="comment-37h7h" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/rolandixor" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F68989%2F42ba6ada-7606-41f2-b834-3dd40b19f432.png" alt="rolandixor profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/rolandixor" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Roland Taylor
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505651" aria-controls="comment-profile-preview-content-1505651" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Roland Taylor profile details">
      Roland Taylor
      
    </button>
    <div id="comment-profile-preview-content-1505651" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #568dce; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/rolandixor" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F68989%2F42ba6ada-7606-41f2-b834-3dd40b19f432.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Roland Taylor
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:68989,&quot;name&quot;:&quot;Roland Taylor&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Roland Taylor" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    That ­CSS Funstuff guy.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Barbados
          </div>
        </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Founder, Director @ RolandiXor Media Inc.
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-04-23T18:46:06Z" class="date">Apr 23, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h7h" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-06T01:38:49Z" class=date-no-year>
    May 6
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505651" aria-controls="comment-dropdown-1505651" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab8hd2r6mpf3pfuprqmpy8abq5v65od5" class="crayons-icon pointer-events-none"><title id="ab8hd2r6mpf3pfuprqmpy8abq5v65od5">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505651" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h7h" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Roland Taylor&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="68989" data-action="settings-button" data-path="https://dev.to/rolandixor/comment/37h7h/settings" aria-label="Go to Roland Taylor&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="68989">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505651"
                data-comment-url="https://dev.to/rolandixor/comment/37h7h"
                aria-label="Hide Roland Taylor&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/rolandixor/comment/37h7h/mod" aria-label="Moderate Roland Taylor&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/rolandixor/comment/37h7h" aria-label="Report Roland Taylor&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I'll do YOU one better... WHEN I Love Tailwind. Sorry Not Sorry. ;)</p>

<p>Kudos if you get the reference.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505651"
    data-comment-id="1505651"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahvso7ma7luq84peffbixjcqxzfnipkd" class="crayons-icon reaction-icon not-reacted"><title id="ahvso7ma7luq84peffbixjcqxzfnipkd">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aev5n4cn5uk3csu8itfpm3qpz2qh0vrh" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aev5n4cn5uk3csu8itfpm3qpz2qh0vrh">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505651"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h7h"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505651"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2oky63s5uxup9ci8ly7iiwjdv62wgx9" class="crayons-icon reaction-icon not-reacted"><title id="a2oky63s5uxup9ci8ly7iiwjdv62wgx9">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6wm3ziv42xtlmgyvx5etjec0t2gsfsv" class="crayons-icon expanded"><title id="a6wm3ziv42xtlmgyvx5etjec0t2gsfsv">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1vyp93v38ply6xoa8sfppsc0291jcly" class="crayons-icon collapsed"><title id="a1vyp93v38ply6xoa8sfppsc0291jcly">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505657"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505657"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h7n"
    data-comment-author-id="1002243"
    data-content-user-id="1002243">
    <a name="comment-37h7n" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/adamthedeveloper" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002243%2F84fa5f44-c4e1-4fec-934c-9fa687161e10.webp" alt="adamthedeveloper profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/adamthedeveloper" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Adam - The Developer
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505657" aria-controls="comment-profile-preview-content-1505657" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Adam - The Developer profile details">
      Adam - The Developer
      
    </button>
    <div id="comment-profile-preview-content-1505657" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/adamthedeveloper" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1002243%2F84fa5f44-c4e1-4fec-934c-9fa687161e10.webp" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Adam - The Developer
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:1002243,&quot;name&quot;:&quot;Adam - The Developer&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Adam - The Developer" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    hey i&#39;m adam. i&#39;m a software engineer who&#39;s way too into backend, distributed systems, and hunting down edge cases for fun. also i play piano by ear and math&#39;s kinda fun
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:adaminiature@gmail.com">adaminiature@gmail.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Phnom Penh, Cambodia.
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              University Of Cambodia
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              origin/main
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Piper
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2023-01-05T08:13:57Z" class="date">Jan 5, 2023</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h7n" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-06T02:21:20Z" class=date-no-year>
    May 6
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505657" aria-controls="comment-dropdown-1505657" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aacc118qgwr78k9ezlczgl6tqffmtl42" class="crayons-icon pointer-events-none"><title id="aacc118qgwr78k9ezlczgl6tqffmtl42">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505657" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h7n" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Adam - The Developer&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="1002243" data-action="settings-button" data-path="https://dev.to/adamthedeveloper/comment/37h7n/settings" aria-label="Go to Adam - The Developer&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="1002243">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505657"
                data-comment-url="https://dev.to/adamthedeveloper/comment/37h7n"
                aria-label="Hide Adam - The Developer&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/adamthedeveloper/comment/37h7n/mod" aria-label="Moderate Adam - The Developer&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/adamthedeveloper/comment/37h7n" aria-label="Report Adam - The Developer&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>man of culture here, of course I do.<br>
but I'll do YOU one better...</p>

<p>WHY I Love Tailwind. Sorry Not Sorry.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505657"
    data-comment-id="1505657"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="am428atb2j3lhlsbyas0e9ah9d8f6yy9" class="crayons-icon reaction-icon not-reacted"><title id="am428atb2j3lhlsbyas0e9ah9d8f6yy9">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="af89z4rw9ksi0lup6jz9cvel5hw3a0z1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="af89z4rw9ksi0lup6jz9cvel5hw3a0z1">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505657"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h7n"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505657"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arplliliryaa86f5msm5ej6w6503p5j2" class="crayons-icon reaction-icon not-reacted"><title id="arplliliryaa86f5msm5ej6w6503p5j2">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="anm15v66hysbdoz0lyqy78sg20f2xn81" class="crayons-icon expanded"><title id="anm15v66hysbdoz0lyqy78sg20f2xn81">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2jv98ejglu68e1l1vanc9temlhvuu9m" class="crayons-icon collapsed"><title id="a2jv98ejglu68e1l1vanc9temlhvuu9m">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504547"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504547"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fh5"
    data-comment-author-id="31518"
    data-content-user-id="31518">
    <a name="comment-37fh5" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/moopet" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31518%2Ffda7f57e-7bcf-4a04-b7bf-529373e2a1cd.jpg" alt="moopet profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/moopet" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Ben Sinclair
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504547" aria-controls="comment-profile-preview-content-1504547" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Ben Sinclair profile details">
      Ben Sinclair
      
    </button>
    <div id="comment-profile-preview-content-1504547" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #c64799; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/moopet" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31518%2Ffda7f57e-7bcf-4a04-b7bf-529373e2a1cd.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Ben Sinclair
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:31518,&quot;name&quot;:&quot;Ben Sinclair&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Ben Sinclair" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    I&#39;m an ex-sysadmin from the late 20th century.

These days I do more software architecture and whatnot, and promote UX and accessibility.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Scotland
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              Something something cybernetics
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              They/them
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              General-purpose software person
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2017-08-29T08:17:45Z" class="date">Aug 29, 2017</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fh5" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T15:39:41Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504547" aria-controls="comment-dropdown-1504547" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acvhc9hwlincglc6bw8h45zqc8b6wfbt" class="crayons-icon pointer-events-none"><title id="acvhc9hwlincglc6bw8h45zqc8b6wfbt">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504547" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fh5" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Ben Sinclair&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="31518" data-action="settings-button" data-path="https://dev.to/moopet/comment/37fh5/settings" aria-label="Go to Ben Sinclair&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="31518">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504547"
                data-comment-url="https://dev.to/moopet/comment/37fh5"
                aria-label="Hide Ben Sinclair&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/moopet/comment/37fh5/mod" aria-label="Moderate Ben Sinclair&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/moopet/comment/37fh5" aria-label="Report Ben Sinclair&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <blockquote>
<p>In real projects, that long Tailwind class list usually lives inside a component anyway. You don’t copy-paste that everywhere</p>
</blockquote>

<p>That's why components aren't reusable under tailwind.</p>

<blockquote>
<p>Tailwind doesn’t create bad developers.</p>
</blockquote>

<p>It kind of does, in all but name. People use Tailwind because it's popular. LLMs train on it because it's popular. The people who use it most don't care about semantics. They don't care about accessibility. They don't care about users. It goes around in a circle. If you ask an LLM for something, it loves using Tailwind because it has no idea about the rest of your code and is happy to produce slop.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504547"
    data-comment-id="1504547"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7o2oqgwp8ljjjxk3fm3ip9myf3j0lz9" class="crayons-icon reaction-icon not-reacted"><title id="a7o2oqgwp8ljjjxk3fm3ip9myf3j0lz9">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amzvmq8r7066iqzogbrgglcozapfm0li" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="amzvmq8r7066iqzogbrgglcozapfm0li">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504547"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fh5"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504547"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akbqk9b9ptbbkl1plb5lb49f9mj4ycr5" class="crayons-icon reaction-icon not-reacted"><title id="akbqk9b9ptbbkl1plb5lb49f9mj4ycr5">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afho6g8dojq9i00qi465zqemqaar7pp7" class="crayons-icon expanded"><title id="afho6g8dojq9i00qi465zqemqaar7pp7">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="alhaxwviq2if5fke857pbqrlkuynzfdv" class="crayons-icon collapsed"><title id="alhaxwviq2if5fke857pbqrlkuynzfdv">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504627"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504627"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fk7"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37fk7" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504627" aria-controls="comment-profile-preview-content-1504627" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504627" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fk7" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T16:01:17Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504627" aria-controls="comment-dropdown-1504627" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1zdfex1784ff4r6v74kdbsbldy561dc" class="crayons-icon pointer-events-none"><title id="a1zdfex1784ff4r6v74kdbsbldy561dc">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504627" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fk7" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37fk7/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504627"
                data-comment-url="https://dev.to/sylwia-lask/comment/37fk7"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37fk7/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37fk7" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Of course you can build reusable and configurable components with Tailwind — and it doesn’t require any kind of wizardry 🙂</p>

<p>And yes, LLMs love Tailwind, but it was already hugely popular long before that. There was even that whole discussion about Tailwind creators losing traffic because people stopped going to the docs. Also, if you ask an agent to write plain CSS without supervision, it will happily generate unusable slop as well.</p>

<p>The part about accessibility and semantics feels like a generalization. You can build semantic, accessible UIs with Tailwind — and you can also create a complete mess with plain CSS.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504627"
    data-comment-id="1504627"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6bqb5cknr0b75o1pycisdlwu8plyyw9" class="crayons-icon reaction-icon not-reacted"><title id="a6bqb5cknr0b75o1pycisdlwu8plyyw9">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amlzoa2fktdk39pbvgstatiilr0ccwla" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="amlzoa2fktdk39pbvgstatiilr0ccwla">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504627"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fk7"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504627"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aepd09upl2n5m9t14kgbg24baqqojck9" class="crayons-icon reaction-icon not-reacted"><title id="aepd09upl2n5m9t14kgbg24baqqojck9">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5g1uk92odk7wqfzaoxad8igt8k7u6ju" class="crayons-icon expanded"><title id="a5g1uk92odk7wqfzaoxad8igt8k7u6ju">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aejj0v6p9f8otqou92vuyprjrcwgfwp6" class="crayons-icon collapsed"><title id="aejj0v6p9f8otqou92vuyprjrcwgfwp6">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505152"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505152"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gec"
    data-comment-author-id="31518"
    data-content-user-id="31518">
    <a name="comment-37gec" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/moopet" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31518%2Ffda7f57e-7bcf-4a04-b7bf-529373e2a1cd.jpg" alt="moopet profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/moopet" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Ben Sinclair
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505152" aria-controls="comment-profile-preview-content-1505152" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Ben Sinclair profile details">
      Ben Sinclair
      
    </button>
    <div id="comment-profile-preview-content-1505152" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #c64799; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/moopet" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31518%2Ffda7f57e-7bcf-4a04-b7bf-529373e2a1cd.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Ben Sinclair
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:31518,&quot;name&quot;:&quot;Ben Sinclair&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Ben Sinclair" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    I&#39;m an ex-sysadmin from the late 20th century.

These days I do more software architecture and whatnot, and promote UX and accessibility.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Scotland
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              Something something cybernetics
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              They/them
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              General-purpose software person
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2017-08-29T08:17:45Z" class="date">Aug 29, 2017</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gec" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:00:52Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505152" aria-controls="comment-dropdown-1505152" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aal35g56dqsj71ib3wxg35t5o3h6sad" class="crayons-icon pointer-events-none"><title id="aal35g56dqsj71ib3wxg35t5o3h6sad">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505152" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gec" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Ben Sinclair&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="31518" data-action="settings-button" data-path="https://dev.to/moopet/comment/37gec/settings" aria-label="Go to Ben Sinclair&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="31518">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505152"
                data-comment-url="https://dev.to/moopet/comment/37gec"
                aria-label="Hide Ben Sinclair&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/moopet/comment/37gec/mod" aria-label="Moderate Ben Sinclair&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/moopet/comment/37gec" aria-label="Report Ben Sinclair&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I don't think people generally build reusable components with Tailwind. Or rather, there's a spectrum of Tailwind that goes from inline styles at one end to regular CSS at the other end, and the more reusable a component is, the further from Tailwind's goals it is. Don't forget Tailwind was explicitly written to counter the separation of style and content and the documentation advices you to steer clear of anything else.</p>

<p>A component isn't reusable if it has hard-coded styles - and if you try to separate them out by collecting utility classes into something more semantic then you're going down the CSS end rather than the Tailwind end. If you use Tailwind variables in JS for values then you're reinventing the wheel again, meaning there are now more places to configure things, and that you need to edit <em>code</em> to change the look and feel.</p>

<p>You <em>can</em> build semantic, accessible UIs with Tailwind, people just don't tend to, the same way React components don't tend to be built that way. Almost all the tutorials for either are div soup, and that's what people learn from. Tailwind's massive popularity has had the incidental effect of making the web worse.</p>

<p>And the more you try to make Tailwind into something usable, the closer you get to what you'd have had if you'd used regular CSS in the first place.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505152"
    data-comment-id="1505152"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5hchvst3guq30f5dyhjiq81rcfl42bz" class="crayons-icon reaction-icon not-reacted"><title id="a5hchvst3guq30f5dyhjiq81rcfl42bz">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asmt5bair5bwiy2ggmpzwz44c7tzgc23" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asmt5bair5bwiy2ggmpzwz44c7tzgc23">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="apc4ud2r920vddee18eiilqrj1s2wpbe" class="crayons-icon"><title id="apc4ud2r920vddee18eiilqrj1s2wpbe">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505211"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1505211"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37ggj"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37ggj" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505211" aria-controls="comment-profile-preview-content-1505211" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505211" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37ggj" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T10:43:13Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505211" aria-controls="comment-dropdown-1505211" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abhav9pfbtam9fg7zq118x916p9grcao" class="crayons-icon pointer-events-none"><title id="abhav9pfbtam9fg7zq118x916p9grcao">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505211" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37ggj" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37ggj/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505211"
                data-comment-url="https://dev.to/sylwia-lask/comment/37ggj"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37ggj/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37ggj" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>There’s a lot of emotion and generalization in this take, and a strong sense of “how things should be.”</p>

<p>I do agree with some parts though. If you’re building highly configurable components, classic CSS can be more convenient. And yes, the more abstraction you introduce, the closer you get to a more traditional CSS approach, which can be the better choice in that context. The point about tutorials is also fair, but that’s not a Tailwind issue, that’s a tutorial issue. React tutorials look exactly the same in that regard 😄</p>

<p>Where I disagree is on reusability. You absolutely can build reusable components with Tailwind. You define components, pass props, and map classes. The whole modern UI approach still applies, including variants and composition. The same goes for the “hardcoded styles” argument, that’s just not how most real-world Tailwind codebases are structured.</p>

<p>Utility classes also aren’t the same as inline styles. You still have CSS underneath, including the cascade, media queries, and everything else that comes with it. And the argument about semantics and accessibility… the web has had issues there long before Tailwind came along. My own application built with Tailwind meets WCAG AA standards, otherwise it wouldn’t have passed the audit and wouldn’t be allowed in production.</p>

<p>And sure, beautifully crafted CSS systems can be great, even better in some cases. If a team has the time and conditions to build that, go for it. But in reality, you often have multiple teams, tight deadlines, and constantly evolving requirements. That’s when things tend to turn into unmaintainable spaghetti, because someone added a random custom class somewhere and nobody knows what it does anymore 🙂</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505211"
    data-comment-id="1505211"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ah7go2hicqhk12ac79px1guablzv4chk" class="crayons-icon reaction-icon not-reacted"><title id="ah7go2hicqhk12ac79px1guablzv4chk">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aag2g6d0hxi8h3rm6tjqi8ait2lke0yh" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aag2g6d0hxi8h3rm6tjqi8ait2lke0yh">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505211"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37ggj"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505211"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5azcx2pynsfl2vkw2meou4kaeahx3co" class="crayons-icon reaction-icon not-reacted"><title id="a5azcx2pynsfl2vkw2meou4kaeahx3co">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a528zemj3bz8mpupfz4pk158qjx8v0cf" class="crayons-icon expanded"><title id="a528zemj3bz8mpupfz4pk158qjx8v0cf">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ah3rwkks30tt6phg54ptp36odh2ebhm7" class="crayons-icon collapsed"><title id="ah3rwkks30tt6phg54ptp36odh2ebhm7">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504829"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504829"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g21"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37g21" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504829" aria-controls="comment-profile-preview-content-1504829" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504829" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g21" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T19:37:59Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504829" aria-controls="comment-dropdown-1504829" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="alnojycf7f5kfmkhrqa2wgb8xjsmb6b7" class="crayons-icon pointer-events-none"><title id="alnojycf7f5kfmkhrqa2wgb8xjsmb6b7">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504829" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g21" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37g21/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504829"
                data-comment-url="https://dev.to/sylwia-lask/comment/37g21"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37g21/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37g21" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbvunwtno65p5of5dvhw.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbvunwtno65p5of5dvhw.png" alt="Active discussions and two links: I don't like tailwind. Sorry not Sorry and I Love Tailwind. Sorry not sorry" loading="lazy"></a><br>
How cool is that 😁</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504829"
    data-comment-id="1504829"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9on2fn7ieug8jn2jpidyahsloi3gs7v" class="crayons-icon reaction-icon not-reacted"><title id="a9on2fn7ieug8jn2jpidyahsloi3gs7v">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1e7t3nuwmig1lp1av2q1zfzukyp7hip" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1e7t3nuwmig1lp1av2q1zfzukyp7hip">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504829"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g21"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504829"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adiu7ampbsvejvuhhf06h1qfqxbsx0c3" class="crayons-icon reaction-icon not-reacted"><title id="adiu7ampbsvejvuhhf06h1qfqxbsx0c3">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afn0ejniqw8dhx087yrzbxyic6qbznwj" class="crayons-icon expanded"><title id="afn0ejniqw8dhx087yrzbxyic6qbznwj">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ai3kd1tg4lw6fkaum1t2uev72q9oroxv" class="crayons-icon collapsed"><title id="ai3kd1tg4lw6fkaum1t2uev72q9oroxv">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505157"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505157"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37geh"
    data-comment-author-id="2081107"
    data-content-user-id="2081107">
    <a name="comment-37geh" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/freshcaffeine" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2081107%2F2e2972d2-af5d-4853-b418-098e9c384f3d.png" alt="freshcaffeine profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/freshcaffeine" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Andy Robinson
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505157" aria-controls="comment-profile-preview-content-1505157" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Andy Robinson profile details">
      Andy Robinson
      
    </button>
    <div id="comment-profile-preview-content-1505157" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #206c8d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/freshcaffeine" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2081107%2F2e2972d2-af5d-4853-b418-098e9c384f3d.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Andy Robinson
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:2081107,&quot;name&quot;:&quot;Andy Robinson&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Andy Robinson" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Caffeine-fuelled software engineer, father, husband, analogue camera lover, former fork-lift driver. 
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Grimsby/London - UK
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              University of Plymouth
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Chief Nerd @FilmTailor AI | Software Engineer @Omnio
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2024-09-16T13:26:18Z" class="date">Sep 16, 2024</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geh" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:02:49Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505157" aria-controls="comment-dropdown-1505157" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aka0me507phx7g3se1ydk2mrfhppfbll" class="crayons-icon pointer-events-none"><title id="aka0me507phx7g3se1ydk2mrfhppfbll">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505157" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geh" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Andy Robinson&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="2081107" data-action="settings-button" data-path="https://dev.to/freshcaffeine/comment/37geh/settings" aria-label="Go to Andy Robinson&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="2081107">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505157"
                data-comment-url="https://dev.to/freshcaffeine/comment/37geh"
                aria-label="Hide Andy Robinson&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/freshcaffeine/comment/37geh/mod" aria-label="Moderate Andy Robinson&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/freshcaffeine/comment/37geh" aria-label="Report Andy Robinson&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>To be honest - Im just happy i got any engagement in my post!</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505157"
    data-comment-id="1505157"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9yk7of5xsnuogl0mgy06xtkcrx028jq" class="crayons-icon reaction-icon not-reacted"><title id="a9yk7of5xsnuogl0mgy06xtkcrx028jq">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aehhasybfkx5pm36trkn104y3wgv86z9" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aehhasybfkx5pm36trkn104y3wgv86z9">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505157"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37geh"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505157"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aehm6c74tqrml3ueya1dggxw09dn0tbh" class="crayons-icon reaction-icon not-reacted"><title id="aehm6c74tqrml3ueya1dggxw09dn0tbh">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5t9agxsocc555eagttr28m4sxhtb3be" class="crayons-icon expanded"><title id="a5t9agxsocc555eagttr28m4sxhtb3be">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a53tr34usljez8df7hlf3pfdk7tu4p2z" class="crayons-icon collapsed"><title id="a53tr34usljez8df7hlf3pfdk7tu4p2z">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505163"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505163"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gen"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gen" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505163" aria-controls="comment-profile-preview-content-1505163" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505163" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gen" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:14:26Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505163" aria-controls="comment-dropdown-1505163" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="af5yzymduonmstukfe4faku3u9vtgsy3" class="crayons-icon pointer-events-none"><title id="af5yzymduonmstukfe4faku3u9vtgsy3">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505163" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gen" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gen/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505163"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gen"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gen/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gen" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Hahaha exactly 😄 At this point you don’t even need to write any more hot takes, the pure CSS defenders are doing it for you in the comments. 🤣 </p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505163"
    data-comment-id="1505163"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akkivaps59kfai20oc5zsmf123hr4qif" class="crayons-icon reaction-icon not-reacted"><title id="akkivaps59kfai20oc5zsmf123hr4qif">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aroda4my1lvpzdckukl4ts5aeizp5c2z" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aroda4my1lvpzdckukl4ts5aeizp5c2z">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505163"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gen"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505163"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amyonr3yj9cy3rx6zyyz1ze6rv9lpyog" class="crayons-icon reaction-icon not-reacted"><title id="amyonr3yj9cy3rx6zyyz1ze6rv9lpyog">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <div class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/bmar11/post_comments_mid"></div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7z1bdyletgny5e96sq9ekwy5068fdcz" class="crayons-icon expanded"><title id="a7z1bdyletgny5e96sq9ekwy5068fdcz">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aam6bxcxq7kfwrno3niad2f7xnnuzsx1" class="crayons-icon collapsed"><title id="aam6bxcxq7kfwrno3niad2f7xnnuzsx1">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504173"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504173"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f2l"
    data-comment-author-id="55651"
    data-content-user-id="55651">
    <a name="comment-37f2l" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/georgekobaidze" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" alt="georgekobaidze profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/georgekobaidze" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Giorgi Kobaidze
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504173" aria-controls="comment-profile-preview-content-1504173" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Giorgi Kobaidze profile details">
      Giorgi Kobaidze
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504173" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08b8c1; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/georgekobaidze" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Giorgi Kobaidze
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:55651,&quot;name&quot;:&quot;Giorgi Kobaidze&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Giorgi Kobaidze" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    🏆2x Hackathon Winner
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Tbilisi, Georgia
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              San Diego State University
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Principal Software Engineer at Flutter Entertainment
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-01-29T19:34:33Z" class="date">Jan 29, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f2l" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T09:15:38Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504173" aria-controls="comment-dropdown-1504173" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a16tt81uhfi031jkw06fyrz6opt2g782" class="crayons-icon pointer-events-none"><title id="a16tt81uhfi031jkw06fyrz6opt2g782">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504173" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f2l" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Giorgi Kobaidze&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="55651" data-action="settings-button" data-path="https://dev.to/georgekobaidze/comment/37f2l/settings" aria-label="Go to Giorgi Kobaidze&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="55651">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504173"
                data-comment-url="https://dev.to/georgekobaidze/comment/37f2l"
                aria-label="Hide Giorgi Kobaidze&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/georgekobaidze/comment/37f2l/mod" aria-label="Moderate Giorgi Kobaidze&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/georgekobaidze/comment/37f2l" aria-label="Report Giorgi Kobaidze&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I’m gonna write another article: “I don’t care about Tailwind, sorry not sorry” 😂</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504173"
    data-comment-id="1504173"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aav9ry1i6514gm1z8w7v0a8kqt4j80mg" class="crayons-icon reaction-icon not-reacted"><title id="aav9ry1i6514gm1z8w7v0a8kqt4j80mg">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ad9xcm7up29tw2rs043thudg9xatv1wf" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ad9xcm7up29tw2rs043thudg9xatv1wf">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">10</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504173"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f2l"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504173"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aa735k380ugwihrr5pqmb0lobtk663av" class="crayons-icon reaction-icon not-reacted"><title id="aa735k380ugwihrr5pqmb0lobtk663av">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="agl7tpkohasx38pzjmbw1le895hxw02b" class="crayons-icon expanded"><title id="agl7tpkohasx38pzjmbw1le895hxw02b">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abgq7bm45hc4rak9dmbk4gggaglqrylk" class="crayons-icon collapsed"><title id="abgq7bm45hc4rak9dmbk4gggaglqrylk">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504548"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504548"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fh6"
    data-comment-author-id="1"
    data-content-user-id="1">
    <a name="comment-37fh6" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/ben" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1%2Fbabb96d0-9cd2-49bc-a412-2dc4caf94c2a.png" alt="ben profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/ben" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Ben Halpern
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504548" aria-controls="comment-profile-preview-content-1504548" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Ben Halpern profile details">
      Ben Halpern
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504548" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #341dc7; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/ben" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1%2Fbabb96d0-9cd2-49bc-a412-2dc4caf94c2a.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Ben Halpern
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:1,&quot;name&quot;:&quot;Ben Halpern&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Ben Halpern" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    A Canadian software developer who thinks he’s funny.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:ben@forem.com">ben@forem.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            NY
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              Mount Allison University
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              He/him
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Co-founder at Forem
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2015-12-27T04:02:17Z" class="date">Dec 27, 2015</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fh6" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T15:39:59Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504548" aria-controls="comment-dropdown-1504548" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="agdaekq37s6csmb4g8bfonrml3rr0euv" class="crayons-icon pointer-events-none"><title id="agdaekq37s6csmb4g8bfonrml3rr0euv">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504548" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fh6" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Ben Halpern&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="1" data-action="settings-button" data-path="https://dev.to/ben/comment/37fh6/settings" aria-label="Go to Ben Halpern&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="1">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504548"
                data-comment-url="https://dev.to/ben/comment/37fh6"
                aria-label="Hide Ben Halpern&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/ben/comment/37fh6/mod" aria-label="Moderate Ben Halpern&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/ben/comment/37fh6" aria-label="Report Ben Halpern&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>lol</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504548"
    data-comment-id="1504548"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aps2xji829takzod6ynbp3g3vy4qlvbl" class="crayons-icon reaction-icon not-reacted"><title id="aps2xji829takzod6ynbp3g3vy4qlvbl">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="al2p3lyk55rh1tvjtz5xfvnxxarz7yhe" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="al2p3lyk55rh1tvjtz5xfvnxxarz7yhe">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504548"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fh6"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504548"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afs47y99hak9hbv9krrqfrjc49drrw3k" class="crayons-icon reaction-icon not-reacted"><title id="afs47y99hak9hbv9krrqfrjc49drrw3k">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aa98c3mhx4igav0l2zq4oyiqy3d9w3s" class="crayons-icon expanded"><title id="aa98c3mhx4igav0l2zq4oyiqy3d9w3s">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac2k2r79fva3fqsa58ym9i8z1hs1icyz" class="crayons-icon collapsed"><title id="ac2k2r79fva3fqsa58ym9i8z1hs1icyz">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504176"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504176"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f2o"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37f2o" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504176" aria-controls="comment-profile-preview-content-1504176" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504176" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f2o" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T09:20:54Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504176" aria-controls="comment-dropdown-1504176" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahl6ibwhw5ch10bx75gx3wfk0pasusax" class="crayons-icon pointer-events-none"><title id="ahl6ibwhw5ch10bx75gx3wfk0pasusax">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504176" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f2o" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37f2o/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504176"
                data-comment-url="https://dev.to/sylwia-lask/comment/37f2o"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37f2o/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37f2o" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I love this comment 😂 You absolutely have to write that article, it would be a banger 😄 On the other hand, maybe you should care! Every time I had to build a frontend with backend devs, they always asked for Tailwind because they didn't understand plain CSS 😂</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504176"
    data-comment-id="1504176"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqd6xh2iic54rjbn0n36tv3e51sutjzk" class="crayons-icon reaction-icon not-reacted"><title id="aqd6xh2iic54rjbn0n36tv3e51sutjzk">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="alqvycr6v3t9n5q64c5zrkea9d6gbylt" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="alqvycr6v3t9n5q64c5zrkea9d6gbylt">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504176"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f2o"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504176"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acf20hort4dda9k8soub245y1njgbuyz" class="crayons-icon reaction-icon not-reacted"><title id="acf20hort4dda9k8soub245y1njgbuyz">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2q0wd9usolfhedqbz36ntfpfobs3rb3" class="crayons-icon expanded"><title id="a2q0wd9usolfhedqbz36ntfpfobs3rb3">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a595bl990yjbxln7uo7gdysju4r3y9cz" class="crayons-icon collapsed"><title id="a595bl990yjbxln7uo7gdysju4r3y9cz">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504198"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1504198"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f3k"
    data-comment-author-id="55651"
    data-content-user-id="55651">
    <a name="comment-37f3k" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/georgekobaidze" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" alt="georgekobaidze profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/georgekobaidze" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Giorgi Kobaidze
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504198" aria-controls="comment-profile-preview-content-1504198" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Giorgi Kobaidze profile details">
      Giorgi Kobaidze
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504198" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08b8c1; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/georgekobaidze" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Giorgi Kobaidze
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:55651,&quot;name&quot;:&quot;Giorgi Kobaidze&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Giorgi Kobaidze" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    🏆2x Hackathon Winner
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Tbilisi, Georgia
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              San Diego State University
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Principal Software Engineer at Flutter Entertainment
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-01-29T19:34:33Z" class="date">Jan 29, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f3k" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T10:07:53Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504198" aria-controls="comment-dropdown-1504198" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afvhurhegxlk8sq3pkul8h6aho3iubqg" class="crayons-icon pointer-events-none"><title id="afvhurhegxlk8sq3pkul8h6aho3iubqg">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504198" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f3k" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Giorgi Kobaidze&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="55651" data-action="settings-button" data-path="https://dev.to/georgekobaidze/comment/37f3k/settings" aria-label="Go to Giorgi Kobaidze&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="55651">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504198"
                data-comment-url="https://dev.to/georgekobaidze/comment/37f3k"
                aria-label="Hide Giorgi Kobaidze&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/georgekobaidze/comment/37f3k/mod" aria-label="Moderate Giorgi Kobaidze&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/georgekobaidze/comment/37f3k" aria-label="Report Giorgi Kobaidze&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I used to write a lot of css back in the old days, so I’m pretty familiar with both. Strange right, coming from a back-end dev😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504198"
    data-comment-id="1504198"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3xt2920tycnwvjin2wlbcz882ct1o6k" class="crayons-icon reaction-icon not-reacted"><title id="a3xt2920tycnwvjin2wlbcz882ct1o6k">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5ny0c4xu2d584kgvq0ilurf1ctnevo0" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a5ny0c4xu2d584kgvq0ilurf1ctnevo0">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adr1dlgnlqtbtmze7xv2cz23vvlsgb9h" class="crayons-icon"><title id="adr1dlgnlqtbtmze7xv2cz23vvlsgb9h">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504261"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1504261"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f65"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37f65" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504261" aria-controls="comment-profile-preview-content-1504261" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504261" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f65" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T10:56:47Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504261" aria-controls="comment-dropdown-1504261" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ao9u5zkb2ehhymeqj0h59cldrbd586zk" class="crayons-icon pointer-events-none"><title id="ao9u5zkb2ehhymeqj0h59cldrbd586zk">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504261" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f65" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37f65/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504261"
                data-comment-url="https://dev.to/sylwia-lask/comment/37f65"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37f65/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37f65" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>In that case, you’re a unicorn 😄 Most backend devs I’ve worked with either break something in CSS or just avoid touching it altogether. 😅</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504261"
    data-comment-id="1504261"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7ecicc110ocz0nns7xv4osj7uxyq1am" class="crayons-icon reaction-icon not-reacted"><title id="a7ecicc110ocz0nns7xv4osj7uxyq1am">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aj5u5a77opfe9tdianew2h9n6ylraufh" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aj5u5a77opfe9tdianew2h9n6ylraufh">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahm76r5oy2nyktpmrwumdcpvsn9sfmw2" class="crayons-icon"><title id="ahm76r5oy2nyktpmrwumdcpvsn9sfmw2">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504268"
    class="
      comment single-comment-node
      
      child
      comment--deep-4
      comment--too-deep
    "
    data-comment-id="1504268"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f6c"
    data-comment-author-id="55651"
    data-content-user-id="55651">
    <a name="comment-37f6c" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/georgekobaidze" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" alt="georgekobaidze profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/georgekobaidze" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Giorgi Kobaidze
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504268" aria-controls="comment-profile-preview-content-1504268" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Giorgi Kobaidze profile details">
      Giorgi Kobaidze
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504268" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08b8c1; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/georgekobaidze" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Giorgi Kobaidze
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:55651,&quot;name&quot;:&quot;Giorgi Kobaidze&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Giorgi Kobaidze" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    🏆2x Hackathon Winner
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Tbilisi, Georgia
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              San Diego State University
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Principal Software Engineer at Flutter Entertainment
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-01-29T19:34:33Z" class="date">Jan 29, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f6c" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T11:00:21Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504268" aria-controls="comment-dropdown-1504268" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adsn2r2up8mguhmx9q0zl6gaba94qj4" class="crayons-icon pointer-events-none"><title id="adsn2r2up8mguhmx9q0zl6gaba94qj4">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504268" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f6c" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Giorgi Kobaidze&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="55651" data-action="settings-button" data-path="https://dev.to/georgekobaidze/comment/37f6c/settings" aria-label="Go to Giorgi Kobaidze&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="55651">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504268"
                data-comment-url="https://dev.to/georgekobaidze/comment/37f6c"
                aria-label="Hide Giorgi Kobaidze&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/georgekobaidze/comment/37f6c/mod" aria-label="Moderate Giorgi Kobaidze&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/georgekobaidze/comment/37f6c" aria-label="Report Giorgi Kobaidze&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>To be honest, I don’t feel overwhelmingly excited when writing CSS. But sometimes I just gotta do it, cause I’m a one-man team😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504268"
    data-comment-id="1504268"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aewpdyqk2vtprg7yuherfh74f4et1cf5" class="crayons-icon reaction-icon not-reacted"><title id="aewpdyqk2vtprg7yuherfh74f4et1cf5">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3g75hgq57i789j2gn0fz3vnb1shgqwj" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a3g75hgq57i789j2gn0fz3vnb1shgqwj">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="anma2ip9p4si4pm199gaxuua9bx7iwke" class="crayons-icon"><title id="anma2ip9p4si4pm199gaxuua9bx7iwke">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504273"
    class="
      comment single-comment-node
      
      child
      comment--deep-5
      comment--too-deep
    "
    data-comment-id="1504273"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f6h"
    data-comment-author-id="55651"
    data-content-user-id="55651">
    <a name="comment-37f6h" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/georgekobaidze" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" alt="georgekobaidze profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/georgekobaidze" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Giorgi Kobaidze
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504273" aria-controls="comment-profile-preview-content-1504273" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Giorgi Kobaidze profile details">
      Giorgi Kobaidze
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504273" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08b8c1; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/georgekobaidze" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Giorgi Kobaidze
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:55651,&quot;name&quot;:&quot;Giorgi Kobaidze&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Giorgi Kobaidze" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    🏆2x Hackathon Winner
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Tbilisi, Georgia
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              San Diego State University
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Principal Software Engineer at Flutter Entertainment
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-01-29T19:34:33Z" class="date">Jan 29, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f6h" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T11:01:10Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504273" aria-controls="comment-dropdown-1504273" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a4mnh2d9orkx63meefubaccakjncilf8" class="crayons-icon pointer-events-none"><title id="a4mnh2d9orkx63meefubaccakjncilf8">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504273" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f6h" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Giorgi Kobaidze&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="55651" data-action="settings-button" data-path="https://dev.to/georgekobaidze/comment/37f6h/settings" aria-label="Go to Giorgi Kobaidze&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="55651">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504273"
                data-comment-url="https://dev.to/georgekobaidze/comment/37f6h"
                aria-label="Hide Giorgi Kobaidze&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/georgekobaidze/comment/37f6h/mod" aria-label="Moderate Giorgi Kobaidze&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/georgekobaidze/comment/37f6h" aria-label="Report Giorgi Kobaidze&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Well I mean when working on my personal projects.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504273"
    data-comment-id="1504273"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1r2c59b3911qh1c1xm5fslj3mf4dw95" class="crayons-icon reaction-icon not-reacted"><title id="a1r2c59b3911qh1c1xm5fslj3mf4dw95">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atlo8vsbi36sjqn81ycf7n57s3fwfd74" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="atlo8vsbi36sjqn81ycf7n57s3fwfd74">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahc6ozeuxl08ozl9fktkp4y22vogaxir" class="crayons-icon"><title id="ahc6ozeuxl08ozl9fktkp4y22vogaxir">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504317"
    class="
      comment single-comment-node
      
      child
      comment--deep-6
      comment--too-deep
    "
    data-comment-id="1504317"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f89"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37f89" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504317" aria-controls="comment-profile-preview-content-1504317" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504317" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f89" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T11:15:58Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504317" aria-controls="comment-dropdown-1504317" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aa38vq25ciaoj9a1dwtwjd3srowws79s" class="crayons-icon pointer-events-none"><title id="aa38vq25ciaoj9a1dwtwjd3srowws79s">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504317" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f89" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37f89/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504317"
                data-comment-url="https://dev.to/sylwia-lask/comment/37f89"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37f89/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37f89" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I’ll let you in on a secret. I don’t feel overwhelmingly excited about writing CSS either… and I’m a frontend developer 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504317"
    data-comment-id="1504317"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aebqgnm1fybhezb3i7bjs93ac3pwijsl" class="crayons-icon reaction-icon not-reacted"><title id="aebqgnm1fybhezb3i7bjs93ac3pwijsl">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahxeo16eqtsui1iib4fi24gpmq4uxdvj" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ahxeo16eqtsui1iib4fi24gpmq4uxdvj">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aowqy0enzd5hw9h7pf2sl1m1ebaqa37i" class="crayons-icon"><title id="aowqy0enzd5hw9h7pf2sl1m1ebaqa37i">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504335"
    class="
      comment single-comment-node
      
      child
      comment--deep-7
      comment--too-deep
    "
    data-comment-id="1504335"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f91"
    data-comment-author-id="55651"
    data-content-user-id="55651">
    <a name="comment-37f91" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/georgekobaidze" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" alt="georgekobaidze profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/georgekobaidze" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Giorgi Kobaidze
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504335" aria-controls="comment-profile-preview-content-1504335" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Giorgi Kobaidze profile details">
      Giorgi Kobaidze
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504335" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08b8c1; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/georgekobaidze" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F55651%2F29e2a161-9d78-410b-a6e5-9aca17092fa3.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Giorgi Kobaidze
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:55651,&quot;name&quot;:&quot;Giorgi Kobaidze&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Giorgi Kobaidze" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    🏆2x Hackathon Winner
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Tbilisi, Georgia
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              San Diego State University
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Principal Software Engineer at Flutter Entertainment
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2018-01-29T19:34:33Z" class="date">Jan 29, 2018</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f91" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T11:21:33Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504335" aria-controls="comment-dropdown-1504335" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8elmz60rze4s1yuazdmcdpauzj6z6my" class="crayons-icon pointer-events-none"><title id="a8elmz60rze4s1yuazdmcdpauzj6z6my">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504335" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f91" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Giorgi Kobaidze&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="55651" data-action="settings-button" data-path="https://dev.to/georgekobaidze/comment/37f91/settings" aria-label="Go to Giorgi Kobaidze&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="55651">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504335"
                data-comment-url="https://dev.to/georgekobaidze/comment/37f91"
                aria-label="Hide Giorgi Kobaidze&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/georgekobaidze/comment/37f91/mod" aria-label="Moderate Giorgi Kobaidze&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/georgekobaidze/comment/37f91" aria-label="Report Giorgi Kobaidze&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I know people who actually enjoy writing markup. We’re definitely not among them. And I’ll never understand why would anyone like it…</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504335"
    data-comment-id="1504335"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3f0tsrc5w3chk7dpsqgunbccy4tfdsx" class="crayons-icon reaction-icon not-reacted"><title id="a3f0tsrc5w3chk7dpsqgunbccy4tfdsx">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1ci2fkgal2ork7jg412tfki7zuvugq" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1ci2fkgal2ork7jg412tfki7zuvugq">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akdfkzz2ooox473dchvz6uxbgvk6bnu5" class="crayons-icon"><title id="akdfkzz2ooox473dchvz6uxbgvk6bnu5">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1504406"
    class="
      comment single-comment-node
      
      child
      comment--deep-8
      comment--too-deep
    "
    data-comment-id="1504406"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fbk"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37fbk" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504406" aria-controls="comment-profile-preview-content-1504406" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504406" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fbk" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T12:49:36Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504406" aria-controls="comment-dropdown-1504406" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac3nk31sfvgfro6smf1uq2yo6ikxnbvn" class="crayons-icon pointer-events-none"><title id="ac3nk31sfvgfro6smf1uq2yo6ikxnbvn">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504406" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fbk" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37fbk/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504406"
                data-comment-url="https://dev.to/sylwia-lask/comment/37fbk"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37fbk/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37fbk" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Haha, we definitely need people like that in the industry 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504406"
    data-comment-id="1504406"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arel1rsilbzy429bo4xll4vw4rwp6f0w" class="crayons-icon reaction-icon not-reacted"><title id="arel1rsilbzy429bo4xll4vw4rwp6f0w">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="am4pkgnvdppa8f9m7a9j57d17x2amqfy" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="am4pkgnvdppa8f9m7a9j57d17x2amqfy">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504406"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fbk"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504406"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1ktuy6vz91jlfmr3edlalfz5ydjgtga" class="crayons-icon reaction-icon not-reacted"><title id="a1ktuy6vz91jlfmr3edlalfz5ydjgtga">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>


  </div>


  </div>


  </div>


  </div>


  </div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac7bc0pfvsq26qbclhxb04d0xq8blbm5" class="crayons-icon expanded"><title id="ac7bc0pfvsq26qbclhxb04d0xq8blbm5">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aj1q5geusngl6726gabyr90cx7e17455" class="crayons-icon collapsed"><title id="aj1q5geusngl6726gabyr90cx7e17455">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505156"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1505156"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37geg"
    data-comment-author-id="3446021"
    data-content-user-id="3446021">
    <a name="comment-37geg" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/pascal_cescato_692b7a8a20" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3446021%2F2dab8c8f-80a4-4434-967f-5640bbf2050a.jpg" alt="pascal_cescato_692b7a8a20 profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/pascal_cescato_692b7a8a20" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Pascal CESCATO
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505156" aria-controls="comment-profile-preview-content-1505156" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Pascal CESCATO profile details">
      Pascal CESCATO
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1505156" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #43648c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/pascal_cescato_692b7a8a20" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3446021%2F2dab8c8f-80a4-4434-967f-5640bbf2050a.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Pascal CESCATO
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3446021,&quot;name&quot;:&quot;Pascal CESCATO&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Pascal CESCATO" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Full-stack dev sharing practical guides on WordPress, n8n automation, AI tools, Docker &amp; self-hosting. Always experimenting with new tech to make life easier.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:pascal.cescato@gmail.com">pascal.cescato@gmail.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            France
          </div>
        </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              he/him
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-08-19T19:25:49Z" class="date">Aug 19, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geg" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:02:21Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505156" aria-controls="comment-dropdown-1505156" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2vs8nkhloa7i97zofpa1ndyu89upsrc" class="crayons-icon pointer-events-none"><title id="a2vs8nkhloa7i97zofpa1ndyu89upsrc">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505156" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geg" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Pascal CESCATO&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3446021" data-action="settings-button" data-path="https://dev.to/pascal_cescato_692b7a8a20/comment/37geg/settings" aria-label="Go to Pascal CESCATO&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3446021">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505156"
                data-comment-url="https://dev.to/pascal_cescato_692b7a8a20/comment/37geg"
                aria-label="Hide Pascal CESCATO&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/pascal_cescato_692b7a8a20/comment/37geg/mod" aria-label="Moderate Pascal CESCATO&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/pascal_cescato_692b7a8a20/comment/37geg" aria-label="Report Pascal CESCATO&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>You’re absolutely right: Tailwind—or any tool, really—doesn’t create bad developers.</p>

<p>If anything, a mediocre developer may ship something cleaner-looking with better tooling, which just makes them slightly harder to spot. But better tools don’t magically turn mediocre developers into great ones.</p>

<p>This debate has existed forever. First it was “if you don’t write machine code, you’re not a real developer,” then assembly, then C, then Java, then “real devs don’t use frameworks”… and the cycle repeats with every language and stack: PHP, JavaScript, Python, React, Tailwind, you name it.</p>

<p>At the end of the day, what matters is solid fundamentals and choosing the right tool for the right job—taking into account real-world constraints like time, budget, maintainability, and team expertise.</p>

<p>And besides: my tailor is rich… because he doesn’t do bespoke unless you pay for it 😉</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505156"
    data-comment-id="1505156"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4ekw23txc76blh02ytyfwt2o7n4sti8" class="crayons-icon reaction-icon not-reacted"><title id="a4ekw23txc76blh02ytyfwt2o7n4sti8">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a4u8b4kmja1wpecaps6i1shku9vj90dt" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a4u8b4kmja1wpecaps6i1shku9vj90dt">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">4</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505156"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37geg"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505156"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj8fpu83byas5tq7ctomxyaw5065dpqo" class="crayons-icon reaction-icon not-reacted"><title id="aj8fpu83byas5tq7ctomxyaw5065dpqo">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab67oyvf0sigxqhqw0m3m9y5s8g3cntl" class="crayons-icon expanded"><title id="ab67oyvf0sigxqhqw0m3m9y5s8g3cntl">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a24jsxss4gulbkz2ugyud415mizotx7r" class="crayons-icon collapsed"><title id="a24jsxss4gulbkz2ugyud415mizotx7r">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505271"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505271"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gj1"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gj1" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505271" aria-controls="comment-profile-preview-content-1505271" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505271" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gj1" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T12:19:41Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505271" aria-controls="comment-dropdown-1505271" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="arwd9lfj11jqe4pu9okmzej0ws59v3dy" class="crayons-icon pointer-events-none"><title id="arwd9lfj11jqe4pu9okmzej0ws59v3dy">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505271" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gj1" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gj1/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505271"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gj1"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gj1/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gj1" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Thanks, Pascal 😄 Exactly — there’s always someone who’s a “more real” developer than the rest of us 😂</p>

<p>And the tailor analogy is perfect! I probably could’ve written a more balanced post like this… but then would we have had this much discussion? 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505271"
    data-comment-id="1505271"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="as8szmi3u6u8jxsiyvi6xge610lh98pu" class="crayons-icon reaction-icon not-reacted"><title id="as8szmi3u6u8jxsiyvi6xge610lh98pu">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3zy1aja51l224wh2bo0nzyu8o4xes8f" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a3zy1aja51l224wh2bo0nzyu8o4xes8f">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505271"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gj1"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505271"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="agyc9dd0daudxyn8pexmkyei27ldf0" class="crayons-icon reaction-icon not-reacted"><title id="agyc9dd0daudxyn8pexmkyei27ldf0">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="affv568ul6vngo23xto63vsnrhzwaouv" class="crayons-icon expanded"><title id="affv568ul6vngo23xto63vsnrhzwaouv">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as543lbypqx4thfxiawseo5162c2opy" class="crayons-icon collapsed"><title id="as543lbypqx4thfxiawseo5162c2opy">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505279"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505279"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gj9"
    data-comment-author-id="3446021"
    data-content-user-id="3446021">
    <a name="comment-37gj9" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/pascal_cescato_692b7a8a20" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3446021%2F2dab8c8f-80a4-4434-967f-5640bbf2050a.jpg" alt="pascal_cescato_692b7a8a20 profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/pascal_cescato_692b7a8a20" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Pascal CESCATO
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505279" aria-controls="comment-profile-preview-content-1505279" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Pascal CESCATO profile details">
      Pascal CESCATO
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1505279" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #43648c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/pascal_cescato_692b7a8a20" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3446021%2F2dab8c8f-80a4-4434-967f-5640bbf2050a.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Pascal CESCATO
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3446021,&quot;name&quot;:&quot;Pascal CESCATO&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Pascal CESCATO" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Full-stack dev sharing practical guides on WordPress, n8n automation, AI tools, Docker &amp; self-hosting. Always experimenting with new tech to make life easier.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:pascal.cescato@gmail.com">pascal.cescato@gmail.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            France
          </div>
        </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              he/him
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-08-19T19:25:49Z" class="date">Aug 19, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gj9" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T12:32:44Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505279" aria-controls="comment-dropdown-1505279" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5yh510059jg6irbkvbsxgtnl4j7mgpw" class="crayons-icon pointer-events-none"><title id="a5yh510059jg6irbkvbsxgtnl4j7mgpw">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505279" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gj9" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Pascal CESCATO&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3446021" data-action="settings-button" data-path="https://dev.to/pascal_cescato_692b7a8a20/comment/37gj9/settings" aria-label="Go to Pascal CESCATO&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3446021">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505279"
                data-comment-url="https://dev.to/pascal_cescato_692b7a8a20/comment/37gj9"
                aria-label="Hide Pascal CESCATO&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/pascal_cescato_692b7a8a20/comment/37gj9/mod" aria-label="Moderate Pascal CESCATO&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/pascal_cescato_692b7a8a20/comment/37gj9" aria-label="Report Pascal CESCATO&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>No, Sylwia, definitely not! Don’t change the way you write—keep bringing us your authenticity. That’s what gives your articles their flavor, and what makes them so engaging! (Well, let’s just say it definitely plays a part 😉)</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505279"
    data-comment-id="1505279"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar66u9fv1wlivitfu1qzgxm6vb88llsj" class="crayons-icon reaction-icon not-reacted"><title id="ar66u9fv1wlivitfu1qzgxm6vb88llsj">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8za4ic02g3vsgfb6mat5r9s71hfvqos" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a8za4ic02g3vsgfb6mat5r9s71hfvqos">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aj5zqyxtxxdci9so5ca5e10fpukoy640" class="crayons-icon"><title id="aj5zqyxtxxdci9so5ca5e10fpukoy640">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505318"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1505318"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gkm"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gkm" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505318" aria-controls="comment-profile-preview-content-1505318" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505318" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gkm" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T13:19:48Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505318" aria-controls="comment-dropdown-1505318" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afvv8jppq5uhxl75sdd9u0rwcnath1by" class="crayons-icon pointer-events-none"><title id="afvv8jppq5uhxl75sdd9u0rwcnath1by">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505318" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gkm" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gkm/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505318"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gkm"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gkm/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gkm" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>No worries there — I usually write first, publish, and only then start thinking about it 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505318"
    data-comment-id="1505318"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ak4ktz8szgtyadz9qi87fgql79y3semy" class="crayons-icon reaction-icon not-reacted"><title id="ak4ktz8szgtyadz9qi87fgql79y3semy">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asj6pay6m3i97iq64n6qldmkae436lr4" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asj6pay6m3i97iq64n6qldmkae436lr4">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">4</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505318"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gkm"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505318"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5t1f4l7dlmrs2wx19jctzoozpx7grk2" class="crayons-icon reaction-icon not-reacted"><title id="a5t1f4l7dlmrs2wx19jctzoozpx7grk2">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asr2dulx5i7k65890c7rd96y51tezqcu" class="crayons-icon expanded"><title id="asr2dulx5i7k65890c7rd96y51tezqcu">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1nbv8m57b93o6uprr0ej282xlol4zxy" class="crayons-icon collapsed"><title id="a1nbv8m57b93o6uprr0ej282xlol4zxy">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504182"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504182"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f34"
    data-comment-author-id="439972"
    data-content-user-id="439972">
    <a name="comment-37f34" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/pengeszikra" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F439972%2F8830d2e7-92bf-4d2b-9f73-855a4d0a40a7.jpeg" alt="pengeszikra profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/pengeszikra" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Peter Vivo
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504182" aria-controls="comment-profile-preview-content-1504182" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Peter Vivo profile details">
      Peter Vivo
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504182" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #010b1b; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/pengeszikra" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F439972%2F8830d2e7-92bf-4d2b-9f73-855a4d0a40a7.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Peter Vivo
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:439972,&quot;name&quot;:&quot;Peter Vivo&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Peter Vivo" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    The Vibe Archeologist. Creator of mordorjs.
|&gt; and touch bar fanatic from Hungary. 
God speed you! 
1John1 + 5John17 |&gt; 1Moses1 = (1Moses2 ... 4.22John21);
alpha &amp; omega = !![];
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Pomaz
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              streetwise
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              full stack developer at TCS
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2020-07-24T19:38:18Z" class="date">Jul 24, 2020</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f34" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T09:32:46Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504182" aria-controls="comment-dropdown-1504182" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aaqxdn02lizinznv43y5sk1p6paopx6r" class="crayons-icon pointer-events-none"><title id="aaqxdn02lizinznv43y5sk1p6paopx6r">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504182" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f34" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Peter Vivo&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="439972" data-action="settings-button" data-path="https://dev.to/pengeszikra/comment/37f34/settings" aria-label="Go to Peter Vivo&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="439972">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504182"
                data-comment-url="https://dev.to/pengeszikra/comment/37f34"
                aria-label="Hide Peter Vivo&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/pengeszikra/comment/37f34/mod" aria-label="Moderate Peter Vivo&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/pengeszikra/comment/37f34" aria-label="Report Peter Vivo&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I like Tailwind also. My first impression that is create a messy HTML, and make a repetative solution. But after I start to use, I start separated the CSS to two main role:</p>

<ul>
<li>layout</li>
<li>style
I start put Tailwind to layout role, because Tailwind really shine in that scope.
I hope this small codepart can really show how can I handle my mobil first game responsivity. ( I use my own JS FW instead React but use JSX well. )
</li>
</ul>

<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="cm">/** @type {(props: { front:string, back:string, zoom?:number, children?:any }) =&gt; HTMLElement} */</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">GalaxyRoute</span> <span class="o">=</span> <span class="p">({</span><span class="nx">front</span><span class="p">,</span> <span class="nx">back</span><span class="p">,</span> <span class="nx">children</span><span class="p">,</span> <span class="nx">zoom</span><span class="o">=</span><span class="mi">150</span><span class="p">})</span> <span class="o">=&gt;</span> <span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">main</span>
      <span class="na">class</span><span class="p">=</span><span class="err">"</span>
        <span class="na">relative</span>
        <span class="na">bg-zinc-900</span> <span class="na">w-</span><span class="err">[</span><span class="na">100vw</span><span class="err">]</span>
        <span class="na">overflow-hidden</span>
        <span class="na">grid</span> <span class="na">place-items-center</span>
      <span class="err">"</span>
      <span class="na">style</span><span class="p">=</span><span class="si">{</span><span class="p">{</span>
        <span class="na">backgroundImage</span><span class="p">:</span><span class="s2">`url(</span><span class="p">${</span><span class="nx">front</span><span class="p">}</span><span class="s2">),url(</span><span class="p">${</span><span class="nx">back</span><span class="p">}</span><span class="s2">)`</span><span class="p">,</span>
        <span class="na">backgroundSize</span><span class="p">:</span> <span class="s2">`</span><span class="p">${</span><span class="nx">zoom</span><span class="p">}</span><span class="s2">vw`</span>
      <span class="p">}</span><span class="si">}</span>
    <span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="p">=</span><span class="err">"</span>
        <span class="na">relative</span>
        <span class="err">--</span><span class="na">bg-rose-700</span><span class="err">/</span><span class="na">40</span>

        <span class="na">max-w-</span><span class="err">[</span><span class="na">100vw</span><span class="err">]</span>
        <span class="na">max-h-</span><span class="err">[</span><span class="na">56</span><span class="err">.</span><span class="na">25vw</span><span class="err">]</span>

        <span class="na">portrait</span><span class="err">:</span><span class="na">w-</span><span class="err">[</span><span class="na">100vw</span><span class="err">]</span>
        <span class="na">portrait</span><span class="err">:</span><span class="na">h-</span><span class="err">[</span><span class="na">56</span><span class="err">.</span><span class="na">25vw</span><span class="err">]</span>

        <span class="na">landscape</span><span class="err">:</span><span class="na">mx-auto</span>
        <span class="na">landscape</span><span class="err">:</span><span class="na">w-</span><span class="err">[</span><span class="na">178vh</span><span class="err">]</span>
        <span class="na">landscape</span><span class="err">:</span><span class="na">h-</span><span class="err">[</span><span class="na">100vh</span><span class="err">]</span>

        <span class="na">overflow-hidden</span>
        <span class="na">grid</span> <span class="na">place-items-center</span>
        <span class="err">--</span><span class="na">pointer-events-auto</span>
      <span class="err">"</span><span class="p">&gt;</span>

        <span class="si">{</span><span class="nx">children</span><span class="si">}</span>
      <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
  <span class="p">);</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p><a href="https://dev.to/pengeszikra/javascript-great-again-the-voice-of-void-5fp6" rel="nofollow">dev.to/pengeszikra/javascript-grea...</a></p>

<p>my game is also a good example where the original CSS beat the Tailwind ( 2025 ) the 3D game engine is pure CSS solution.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504182"
    data-comment-id="1504182"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ate0xv9b5rqy3v4n4o600wfum6cj2d3v" class="crayons-icon reaction-icon not-reacted"><title id="ate0xv9b5rqy3v4n4o600wfum6cj2d3v">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8xywb1bc7u3gjjw82txu7o220bv4thf" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a8xywb1bc7u3gjjw82txu7o220bv4thf">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504182"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f34"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504182"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akvetph1nuy8l2pgosu3q28wpbuzv8ur" class="crayons-icon reaction-icon not-reacted"><title id="akvetph1nuy8l2pgosu3q28wpbuzv8ur">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aqvi0b0ufqsrbdzdheswu6shx24kwygl" class="crayons-icon expanded"><title id="aqvi0b0ufqsrbdzdheswu6shx24kwygl">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3p9tvarqoipq6jnfh4c6l9x0nvpjl05" class="crayons-icon collapsed"><title id="a3p9tvarqoipq6jnfh4c6l9x0nvpjl05">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504192"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504192"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f3e"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37f3e" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504192" aria-controls="comment-profile-preview-content-1504192" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504192" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f3e" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T09:46:28Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504192" aria-controls="comment-dropdown-1504192" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2oq0ztb4j8tcbamr2cq6mo0uffrsf06" class="crayons-icon pointer-events-none"><title id="a2oq0ztb4j8tcbamr2cq6mo0uffrsf06">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504192" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37f3e" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37f3e/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504192"
                data-comment-url="https://dev.to/sylwia-lask/comment/37f3e"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37f3e/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37f3e" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>This is actually a very sensible approach. it nicely bridges my perspective with the original author’s take.</p>

<p>Using Tailwind for layout and responsiveness makes a lot of sense, because that’s exactly where it shines and speeds things up. But when things get more advanced, custom, or just a bit “weird,” I completely agree: pure CSS gives you the level of control you just can’t replace.</p>

<p>So yeah, I’m 100% with you on that split 🙂</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504192"
    data-comment-id="1504192"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ai4x3mgybgjc0at2pgxkdl1182j7b1f" class="crayons-icon reaction-icon not-reacted"><title id="ai4x3mgybgjc0at2pgxkdl1182j7b1f">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a83stmkfdqoj0mbdira34ywjbkhjdnp6" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a83stmkfdqoj0mbdira34ywjbkhjdnp6">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504192"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f3e"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504192"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a599oyv6tjlnb7mk76dk53gdi8xjnuxq" class="crayons-icon reaction-icon not-reacted"><title id="a599oyv6tjlnb7mk76dk53gdi8xjnuxq">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aps34lvqrm0h6wlx1wcnhsxc7aygnpma" class="crayons-icon expanded"><title id="aps34lvqrm0h6wlx1wcnhsxc7aygnpma">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahdoe0o5001w89yvc83acjbfe0mklt33" class="crayons-icon collapsed"><title id="ahdoe0o5001w89yvc83acjbfe0mklt33">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504796"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504796"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g0k"
    data-comment-author-id="2070381"
    data-content-user-id="2070381">
    <a name="comment-37g0k" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/milton_rodrigues_65587f4c" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2070381%2F30bbca6a-3c0b-4719-a0e4-fdadef3a7a1d.jpg" alt="milton_rodrigues_65587f4c profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/milton_rodrigues_65587f4c" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Milton Rodrigues
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504796" aria-controls="comment-profile-preview-content-1504796" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Milton Rodrigues profile details">
      Milton Rodrigues
      
    </button>
    <div id="comment-profile-preview-content-1504796" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/milton_rodrigues_65587f4c" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2070381%2F30bbca6a-3c0b-4719-a0e4-fdadef3a7a1d.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Milton Rodrigues
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:2070381,&quot;name&quot;:&quot;Milton Rodrigues&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Milton Rodrigues" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2024-09-13T21:54:46Z" class="date">Sep 13, 2024</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g0k" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T18:23:09Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504796" aria-controls="comment-dropdown-1504796" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a4lrosfug3m0959njzktgnxvqa4sltax" class="crayons-icon pointer-events-none"><title id="a4lrosfug3m0959njzktgnxvqa4sltax">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504796" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g0k" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Milton Rodrigues&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="2070381" data-action="settings-button" data-path="https://dev.to/milton_rodrigues_65587f4c/comment/37g0k/settings" aria-label="Go to Milton Rodrigues&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="2070381">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504796"
                data-comment-url="https://dev.to/milton_rodrigues_65587f4c/comment/37g0k"
                aria-label="Hide Milton Rodrigues&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/milton_rodrigues_65587f4c/comment/37g0k/mod" aria-label="Moderate Milton Rodrigues&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/milton_rodrigues_65587f4c/comment/37g0k" aria-label="Report Milton Rodrigues&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>What theme are you using in the IDE?</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504796"
    data-comment-id="1504796"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ax1heh8t49kf1kgwk403jgy49icsgyu" class="crayons-icon reaction-icon not-reacted"><title id="ax1heh8t49kf1kgwk403jgy49icsgyu">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abs5swiegru68oqxq1uz0j8wykmimmmf" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="abs5swiegru68oqxq1uz0j8wykmimmmf">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504796"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g0k"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504796"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqb3x1xznj80uchow4ndeqqa9mnx6hj1" class="crayons-icon reaction-icon not-reacted"><title id="aqb3x1xznj80uchow4ndeqqa9mnx6hj1">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ar4t2gax60yz2lo5pwfkv5kzbx41fzvh" class="crayons-icon expanded"><title id="ar4t2gax60yz2lo5pwfkv5kzbx41fzvh">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="alljm9rsokmd19bap19zl29640p60e5g" class="crayons-icon collapsed"><title id="alljm9rsokmd19bap19zl29640p60e5g">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504808"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1504808"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g16"
    data-comment-author-id="439972"
    data-content-user-id="439972">
    <a name="comment-37g16" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/pengeszikra" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F439972%2F8830d2e7-92bf-4d2b-9f73-855a4d0a40a7.jpeg" alt="pengeszikra profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/pengeszikra" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Peter Vivo
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504808" aria-controls="comment-profile-preview-content-1504808" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Peter Vivo profile details">
      Peter Vivo
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1504808" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #010b1b; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/pengeszikra" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F439972%2F8830d2e7-92bf-4d2b-9f73-855a4d0a40a7.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Peter Vivo
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:439972,&quot;name&quot;:&quot;Peter Vivo&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Peter Vivo" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    The Vibe Archeologist. Creator of mordorjs.
|&gt; and touch bar fanatic from Hungary. 
God speed you! 
1John1 + 5John17 |&gt; 1Moses1 = (1Moses2 ... 4.22John21);
alpha &amp; omega = !![];
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Pomaz
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              streetwise
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              full stack developer at TCS
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2020-07-24T19:38:18Z" class="date">Jul 24, 2020</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g16" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T19:00:37Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504808" aria-controls="comment-dropdown-1504808" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ao8hsflmddkxyboih8tetl940ompjcb4" class="crayons-icon pointer-events-none"><title id="ao8hsflmddkxyboih8tetl940ompjcb4">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504808" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g16" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Peter Vivo&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="439972" data-action="settings-button" data-path="https://dev.to/pengeszikra/comment/37g16/settings" aria-label="Go to Peter Vivo&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="439972">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504808"
                data-comment-url="https://dev.to/pengeszikra/comment/37g16"
                aria-label="Hide Peter Vivo&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/pengeszikra/comment/37g16/mod" aria-label="Moderate Peter Vivo&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/pengeszikra/comment/37g16" aria-label="Report Peter Vivo&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>IDE? On the video I show the in game markdown editor with minimal code block syntax highlight. </p>

<p><a href="https://github.com/Pengeszikra/flogon-galaxy/blob/main/src/marker.js" rel="nofollow noopener noreferrer" target="_blank">github.com/Pengeszikra/flogon-gala...</a></p>

<p>A relevant CSS part:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight css"><code><span class="nt">sw</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#fb8600</span><span class="p">}</span>
<span class="nt">rw</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#acd641</span><span class="p">}</span>
<span class="nt">bw</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#ac84d7</span><span class="p">}</span>
<span class="nt">ew</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#ac84d7</span><span class="p">}</span>
<span class="nt">uw</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#8f665f</span><span class="p">}</span>
<span class="nt">st</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#2fd57f</span><span class="p">}</span>
<span class="nt">rm</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#768d76</span><span class="p">}</span>
<span class="nt">jd</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#9ea77d</span><span class="p">}</span>
<span class="nt">wt</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#618be3</span><span class="p">}</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>




        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504808"
    data-comment-id="1504808"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aja6ppjrxnr2to2t26uw6zaf7to7lh44" class="crayons-icon reaction-icon not-reacted"><title id="aja6ppjrxnr2to2t26uw6zaf7to7lh44">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as199t6g2fmleip2gaosr4c81nhc51fi" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="as199t6g2fmleip2gaosr4c81nhc51fi">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504808"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g16"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504808"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar1ewgtv8h03mo62b1u28zd490ganlsv" class="crayons-icon reaction-icon not-reacted"><title id="ar1ewgtv8h03mo62b1u28zd490ganlsv">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <div class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/bmar11/post_comments_mid"></div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahkhdnz47w442ldr6o0w355j5zgzibia" class="crayons-icon expanded"><title id="ahkhdnz47w442ldr6o0w355j5zgzibia">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6e5tccyge41sgkj96oqwodxpij1c1be" class="crayons-icon collapsed"><title id="a6e5tccyge41sgkj96oqwodxpij1c1be">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504974"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504974"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g7g"
    data-comment-author-id="3773530"
    data-content-user-id="3773530">
    <a name="comment-37g7g" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/dawn_coder" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" alt="dawn_coder profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/dawn_coder" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Dawn
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504974" aria-controls="comment-profile-preview-content-1504974" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Dawn profile details">
      Dawn
      
    </button>
    <div id="comment-profile-preview-content-1504974" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/dawn_coder" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Dawn
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3773530,&quot;name&quot;:&quot;Dawn&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Dawn" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-02-15T05:05:10Z" class="date">Feb 15, 2026</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g7g" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T02:38:17Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504974" aria-controls="comment-dropdown-1504974" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="astm70w3h93rcci3j8d6tr5m1as6xjiu" class="crayons-icon pointer-events-none"><title id="astm70w3h93rcci3j8d6tr5m1as6xjiu">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504974" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37g7g" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Dawn&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3773530" data-action="settings-button" data-path="https://dev.to/dawn_coder/comment/37g7g/settings" aria-label="Go to Dawn&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3773530">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504974"
                data-comment-url="https://dev.to/dawn_coder/comment/37g7g"
                aria-label="Hide Dawn&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/dawn_coder/comment/37g7g/mod" aria-label="Moderate Dawn&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dawn_coder/comment/37g7g" aria-label="Report Dawn&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>I agree with oft-repeated concern about needing to keep styling close to the rest of the component code. My current structure uses a lot of magical global stylesheets, and I hate it because it's so hard to find where any particular style is coming from, and all that reuse makes it really brittle.</p>

<p>Single file components (I use Vue) resolve that problem 👍 The CSS, HTML and JavaScript all get their own sections <em>in the same file</em> for any one component.</p>

<p>Tailwind is pretty attractive if I only want one or two classes, but a lot of the time it just feels like we've saved ourselves a fairly small number of characters while effectively still using style="attribute1: value1; attribute2: value2; ... attributeN: valueN;".</p>

<p>I want that clutter out of my HTML.</p>

<p>I find scanning a vertical list of attributes much easier than a horizontal one.</p>

<p>I like how CSS lets me write blocks to clearly group styles at different breakpoints.</p>

<p>For me, CSS is cleaner and easier to read than Tailwind, as long as it's scoped (to prevent bleeding into other components) and stored alongside the HMTL it's being applied to.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504974"
    data-comment-id="1504974"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aoq3x7b9x2gde5jkvg53jcpj8arnh32l" class="crayons-icon reaction-icon not-reacted"><title id="aoq3x7b9x2gde5jkvg53jcpj8arnh32l">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajn8fg0a382ehee2jb58h3jjodxdwlrj" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ajn8fg0a382ehee2jb58h3jjodxdwlrj">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504974"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g7g"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504974"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="as10rhx2d1a99wslh181xwuzy6loko47" class="crayons-icon reaction-icon not-reacted"><title id="as10rhx2d1a99wslh181xwuzy6loko47">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="arasi0k1gms4ltv6pfb5wkw31kxaqgup" class="crayons-icon expanded"><title id="arasi0k1gms4ltv6pfb5wkw31kxaqgup">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1joi3ewjj5uz2ponnczv1p1hxmazt34" class="crayons-icon collapsed"><title id="a1joi3ewjj5uz2ponnczv1p1hxmazt34">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505059"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505059"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gan"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gan" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505059" aria-controls="comment-profile-preview-content-1505059" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505059" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gan" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T06:15:28Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505059" aria-controls="comment-dropdown-1505059" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1pgkhlbxp45uyewwdznd8wwmwqd31cs" class="crayons-icon pointer-events-none"><title id="a1pgkhlbxp45uyewwdznd8wwmwqd31cs">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505059" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gan" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gan/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505059"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gan"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gan/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gan" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>That’s a really insightful comment, thanks for sharing 🙂</p>

<p>I’m curious though. Do you still see people actually building components like this by hand in commercial projects? I mean outside of hobby work. From my experience, in most real-world projects you end up using some kind of ready-made solution anyway, the question is just which one.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505059"
    data-comment-id="1505059"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8w3sjtqq9poluxdsy3cck8luuyuhwzg" class="crayons-icon reaction-icon not-reacted"><title id="a8w3sjtqq9poluxdsy3cck8luuyuhwzg">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="algl7zl8nl2o53smnxmi644wpuz6ap11" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="algl7zl8nl2o53smnxmi644wpuz6ap11">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505059"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gan"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505059"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8jkhbcw2sio6i4sfpdwblqs837w0v3j" class="crayons-icon reaction-icon not-reacted"><title id="a8jkhbcw2sio6i4sfpdwblqs837w0v3j">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ag9neljt618lpv6qvkxn57rc64alitf7" class="crayons-icon expanded"><title id="ag9neljt618lpv6qvkxn57rc64alitf7">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5sywlna7ikvsyjayjvuwrdd82ailo1t" class="crayons-icon collapsed"><title id="a5sywlna7ikvsyjayjvuwrdd82ailo1t">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505105"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505105"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gch"
    data-comment-author-id="3773530"
    data-content-user-id="3773530">
    <a name="comment-37gch" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/dawn_coder" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" alt="dawn_coder profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/dawn_coder" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Dawn
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505105" aria-controls="comment-profile-preview-content-1505105" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Dawn profile details">
      Dawn
      
    </button>
    <div id="comment-profile-preview-content-1505105" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/dawn_coder" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Dawn
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3773530,&quot;name&quot;:&quot;Dawn&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Dawn" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-02-15T05:05:10Z" class="date">Feb 15, 2026</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gch" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T07:35:26Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505105" aria-controls="comment-dropdown-1505105" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="am2cgewhsv2zxnwgq211t9ri12vum6nu" class="crayons-icon pointer-events-none"><title id="am2cgewhsv2zxnwgq211t9ri12vum6nu">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505105" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gch" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Dawn&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3773530" data-action="settings-button" data-path="https://dev.to/dawn_coder/comment/37gch/settings" aria-label="Go to Dawn&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3773530">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505105"
                data-comment-url="https://dev.to/dawn_coder/comment/37gch"
                aria-label="Hide Dawn&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/dawn_coder/comment/37gch/mod" aria-label="Moderate Dawn&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dawn_coder/comment/37gch" aria-label="Report Dawn&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Yup! Across nearly 30 projects in five years, built by different people, this has been the norm in my world.</p>

<p>This approach has generally been coupled with imported component libraries, which do tend to use Tailwind. Alas, the projects have often had a nasty mix of Tailwind, stylesheets and localised CSS.</p>

<p>You know my views on Tailwind 😉</p>

<p>Stylesheets have their place, but in my opinion just for small projects. They can quickly get out of hand, and then the magic of cascading just becomes chaos.</p>

<p>As for component libraries... I think they deserve a seperate response 😃</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505105"
    data-comment-id="1505105"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar2efgvbm128yd4z5xrbceqiakd08kgy" class="crayons-icon reaction-icon not-reacted"><title id="ar2efgvbm128yd4z5xrbceqiakd08kgy">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acuogi8kykr219ixh6mrjyfwkig5w5ho" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="acuogi8kykr219ixh6mrjyfwkig5w5ho">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac5l4559lciscpg32h28by6sozng9syb" class="crayons-icon"><title id="ac5l4559lciscpg32h28by6sozng9syb">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505164"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1505164"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37geo"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37geo" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505164" aria-controls="comment-profile-preview-content-1505164" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505164" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geo" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:16:32Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505164" aria-controls="comment-dropdown-1505164" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8o54da7il89w70b0zfz7xlw23n2i6dq" class="crayons-icon pointer-events-none"><title id="a8o54da7il89w70b0zfz7xlw23n2i6dq">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505164" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37geo" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37geo/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505164"
                data-comment-url="https://dev.to/sylwia-lask/comment/37geo"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37geo/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37geo" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Out of curiosity… 30 projects in 5 years? I’ve been on the same one for 3 years now 😂 Is that an agency setup?</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505164"
    data-comment-id="1505164"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adziu6aklcup1c2juhp3itm2r4m75uc1" class="crayons-icon reaction-icon not-reacted"><title id="adziu6aklcup1c2juhp3itm2r4m75uc1">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ai1xyq1dvnox4hqpm8zwmwhfaitd0z8x" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ai1xyq1dvnox4hqpm8zwmwhfaitd0z8x">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as9rptrj8s0z5hgv3rbpt638345rxxxt" class="crayons-icon"><title id="as9rptrj8s0z5hgv3rbpt638345rxxxt">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505177"
    class="
      comment single-comment-node
      
      child
      comment--deep-4
      comment--too-deep
    "
    data-comment-id="1505177"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gfb"
    data-comment-author-id="3773530"
    data-content-user-id="3773530">
    <a name="comment-37gfb" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/dawn_coder" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" alt="dawn_coder profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/dawn_coder" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Dawn
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505177" aria-controls="comment-profile-preview-content-1505177" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Dawn profile details">
      Dawn
      
    </button>
    <div id="comment-profile-preview-content-1505177" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/dawn_coder" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Dawn
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3773530,&quot;name&quot;:&quot;Dawn&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Dawn" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-02-15T05:05:10Z" class="date">Feb 15, 2026</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gfb" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:28:03Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505177" aria-controls="comment-dropdown-1505177" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aalyd3no7j73puzdznqxa2m630rb7j5c" class="crayons-icon pointer-events-none"><title id="aalyd3no7j73puzdznqxa2m630rb7j5c">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505177" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gfb" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Dawn&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3773530" data-action="settings-button" data-path="https://dev.to/dawn_coder/comment/37gfb/settings" aria-label="Go to Dawn&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3773530">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505177"
                data-comment-url="https://dev.to/dawn_coder/comment/37gfb"
                aria-label="Hide Dawn&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/dawn_coder/comment/37gfb/mod" aria-label="Moderate Dawn&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dawn_coder/comment/37gfb" aria-label="Report Dawn&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Yup!  Admittedly, one of those was just a three-day assessment of the scale of the challenge before the prospective client went elsewhere, but most were at least half a year and several were multi-year engagements. It was a mix of full time build phases (new projects, or big expansions to existing products), and maintenance contracts for a few days each month per client.</p>

<p>At my peak I think I had eight active clients at the same time. I promise I do not miss that level of context switching 😆</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505177"
    data-comment-id="1505177"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aei2nqqqaa9lsvazsifl6ugp10ngv8mz" class="crayons-icon reaction-icon not-reacted"><title id="aei2nqqqaa9lsvazsifl6ugp10ngv8mz">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ah06ghi5qwbbo2ma6npvqys1bhebv9df" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ah06ghi5qwbbo2ma6npvqys1bhebv9df">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block">&nbsp;like</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505177"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gfb"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505177"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a18181lr98a3tnieg0av47c5rx81bydt" class="crayons-icon reaction-icon not-reacted"><title id="a18181lr98a3tnieg0av47c5rx81bydt">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>


  </div>


  </div>
    </details>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8u1tishbzt66busj99h8o2shu2axggy" class="crayons-icon expanded"><title id="a8u1tishbzt66busj99h8o2shu2axggy">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="arp0dxapyi787uzdqncyit1fo0j7gree" class="crayons-icon collapsed"><title id="arp0dxapyi787uzdqncyit1fo0j7gree">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505119"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1505119"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gd5"
    data-comment-author-id="3773530"
    data-content-user-id="3773530">
    <a name="comment-37gd5" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/dawn_coder" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" alt="dawn_coder profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/dawn_coder" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Dawn
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505119" aria-controls="comment-profile-preview-content-1505119" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Dawn profile details">
      Dawn
      
    </button>
    <div id="comment-profile-preview-content-1505119" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/dawn_coder" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3773530%2Fe9bb447a-4193-4f59-8ce0-f57d6cd5d574.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Dawn
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3773530,&quot;name&quot;:&quot;Dawn&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Dawn" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-02-15T05:05:10Z" class="date">Feb 15, 2026</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gd5" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T07:55:04Z" class=date-no-year>
    May 5
  </time>

    <span class="hidden m:inline-block">&bull; Edited on <time datetime="2026-05-05T07:57:25Z" class="date-no-year">May 5</time></span>
    <span class="m:hidden">&bull; Edited</span>
</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505119" aria-controls="comment-dropdown-1505119" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2sv9w4bq9v1ial7hm6p4skkzktjuxes" class="crayons-icon pointer-events-none"><title id="a2sv9w4bq9v1ial7hm6p4skkzktjuxes">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505119" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gd5" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Dawn&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3773530" data-action="settings-button" data-path="https://dev.to/dawn_coder/comment/37gd5/settings" aria-label="Go to Dawn&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3773530">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505119"
                data-comment-url="https://dev.to/dawn_coder/comment/37gd5"
                aria-label="Hide Dawn&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/dawn_coder/comment/37gd5/mod" aria-label="Moderate Dawn&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dawn_coder/comment/37gd5" aria-label="Report Dawn&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>*<strong><em>On Component Libraries</em></strong>*</p>

<p>I have used several over the years, and intend to investigate more in the coming months. My key criteria are: providing the components I need but deem too fiddly to make in-house; those components being accessible; those components being reasonably easy to restyle.</p>

<p>Vuetify is what I am most familiar with, as that's what was used for most of the projects I was assigned to maintain.  It's ok, reasonably easy to restyle most but not all things. My main gripe is how long it took them to build some of their components for v3 to be compatible with Vue3. It made them a non-option for a long time for anyone who needed those components, e.g. calendar.</p>

<p>Inkline is not something I would touch willingly, although it has its fans. For me, it was outrageously hard to restyle and far too many components were simply not accessible.</p>

<p>PrimeVue was impressive and very, very flexible. However, the number of ways to customise styles felt absurdly high, and I often ended up resorting to trial and error to find out which method would actually work for any given combination of component and desired restyling. Not smooth, just frustrating.</p>

<p>For a project without complex styling ambitions or a strong visual brand to achieve, I think component libraries are a great way to make a website look decent and modern without too much hassle. They free us to focus on functionality 🙌</p>

<p>For simple components like buttons, though, I think they are overkill if your project has its own bespoke design, as it can be easier to just create your own components around vanilla HTML elements rather than restyle something else.</p>

<p>For complex components, like anything date-related, it could be a fun exercise for a hobby project but I wouldn't dare bill my clients for that amount of effort when off-the-shelf offerings have already tackled all that pain. Give me imports!!!</p>

<p>Where external component libraries are used, I would strongly recommend accessing them via custom components. Wrap the imported component in your own styling, once and only once, then use that. In my experience, it is significatly better than ended up with a mix of high level style sheets and in-place CSS to override the componets' default styles where they do not match the look of your project.</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505119"
    data-comment-id="1505119"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abzgzyoami03m99e2c0el69l768qungy" class="crayons-icon reaction-icon not-reacted"><title id="abzgzyoami03m99e2c0el69l768qungy">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ap6j37mjesvid1ehluakbfdyxwpnj0tb" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ap6j37mjesvid1ehluakbfdyxwpnj0tb">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at8otnybrzefcgxoo7vjzdqagem6cjvm" class="crayons-icon"><title id="at8otnybrzefcgxoo7vjzdqagem6cjvm">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505171"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1505171"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gf5"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37gf5" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505171" aria-controls="comment-profile-preview-content-1505171" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505171" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gf5" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T09:21:03Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505171" aria-controls="comment-dropdown-1505171" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ai83pf0bz8vxdnvdkmgchv0t3xsfxabi" class="crayons-icon pointer-events-none"><title id="ai83pf0bz8vxdnvdkmgchv0t3xsfxabi">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505171" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gf5" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37gf5/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505171"
                data-comment-url="https://dev.to/sylwia-lask/comment/37gf5"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37gf5/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37gf5" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Yeah, I fully agree with this — especially the part about wrapping components.</p>

<p>I’ve worked with more component libraries than I can even count at this point, because clients almost always want something fast and “good enough visually.” And that’s exactly where these libraries shine — but they vary a lot when it comes to customization. Changing something in Angular Material, for example, can be a real pain 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505171"
    data-comment-id="1505171"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a471z9ucqehbeztayj9pa5akzlnk300" class="crayons-icon reaction-icon not-reacted"><title id="a471z9ucqehbeztayj9pa5akzlnk300">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at21fhb623ixm9d1h12dd9gk2ppztrem" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="at21fhb623ixm9d1h12dd9gk2ppztrem">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ainkplzjie3tpj1720ubvhcbxjoop2lw" class="crayons-icon"><title id="ainkplzjie3tpj1720ubvhcbxjoop2lw">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505508"
    class="
      comment single-comment-node
      
      child
      comment--deep-4
      comment--too-deep
    "
    data-comment-id="1505508"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h24"
    data-comment-author-id="304727"
    data-content-user-id="304727">
    <a name="comment-37h24" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/strongunsullied" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304727%2Fffb0bd3b-83a0-4d27-9556-a3e6863f33c1.jpg" alt="strongunsullied profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/strongunsullied" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Kasope Johnson 
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505508" aria-controls="comment-profile-preview-content-1505508" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasope Johnson  profile details">
      Kasope Johnson 
      
    </button>
    <div id="comment-profile-preview-content-1505508" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #551029; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/strongunsullied" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304727%2Fffb0bd3b-83a0-4d27-9556-a3e6863f33c1.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Kasope Johnson 
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:304727,&quot;name&quot;:&quot;Kasope Johnson &quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasope Johnson " aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Lagos, Nigeria 
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2019-12-31T06:47:59Z" class="date">Dec 31, 2019</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h24" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T19:32:37Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505508" aria-controls="comment-dropdown-1505508" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ady67kt4rorcxklqypoedie73szw6c68" class="crayons-icon pointer-events-none"><title id="ady67kt4rorcxklqypoedie73szw6c68">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505508" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h24" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasope Johnson &#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="304727" data-action="settings-button" data-path="https://dev.to/strongunsullied/comment/37h24/settings" aria-label="Go to Kasope Johnson &#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="304727">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505508"
                data-comment-url="https://dev.to/strongunsullied/comment/37h24"
                aria-label="Hide Kasope Johnson &#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/strongunsullied/comment/37h24/mod" aria-label="Moderate Kasope Johnson &#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/strongunsullied/comment/37h24" aria-label="Report Kasope Johnson &#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p><a class="mentioned-user" href="https://dev.to/dawn_coder">@dawn_coder</a> I legit laughed at the PrimeVue part of your comment, they have like a million ways to configure it 😂</p>

<p>It's still probably the best Vue component library I've used during my vue days.. configurable with CSS vars, CSS layers etc</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505508"
    data-comment-id="1505508"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahv8eophkhcem23wxlp85i66j91hbbpg" class="crayons-icon reaction-icon not-reacted"><title id="ahv8eophkhcem23wxlp85i66j91hbbpg">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a60bgoo57lnhp7775o5for2hb1vhalxl" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a60bgoo57lnhp7775o5for2hb1vhalxl">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asib10vvh0ukj5eiz8yntpzk1n6evr7g" class="crayons-icon"><title id="asib10vvh0ukj5eiz8yntpzk1n6evr7g">Thread</title>
    <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path>
</svg>

        Thread
      </span>

</footer>

  </div>
</div>
  <div
    id="comment-node-1505536"
    class="
      comment single-comment-node
      
      child
      comment--deep-5
      comment--too-deep
    "
    data-comment-id="1505536"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h36"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37h36" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505536" aria-controls="comment-profile-preview-content-1505536" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505536" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h36" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T20:38:50Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505536" aria-controls="comment-dropdown-1505536" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akjvrhndixvkpt6amgouwck3lvlyesaa" class="crayons-icon pointer-events-none"><title id="akjvrhndixvkpt6amgouwck3lvlyesaa">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505536" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h36" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37h36/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505536"
                data-comment-url="https://dev.to/sylwia-lask/comment/37h36"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37h36/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37h36" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>BTW how do you guys like Vue?</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505536"
    data-comment-id="1505536"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1pohomyet0lt2xfkwtrmghhjtagiouj" class="crayons-icon reaction-icon not-reacted"><title id="a1pohomyet0lt2xfkwtrmghhjtagiouj">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajethpp3que9jyuyqfu7ovqv4csh5wvz" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ajethpp3que9jyuyqfu7ovqv4csh5wvz">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505536"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h36"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505536"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac0es7py4q47sooourf46ppco3q3sds7" class="crayons-icon reaction-icon not-reacted"><title id="ac0es7py4q47sooourf46ppco3q3sds7">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>


  </div>


  </div>


  </div>
    </details>


  </div>
    </details>


  </div>
    </details>

    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ato05kniyudo4xy4dvof53vmuglzno8q" class="crayons-icon expanded"><title id="ato05kniyudo4xy4dvof53vmuglzno8q">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afb4jac1y6ux9o5o2rw9kkvv91601a5x" class="crayons-icon collapsed"><title id="afb4jac1y6ux9o5o2rw9kkvv91601a5x">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505399"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1505399"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gnp"
    data-comment-author-id="3711376"
    data-content-user-id="3711376">
    <a name="comment-37gnp" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/francistrdev" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3711376%2F746cce1f-2c09-40fc-9742-387af1855b6d.gif" alt="francistrdev profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/francistrdev" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      FrancisTRᴅᴇᴠ (っ◔◡◔)っ
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505399" aria-controls="comment-profile-preview-content-1505399" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="FrancisTRᴅᴇᴠ (っ◔◡◔)っ profile details">
      FrancisTRᴅᴇᴠ (っ◔◡◔)っ
      <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a>
    </button>
    <div id="comment-profile-preview-content-1505399" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #00cae0; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/francistrdev" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3711376%2F746cce1f-2c09-40fc-9742-387af1855b6d.gif" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      FrancisTRᴅᴇᴠ (っ◔◡◔)っ
      <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" />
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3711376,&quot;name&quot;:&quot;FrancisTRᴅᴇᴠ (っ◔◡◔)っ&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: FrancisTRᴅᴇᴠ (っ◔◡◔)っ" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    📚 Full-Stack Engineer 📚
&quot;A Smooth Sea never made a Skilled Sailor&quot; - Franklin D. Roosevelt
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            United States
          </div>
        </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              He/Him
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Forem Open Source Contributor
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-01-14T17:11:42Z" class="date">Jan 14, 2026</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gnp" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T15:26:40Z" class=date-no-year>
    May 5
  </time>

    <span class="hidden m:inline-block">&bull; Edited on <time datetime="2026-05-05T15:27:33Z" class="date-no-year">May 5</time></span>
    <span class="m:hidden">&bull; Edited</span>
</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505399" aria-controls="comment-dropdown-1505399" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="al4w7rss4xs66v82drj0ai2fv06l741u" class="crayons-icon pointer-events-none"><title id="al4w7rss4xs66v82drj0ai2fv06l741u">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505399" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37gnp" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to FrancisTRᴅᴇᴠ (っ◔◡◔)っ&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3711376" data-action="settings-button" data-path="https://dev.to/francistrdev/comment/37gnp/settings" aria-label="Go to FrancisTRᴅᴇᴠ (っ◔◡◔)っ&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3711376">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505399"
                data-comment-url="https://dev.to/francistrdev/comment/37gnp"
                aria-label="Hide FrancisTRᴅᴇᴠ (っ◔◡◔)っ&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/francistrdev/comment/37gnp/mod" aria-label="Moderate FrancisTRᴅᴇᴠ (っ◔◡◔)っ&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/francistrdev/comment/37gnp" aria-label="Report FrancisTRᴅᴇᴠ (っ◔◡◔)っ&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <blockquote>
<p>I don’t think Tailwind (or something similar) should replace handcrafted CSS everywhere.</p>
</blockquote>

<p>I don't think it was suppose to be replaced at all. It's just a library like Bootstrap. It's weird for me to think that a "library" will replace a core functionality. Sure, there are cases where that may replace something (which I can't think of anything at the moment), but that's usually rare for a library or framework since it mostly based on preferences of the Developer (Unless you are talking about AI lol). Although it makes it easier for developers, there are some cases where you have to use CSS like you listed for specific cases that Tailwind cannot do.</p>

<p>Yes, it's probably possible to replace CSS with Tailwind if you are a developer who wants to go full Tailwind or Bootstrap mode. For me, I like a good mix of both. Again, it's based on preferences and I don't think it's a big deal in my opinion. Thanks!</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505399"
    data-comment-id="1505399"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1tfyf857hz0ytx3cshs6hi7an9b72oy" class="crayons-icon reaction-icon not-reacted"><title id="a1tfyf857hz0ytx3cshs6hi7an9b72oy">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a74xrxw93ls2wrco99za9ot5pbcmfdq7" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a74xrxw93ls2wrco99za9ot5pbcmfdq7">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505399"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gnp"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505399"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9s61vlnfuis9dm6sm681oqvpfcgoefy" class="crayons-icon reaction-icon not-reacted"><title id="a9s61vlnfuis9dm6sm681oqvpfcgoefy">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aioti42364cm8jwx0kfp5vl6n0rcxkv2" class="crayons-icon expanded"><title id="aioti42364cm8jwx0kfp5vl6n0rcxkv2">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ass8ow937a73un0vb6j9xbbp20vw2h68" class="crayons-icon collapsed"><title id="ass8ow937a73un0vb6j9xbbp20vw2h68">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1505519"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505519"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h2f"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37h2f" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505519" aria-controls="comment-profile-preview-content-1505519" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1505519" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:3535771,&quot;name&quot;:&quot;Sylwia Laskowska&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sylwia Laskowska" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Software dev • 10+ yrs of code &amp; caffeine ☕ • Sci-fi fan • Bug whisperer 🐞
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Gdansk, Poland
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2025-09-28T19:50:34Z" class="date">Sep 28, 2025</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>

      <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>

  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h2f" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T19:44:53Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505519" aria-controls="comment-dropdown-1505519" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amkqgmsdvbltz4f31bo8sl45v9xp6zaz" class="crayons-icon pointer-events-none"><title id="amkqgmsdvbltz4f31bo8sl45v9xp6zaz">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1505519" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37h2f" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Sylwia Laskowska&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3535771" data-action="settings-button" data-path="https://dev.to/sylwia-lask/comment/37h2f/settings" aria-label="Go to Sylwia Laskowska&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3535771">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1505519"
                data-comment-url="https://dev.to/sylwia-lask/comment/37h2f"
                aria-label="Hide Sylwia Laskowska&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/sylwia-lask/comment/37h2f/mod" aria-label="Moderate Sylwia Laskowska&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/sylwia-lask/comment/37h2f" aria-label="Report Sylwia Laskowska&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>Yes, exactly 🙂 As long as it doesn’t turn into a mess where Tailwind is used in one place, plain CSS somewhere else, and no one really knows what goes where. You just need clear rules for when to use what.</p>

<p>And yeah, using Tailwind definitely doesn’t mean giving up CSS 😄</p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1505519"
    data-comment-id="1505519"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ag7im93wx8jd2q2doiiywotkga48meec" class="crayons-icon reaction-icon not-reacted"><title id="ag7im93wx8jd2q2doiiywotkga48meec">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6coluhqhqxxb9jejvn8gqvy43yarrxh" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a6coluhqhqxxb9jejvn8gqvy43yarrxh">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1505519"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h2f"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505519"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4uewsdci0nbcb3le8rl9mp8uodb7dzy" class="crayons-icon reaction-icon not-reacted"><title id="a4uewsdci0nbcb3le8rl9mp8uodb7dzy">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>


  </div>
    </details>


  </div>
    </details>

    <div class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/bmar11/post_comments_mid"></div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
                    root
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="m:mx-1 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aemzlq63pfsmc5xb9rw99ag54e68675w" class="crayons-icon expanded"><title id="aemzlq63pfsmc5xb9rw99ag54e68675w">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="af3csav5gp55d6lz3obo891i4i6b0c30" class="crayons-icon collapsed"><title id="af3csav5gp55d6lz3obo891i4i6b0c30">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504731"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504731"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fo7"
    data-comment-author-id="235303"
    data-content-user-id="235303">
    <a name="comment-37fo7" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/xwero" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F235303%2F628f8014-0a74-492d-9d70-5347d8729312.png" alt="xwero profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/xwero" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      david duymelinck
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504731" aria-controls="comment-profile-preview-content-1504731" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="david duymelinck profile details">
      david duymelinck
      
    </button>
    <div id="comment-profile-preview-content-1504731" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #551029; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/xwero" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F235303%2F628f8014-0a74-492d-9d70-5347d8729312.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      david duymelinck
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:235303,&quot;name&quot;:&quot;david duymelinck&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: david duymelinck" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Learned to code in the wild west time of php 4, also the time xml and xpath where the new hot thing.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Belgium
          </div>
        </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2019-09-24T03:27:54Z" class="date">Sep 24, 2019</time>
        </div>
      </li>
    </ul>
  </div>

    </div>
</div>


  </div>

  <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>

<a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fo7" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T16:40:46Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504731" aria-controls="comment-dropdown-1504731" aria-expanded="false"
      class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
      aria-label="Toggle dropdown menu" aria-haspopup="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amq63oorhaj82jhhqd1esn2uc4oivv06" class="crayons-icon pointer-events-none"><title id="amq63oorhaj82jhhqd1esn2uc4oivv06">Dropdown menu</title>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>

    </button>
    <div id="comment-dropdown-1504731" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
      <ul class="m-0">
        <li><a href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh#comment-37fo7" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to david duymelinck&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="235303" data-action="settings-button" data-path="https://dev.to/xwero/comment/37fo7/settings" aria-label="Go to david duymelinck&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="235303">
              <button
                class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
                data-hide-type="hide"
                data-comment-id="1504731"
                data-comment-url="https://dev.to/xwero/comment/37fo7"
                aria-label="Hide david duymelinck&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/xwero/comment/37fo7/mod" aria-label="Moderate david duymelinck&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/xwero/comment/37fo7" aria-label="Report david duymelinck&#39;s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
        <li class="current-user-actions"></li>
      </ul>
    </div>
  </div>
</div>


        <div
          class="
            comment__body
            text-styles
            text-styles--secondary
            body
            
            
          ">
          <p>What I get from the post and the comments is that most people think writing CSS is starting from scratch every time. When that is your workflow I can understand why you want to use Tailwind.</p>

<p>You don't need to create a whole design system. Start with components that are very common like hero, input, button, navigation, ... After a while you will have a collection to build almost every website. To get started quickly you can use Tailwind, one of its purposes was quick prototyping. But the prototypes ended up in production as it goes with a lot of code.<br>
The main benefit of working that way is that it is build to your (teams) taste. With Tailwind you have to accept their naming.</p>

<p>About the maintenance of the components. When do you really need to change them? When you want to benefit from new CSS features. </p>

<p>About the dead code. Tailwind used a build step to collect all the classes in html files to generate the production css file. It is not that hard to write a script that does the same for your code.</p>

<p>Using "crafty" CSS doesn't mean you can't create tools to make you as productive as with Tailwind.<br>
And by keeping closer to CSS it is easier to change direction. Tailwind is an oil tanker because it is that popular. </p>


        </div>

    </div>

    <script>
    </script>

    <footer class="comment__footer print-hidden">
  <button
    class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
    id="button-for-comment-1504731"
    data-comment-id="1504731"
    aria-label="like"
    data-tracking-name="comment_heart_button">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7ron9pcp3fi8rfjz0amcqvmbfmsdnjg" class="crayons-icon reaction-icon not-reacted"><title id="a7ron9pcp3fi8rfjz0amcqvmbfmsdnjg">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2jzac1jteznuo1q63lywvcfu94bes5j" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a2jzac1jteznuo1q63lywvcfu94bes5j">Like comment: </title>
    <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
</svg>

    <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block">&nbsp;likes</span>
    <span data-testid="tooltip" class="crayons-tooltip__content">
      Like
    </span>
  </button>

      <button
        class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
        data-comment-id="1504731"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fo7"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504731"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="an745mgajc1qcamtc0cftxsn6dl0uhnp" class="crayons-icon reaction-icon not-reacted"><title id="an745mgajc1qcamtc0cftxsn6dl0uhnp">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>

        <span class="hidden m:inline-block">Reply</span>
      </button>

</footer>

  </div>
</div>
    <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1
                    child
                    " open>
      <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
        <span class="mx-0 inline-block align-middle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="am444i3dbd2fw0hb3a6tl3toph7jl93k" class="crayons-icon expanded"><title id="am444i3dbd2fw0hb3a6tl3toph7jl93k">Collapse</title>
    <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
</svg>

          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="apxfiekw4ghwny06ta9waogfin88k0uc" class="crayons-icon collapsed"><title id="apxfiekw4ghwny06ta9waogfin88k0uc">Expand</title>
    <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
</svg>

        </span>
        <span class="js-collapse-comment-content inline-block align-middle"></span>
      </summary>
  <div
    id="comment-node-1504810"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504810"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g18"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37g18" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/sylwia-lask" class="shrink-0 crayons-avatar mt-4">
    <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" alt="sylwia-lask profile image" loading="lazy" />
  </a>


  <div class="inner-comment comment__details">
    <div class="comment__content crayons-card">
        


        <div class="comment__header">
  <a href="https://dev.to/sylwia-lask" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Sylwia Laskowska
    </span>
      <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon">
    <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path>
</svg>

      </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504810" aria-controls="comment-profile-preview-content-1504810" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Sylwia Laskowska profile details">
      Sylwia Laskowska
      
    </button>
    <div id="comment-profile-preview-content-1504810" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #266b7d; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
    <div class="gap-4 grid">
        <div class="-mt-4">
  <a href="/sylwia-lask" class="flex">
    <span class="crayons-avatar crayons-avatar--xl  mr-2 shrink-0">
      <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3535771%2Fe22860d5-274b-43c9-819b-56b162e5bd5a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Sylwia Laskowska
      
    </span>
  </a>
</div>

<div class="print-hidden">
  <button name="button" type="button" data-info="{
... [TRUNCATED]