<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Discussion of I Love Tailwind. Sorry Not Sorry - DEV Community</title>
    
    <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...">
    <meta name="keywords" content="software, coding, development, engineering, inclusive, community">

    <meta property="og:type" content="article" />
    <meta property="og:title" content="Discussion of I Love Tailwind. Sorry Not Sorry" />
    <meta property="og:description" content="I’m going on a short vacation this week, so this post is coming out a bit earlier than usual. I..." />
    <meta property="og:site_name" content="DEV Community" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@thepracticaldev">
    <meta name="twitter:creator" content="@SylwiaLask8977">
    <meta name="twitter:title" content="I Love Tailwind. Sorry Not Sorry">
    <meta name="twitter:description" content="I’m going on a short vacation this week, so this post is coming out a bit earlier than usual. I...">

      <link rel="canonical" href="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments" />
      <meta property="og:url" content="https://dev.to/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments" />
      <meta property="og:title" content="[Discussion] I Love Tailwind. Sorry Not Sorry — DEV Community" />
      <meta name="twitter:title" content="[Discussion] I Love Tailwind. Sorry Not Sorry — DEV Community">
        <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg">
        <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg">

    <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 comments comments-index articletag-css articletag-tailwindcss articletag-frontend articletag-discuss articleuser-3535771" data-current-page="comments-index">
  <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>

    <script src="https://assets.dev.to/assets/postCommentsPage-9cadd9d7d759106335e33acfc211c369baacfee925030a4f39878cc99c020166.js" defer="defer"></script>

  
<script src="https://assets.dev.to/assets/commentDropdowns-7a28d130e5b78d38b30a9495a964003a66bd64fa455fc70b766d69cf06b9ba24.js" defer="defer"></script>

<div class="crayons-layout crayons-layout--limited-l gap-0" data-follow-button-container="true">
    <span id="comment-article-indicator" data-article-id="3605102"></span>

    <article class="crayons-article crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0 hidden-shell-innerhidden">
      <header class="crayons-article__header">
          <div class="crayons-article__cover">
            <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" width="1000" style="background-color:#dddddd;" class="crayons-article__cover__image" alt="Cover image for I Love Tailwind. Sorry Not Sorry">
          </div>

        <div class="crayons-article__header__meta">
          <h1 class="fs-2xl s:fs-3xl l:fs-4xl fw-bold s:fw-heavy lh-tight mb-1">
            I Love Tailwind. Sorry Not Sorry
          </h1>
          <p class="color-base-60">
            Sylwia Laskowska<span class="published-at"> on May 04, 2026</span>
          </p>
        </div>
      </header>

        <div class="crayons-article__main">
          <div class="crayons-article__body text-styles -mt-1 m:-mt-2">
              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 mi...
              <div class="pt-6">
                <a class="crayons-btn crayons-btn--outlined" href="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh">Read full post</a>
          </div>
        </div>
    </article>


  <section
    class="crayons-card text-padding min-w-0 z-elevate"
    id="comments-container"
    data-commentable-id="3605102"
    data-commentable-type="Article"
    data-commentable-author-id="3535771"
    data-commentable-co-author-ids="">

        <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="afe6fvn8ze7b025lpa8tt4irtvttwg0f" class="crayons-icon expanded"><title id="afe6fvn8ze7b025lpa8tt4irtvttwg0f">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="a33lefj8aviq6376mn9ykbk1ogm7zpzm" class="crayons-icon collapsed"><title id="a33lefj8aviq6376mn9ykbk1ogm7zpzm">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="agqbm28vb5j7r2pc8g1u4c4bmzttq8zs" class="crayons-icon pointer-events-none"><title id="agqbm28vb5j7r2pc8g1u4c4bmzttq8zs">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="aagv9vn16qq25fspwnzo8hjh80ydzjhx" class="crayons-icon reaction-icon not-reacted"><title id="aagv9vn16qq25fspwnzo8hjh80ydzjhx">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="a1q44ubggt93fnfa84mf8ys07np5fc0b" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1q44ubggt93fnfa84mf8ys07np5fc0b">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="apnyp20wydj075fo91fokx6g7p0i4jyu" class="crayons-icon reaction-icon not-reacted"><title id="apnyp20wydj075fo91fokx6g7p0i4jyu">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="a5xmqpeh3xrpbnu2kqgc7kkv4jpe450a" class="crayons-icon expanded"><title id="a5xmqpeh3xrpbnu2kqgc7kkv4jpe450a">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="akyqn5q1aa83y26zlmqvr7svvznypru2" class="crayons-icon collapsed"><title id="akyqn5q1aa83y26zlmqvr7svvznypru2">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="a1byhgrx8jnw06urlnpexulnrmtctg25" class="crayons-icon pointer-events-none"><title id="a1byhgrx8jnw06urlnpexulnrmtctg25">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="akei5lkm3jzsqj65hqirsk3cb88d66q3" class="crayons-icon reaction-icon not-reacted"><title id="akei5lkm3jzsqj65hqirsk3cb88d66q3">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="a6rzqb569hafp2j7534i91sv3wvvp013" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a6rzqb569hafp2j7534i91sv3wvvp013">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="ag1hsjpkyfokr57dxghtktl3ijke605l" class="crayons-icon reaction-icon not-reacted"><title id="ag1hsjpkyfokr57dxghtktl3ijke605l">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="al75oyr1yyssy60thzrdn1cjlt8ikbiv" class="crayons-icon expanded"><title id="al75oyr1yyssy60thzrdn1cjlt8ikbiv">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="a916k8n5m1xztdr797mhod6lxhbd95d7" class="crayons-icon collapsed"><title id="a916k8n5m1xztdr797mhod6lxhbd95d7">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="aov0cw5xmdamk9dq1048pbewxmhtj646" class="crayons-icon pointer-events-none"><title id="aov0cw5xmdamk9dq1048pbewxmhtj646">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="apx3nmm7qs8yiyzgvrlq6gr3omadj8b5" class="crayons-icon reaction-icon not-reacted"><title id="apx3nmm7qs8yiyzgvrlq6gr3omadj8b5">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="air7o9a2549xzv8lm16mh1o23ir52y3w" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="air7o9a2549xzv8lm16mh1o23ir52y3w">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="aooxvpd0nhdrg4c9k42ctnln5fbkup3o" class="crayons-icon reaction-icon not-reacted"><title id="aooxvpd0nhdrg4c9k42ctnln5fbkup3o">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="a6ik54v019ipy1x4262b6jbfcge043wp" class="crayons-icon expanded"><title id="a6ik54v019ipy1x4262b6jbfcge043wp">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="adge95m15sbb12l6hk2miygj6r6euepi" class="crayons-icon collapsed"><title id="adge95m15sbb12l6hk2miygj6r6euepi">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="apcdg13u5plnrbw9ee9jc8vi68z02ttw" class="crayons-icon pointer-events-none"><title id="apcdg13u5plnrbw9ee9jc8vi68z02ttw">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="aflg4bosesuy75qpdbvyuir8ek9ka0fh" class="crayons-icon reaction-icon not-reacted"><title id="aflg4bosesuy75qpdbvyuir8ek9ka0fh">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="an7ejsv088tjmjxt4qsaj6b9jaxtna1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="an7ejsv088tjmjxt4qsaj6b9jaxtna1">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="ab0f7jzgpbt5i2v53cwstg41jnmbntnk" class="crayons-icon reaction-icon not-reacted"><title id="ab0f7jzgpbt5i2v53cwstg41jnmbntnk">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="ad79snrb6ml7eo6ymg8jfendm4l0uc5a" class="crayons-icon expanded"><title id="ad79snrb6ml7eo6ymg8jfendm4l0uc5a">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="a4qwjp3nln8995n98wawfe0dc8gl0xtg" class="crayons-icon collapsed"><title id="a4qwjp3nln8995n98wawfe0dc8gl0xtg">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="ahrdanwo3efb24n1cwd0kbw4ikzna7rl" class="crayons-icon pointer-events-none"><title id="ahrdanwo3efb24n1cwd0kbw4ikzna7rl">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="almv0q7dj7s591q9swpx9hylqdwy0qfw" class="crayons-icon reaction-icon not-reacted"><title id="almv0q7dj7s591q9swpx9hylqdwy0qfw">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="ago8cfxak4fo5ar88q10leu2mki9v3zs" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ago8cfxak4fo5ar88q10leu2mki9v3zs">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="afwy9rm6adt2b1eg6qcqw940vfldvda6" class="crayons-icon reaction-icon not-reacted"><title id="afwy9rm6adt2b1eg6qcqw940vfldvda6">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="adrgpcp18grlhb16ofs2ut00pg45djuk" class="crayons-icon expanded"><title id="adrgpcp18grlhb16ofs2ut00pg45djuk">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="a3qur9zeq49w2souj74d2j294uptqp1l" class="crayons-icon collapsed"><title id="a3qur9zeq49w2souj74d2j294uptqp1l">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="aqicbnbo9yix3dlwruuphea7zzy1oilp" class="crayons-icon pointer-events-none"><title id="aqicbnbo9yix3dlwruuphea7zzy1oilp">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="a3wwv7hfh26bucui40dyvy35px5aetnv" class="crayons-icon reaction-icon not-reacted"><title id="a3wwv7hfh26bucui40dyvy35px5aetnv">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="asfcalsqac0x9ixwmyz2kwpktg0nsgii" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asfcalsqac0x9ixwmyz2kwpktg0nsgii">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="amcxia6waqpulatcg7pvyrh62lihj8c" class="crayons-icon reaction-icon not-reacted"><title id="amcxia6waqpulatcg7pvyrh62lihj8c">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="a84qkfngta90nv0y1nruhrbibj6bnsi8" class="crayons-icon expanded"><title id="a84qkfngta90nv0y1nruhrbibj6bnsi8">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="a4a2bdu22339z0g42momy83lvpe5rge7" class="crayons-icon collapsed"><title id="a4a2bdu22339z0g42momy83lvpe5rge7">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="a2zso4iyd8s2l7ybno0ieouxmwhhw961" class="crayons-icon pointer-events-none"><title id="a2zso4iyd8s2l7ybno0ieouxmwhhw961">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="a2fxpdykp5hnxzoy3v3ypvrd2kghm2yu" class="crayons-icon reaction-icon not-reacted"><title id="a2fxpdykp5hnxzoy3v3ypvrd2kghm2yu">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="al3jl032f5mq1ze0m5orym3ej0ygaaut" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="al3jl032f5mq1ze0m5orym3ej0ygaaut">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="ax4lhab7q9ziq1dsgry4taq1ou6ba7c" class="crayons-icon reaction-icon not-reacted"><title id="ax4lhab7q9ziq1dsgry4taq1ou6ba7c">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="aq8iaevukisqtyhkuki9tflcodyyya3l" class="crayons-icon expanded"><title id="aq8iaevukisqtyhkuki9tflcodyyya3l">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="ab0kd2dut1i1dgwr5l6yo6m90hsiw2k4" class="crayons-icon collapsed"><title id="ab0kd2dut1i1dgwr5l6yo6m90hsiw2k4">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="adqb2ebwoc5fcddpbbmqh1n46n79hj00" class="crayons-icon pointer-events-none"><title id="adqb2ebwoc5fcddpbbmqh1n46n79hj00">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="addxmv14bsmyp0jd56ehtf5el3g2b31l" class="crayons-icon reaction-icon not-reacted"><title id="addxmv14bsmyp0jd56ehtf5el3g2b31l">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="akrleriyg4cpzhjk9yek5o700agkz0v1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="akrleriyg4cpzhjk9yek5o700agkz0v1">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="a2kohryp6tib6mr5m7mlq022dpzo3alv" class="crayons-icon"><title id="a2kohryp6tib6mr5m7mlq022dpzo3alv">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="arzzix2m7qsbh4mf9vyxzu3qithqxpo6" class="crayons-icon pointer-events-none"><title id="arzzix2m7qsbh4mf9vyxzu3qithqxpo6">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="afucdetbpewecyp3a9nrbf8pnzhimjff" class="crayons-icon reaction-icon not-reacted"><title id="afucdetbpewecyp3a9nrbf8pnzhimjff">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="apqkkhuecrn93ha7u196o59ve496n9r8" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="apqkkhuecrn93ha7u196o59ve496n9r8">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="aevpqz57xki9kppn706cqrq9myeb5g1u" class="crayons-icon reaction-icon not-reacted"><title id="aevpqz57xki9kppn706cqrq9myeb5g1u">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="akcpete034exhm199rrwr7qimvooxfki" class="crayons-icon expanded"><title id="akcpete034exhm199rrwr7qimvooxfki">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="a7o88lj4va2ra4yz3v7czer1wwtztmx1" class="crayons-icon collapsed"><title id="a7o88lj4va2ra4yz3v7czer1wwtztmx1">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="a3rmf2234b0agbnxrkgislgwkyhz4k8m" class="crayons-icon pointer-events-none"><title id="a3rmf2234b0agbnxrkgislgwkyhz4k8m">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="a3233jrafzpi2mvtceivg0k8bzvkceoc" class="crayons-icon reaction-icon not-reacted"><title id="a3233jrafzpi2mvtceivg0k8bzvkceoc">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="asxvz9xm8lcbut9zzd9jyennm332iatu" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asxvz9xm8lcbut9zzd9jyennm332iatu">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="a4h3nr6br28fc66pwly9nwvteuqyc1c0" class="crayons-icon reaction-icon not-reacted"><title id="a4h3nr6br28fc66pwly9nwvteuqyc1c0">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="aba606cnfnommv4u44sujh3sj8it0e85" class="crayons-icon expanded"><title id="aba606cnfnommv4u44sujh3sj8it0e85">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="a2q3sp0xd95jl61t5agvrsziwj5qwtno" class="crayons-icon collapsed"><title id="a2q3sp0xd95jl61t5agvrsziwj5qwtno">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="a1trh5xv3ldchfomhzm6z3coqrvl8t4f" class="crayons-icon pointer-events-none"><title id="a1trh5xv3ldchfomhzm6z3coqrvl8t4f">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="a3haa78alq2bvl9lwtpapz3vcnvyfwk0" class="crayons-icon reaction-icon not-reacted"><title id="a3haa78alq2bvl9lwtpapz3vcnvyfwk0">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="a1y4ec9f3wefk9rwv6jx43ueg47i5pmn" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1y4ec9f3wefk9rwv6jx43ueg47i5pmn">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="ar3fwabps1gxk0xobiuyqcqz4lfyn99f" class="crayons-icon reaction-icon not-reacted"><title id="ar3fwabps1gxk0xobiuyqcqz4lfyn99f">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="amq28bn9ab1xk7w2fys1lb2m13vbjaep" class="crayons-icon expanded"><title id="amq28bn9ab1xk7w2fys1lb2m13vbjaep">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="as7wt1mpyjn2gs0up04zx5caqdspagck" class="crayons-icon collapsed"><title id="as7wt1mpyjn2gs0up04zx5caqdspagck">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="aaw8n7cn65186ylxxeb7yg9bp2qy5g3c" class="crayons-icon pointer-events-none"><title id="aaw8n7cn65186ylxxeb7yg9bp2qy5g3c">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="aqfio3nwsycvst204nqqternfockz6x" class="crayons-icon reaction-icon not-reacted"><title id="aqfio3nwsycvst204nqqternfockz6x">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="ag96w6guqbfbxlw31v81xlk3w367g4u1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ag96w6guqbfbxlw31v81xlk3w367g4u1">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="a8t8tqmlpll0pvsqi112ma0gzpe01275" class="crayons-icon reaction-icon not-reacted"><title id="a8t8tqmlpll0pvsqi112ma0gzpe01275">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="anvik9ectns5awyr2a0wgozs3iefgzcm" class="crayons-icon expanded"><title id="anvik9ectns5awyr2a0wgozs3iefgzcm">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="akr6t9u5vrphzr4ay3653kz2iq2fmc5q" class="crayons-icon collapsed"><title id="akr6t9u5vrphzr4ay3653kz2iq2fmc5q">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="a4ihqf8oahfzhdjfawdz3jywvruetrkt" class="crayons-icon pointer-events-none"><title id="a4ihqf8oahfzhdjfawdz3jywvruetrkt">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="a80k88wigwimyacnq02fegux1vqp3o6h" class="crayons-icon reaction-icon not-reacted"><title id="a80k88wigwimyacnq02fegux1vqp3o6h">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="aom9275q7xrytwm1qggug0ditlyfn0ku" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aom9275q7xrytwm1qggug0ditlyfn0ku">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="almhvybkdxr4b3ceqb4dcng8b3ulmtu2" class="crayons-icon reaction-icon not-reacted"><title id="almhvybkdxr4b3ceqb4dcng8b3ulmtu2">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="aizqgabuzxzb0vl531ayagc0x65p61jf" class="crayons-icon expanded"><title id="aizqgabuzxzb0vl531ayagc0x65p61jf">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="a64mwn7rmppq6zhoikbutfjffh7y1oiu" class="crayons-icon collapsed"><title id="a64mwn7rmppq6zhoikbutfjffh7y1oiu">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="ade63ocm75br0hcagm8ywz75rhn1rhyv" class="crayons-icon pointer-events-none"><title id="ade63ocm75br0hcagm8ywz75rhn1rhyv">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="aep8nfqi5a5ttr801n7dthv2o3zwa4g" class="crayons-icon reaction-icon not-reacted"><title id="aep8nfqi5a5ttr801n7dthv2o3zwa4g">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="ah5ktl6mov9feqqhotc6grkpl0j8e5s4" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ah5ktl6mov9feqqhotc6grkpl0j8e5s4">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="aafoe2o6nl483o2zjenfbauabbugyurn" class="crayons-icon reaction-icon not-reacted"><title id="aafoe2o6nl483o2zjenfbauabbugyurn">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="a8aqq9ymtzi9kz11qqv0x2srjlnhfp6m" class="crayons-icon expanded"><title id="a8aqq9ymtzi9kz11qqv0x2srjlnhfp6m">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="ak7xxu6wv5yvfwj0ossy8xbrxmsjfqkh" class="crayons-icon collapsed"><title id="ak7xxu6wv5yvfwj0ossy8xbrxmsjfqkh">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="amooudx0quqjr14mgk5u0vunzt9o0rwd" class="crayons-icon pointer-events-none"><title id="amooudx0quqjr14mgk5u0vunzt9o0rwd">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="aemlxmeurgz64igaihh53gzyijt04x23" class="crayons-icon reaction-icon not-reacted"><title id="aemlxmeurgz64igaihh53gzyijt04x23">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="a2ei94kgig5yw43wbt93e3yb67u0aer4" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a2ei94kgig5yw43wbt93e3yb67u0aer4">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="apgphr9np1f5ag92eaerdstdgnwq4krc" class="crayons-icon reaction-icon not-reacted"><title id="apgphr9np1f5ag92eaerdstdgnwq4krc">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="a2zwpmolkjubjvhhoc6yuhwrlue85rw4" class="crayons-icon expanded"><title id="a2zwpmolkjubjvhhoc6yuhwrlue85rw4">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="akrt72eftr94z637w5tgd0smi0dannd8" class="crayons-icon collapsed"><title id="akrt72eftr94z637w5tgd0smi0dannd8">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="ac97a19m310umzk9d3ghv1ejtbvheixg" class="crayons-icon pointer-events-none"><title id="ac97a19m310umzk9d3ghv1ejtbvheixg">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="a7awgao5uqu6t7ddgv1oyrc3689fwigb" class="crayons-icon reaction-icon not-reacted"><title id="a7awgao5uqu6t7ddgv1oyrc3689fwigb">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="afs2n0u5bqeah9u2uwp3qqbflwomfguc" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="afs2n0u5bqeah9u2uwp3qqbflwomfguc">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="acrwgxot8oarhiz769ne7o0iq718yf4r" class="crayons-icon"><title id="acrwgxot8oarhiz769ne7o0iq718yf4r">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="aqnnvl4n2uoisha69sr8rniearpsi92w" class="crayons-icon pointer-events-none"><title id="aqnnvl4n2uoisha69sr8rniearpsi92w">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="anw16xkbgyccwjuy7fccrsfahxl4e012" class="crayons-icon reaction-icon not-reacted"><title id="anw16xkbgyccwjuy7fccrsfahxl4e012">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="aqj66fm2d0j4o2nijam7hbhih46zd02v" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aqj66fm2d0j4o2nijam7hbhih46zd02v">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="aqsf2bzdz7nqw0t5ki3fre9hb2jytqs" class="crayons-icon"><title id="aqsf2bzdz7nqw0t5ki3fre9hb2jytqs">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="a3khw7mlx32l00ncz21nf9msvpyc5q6f" class="crayons-icon pointer-events-none"><title id="a3khw7mlx32l00ncz21nf9msvpyc5q6f">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="a8k5htds012ikiijb7uxsc39uqaoppo3" class="crayons-icon reaction-icon not-reacted"><title id="a8k5htds012ikiijb7uxsc39uqaoppo3">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="a8gw4cnpund6vyxp19yr9cc04y88j8be" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a8gw4cnpund6vyxp19yr9cc04y88j8be">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="1504268"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37f6c"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504268"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arpfdok2ixd50rfs7mvkp7f2j82gk5ze" class="crayons-icon reaction-icon not-reacted"><title id="arpfdok2ixd50rfs7mvkp7f2j82gk5ze">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>


  </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="agp3vc0pordw55xi59iooy1zbn6wjoyh" class="crayons-icon expanded"><title id="agp3vc0pordw55xi59iooy1zbn6wjoyh">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="agc62rin9hn2ibwfkt1wc04qg9w7l7u3" class="crayons-icon collapsed"><title id="agc62rin9hn2ibwfkt1wc04qg9w7l7u3">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="a2kae69e6usiosbav63zorrpahhykl3a" class="crayons-icon pointer-events-none"><title id="a2kae69e6usiosbav63zorrpahhykl3a">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="a4ualwucp6x1m6dfq1m2093yn5ushh30" class="crayons-icon reaction-icon not-reacted"><title id="a4ualwucp6x1m6dfq1m2093yn5ushh30">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="aq9bwgis1gzmmody98mdkjp9yh27wjhf" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aq9bwgis1gzmmody98mdkjp9yh27wjhf">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="ahjdwono791zvnxfxgs3bkor44u6t3oz" class="crayons-icon reaction-icon not-reacted"><title id="ahjdwono791zvnxfxgs3bkor44u6t3oz">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="aax0gzix069087a5n6qbhvos53v3jzu6" class="crayons-icon expanded"><title id="aax0gzix069087a5n6qbhvos53v3jzu6">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="aovx9r56rt6skfqtgirtf0tyx61kgbsf" class="crayons-icon collapsed"><title id="aovx9r56rt6skfqtgirtf0tyx61kgbsf">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="alb2z6z3mjwq3wfn7nekxt0giia6q4hr" class="crayons-icon pointer-events-none"><title id="alb2z6z3mjwq3wfn7nekxt0giia6q4hr">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="ah8f62va985bq86i86j6a173bapo8abe" class="crayons-icon reaction-icon not-reacted"><title id="ah8f62va985bq86i86j6a173bapo8abe">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="agm3q1isrjpqqna4hngzc03xgh6k04r7" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="agm3q1isrjpqqna4hngzc03xgh6k04r7">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="arzj6cmc0vb0wzj2346wdegiwi9i1ihq" class="crayons-icon reaction-icon not-reacted"><title id="arzj6cmc0vb0wzj2346wdegiwi9i1ihq">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="agr73hw4j36vd8q9mzjmlah0co73lcnn" class="crayons-icon expanded"><title id="agr73hw4j36vd8q9mzjmlah0co73lcnn">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="a4e9qd5vncbejp186v8ve45eyetrjlrc" class="crayons-icon collapsed"><title id="a4e9qd5vncbejp186v8ve45eyetrjlrc">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="ab9ktqdjqvfgc2ogqpv4h7n79w9nou4q" class="crayons-icon pointer-events-none"><title id="ab9ktqdjqvfgc2ogqpv4h7n79w9nou4q">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="abrbzovaae21rwu4ojgpvmeqfem674ww" class="crayons-icon reaction-icon not-reacted"><title id="abrbzovaae21rwu4ojgpvmeqfem674ww">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="afpstdoempeuild8p9h8e4gaaxeyyebe" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="afpstdoempeuild8p9h8e4gaaxeyyebe">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="a2gf8nq4iiggne3iq9tggfkk0r3hjj8i" class="crayons-icon"><title id="a2gf8nq4iiggne3iq9tggfkk0r3hjj8i">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="a5ok3ylrg14hjfghyrzhndw60wmhylq0" class="crayons-icon pointer-events-none"><title id="a5ok3ylrg14hjfghyrzhndw60wmhylq0">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="akgkw5pkyu6hhc33x2d3oa87hls2xz4u" class="crayons-icon reaction-icon not-reacted"><title id="akgkw5pkyu6hhc33x2d3oa87hls2xz4u">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="a9d10n24gdv0utenk883vuxla8b098lb" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a9d10n24gdv0utenk883vuxla8b098lb">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="aq0gpgwkg3t7qnih4xe144h83w0ecsvg" class="crayons-icon reaction-icon not-reacted"><title id="aq0gpgwkg3t7qnih4xe144h83w0ecsvg">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="a5fs7uah1vro5rkunvggijm3170kas5r" class="crayons-icon expanded"><title id="a5fs7uah1vro5rkunvggijm3170kas5r">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="acnhvcf5f7aq7zvbyvx2vughdjf53t28" class="crayons-icon collapsed"><title id="acnhvcf5f7aq7zvbyvx2vughdjf53t28">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="akxz8uv3bg9qjysa35vs1kroqr8kicyc" class="crayons-icon pointer-events-none"><title id="akxz8uv3bg9qjysa35vs1kroqr8kicyc">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="a7dvfkv7kt9vt6fq6fyztivgqjup23bp" class="crayons-icon reaction-icon not-reacted"><title id="a7dvfkv7kt9vt6fq6fyztivgqjup23bp">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="aru9p71ihk35oyhmusnnop2e1k0ieqtc" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aru9p71ihk35oyhmusnnop2e1k0ieqtc">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="ap687jgw5syt8skhf45jph3zefqpn4qu" class="crayons-icon reaction-icon not-reacted"><title id="ap687jgw5syt8skhf45jph3zefqpn4qu">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="aa69czzmosq3n5ef8z4bdbhyc0kloqwo" class="crayons-icon expanded"><title id="aa69czzmosq3n5ef8z4bdbhyc0kloqwo">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="ac52753ml4mictvei197tn1hjf5q9f7f" class="crayons-icon collapsed"><title id="ac52753ml4mictvei197tn1hjf5q9f7f">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="asd18ee0830gt2ej4cls22m7y3zssjk" class="crayons-icon pointer-events-none"><title id="asd18ee0830gt2ej4cls22m7y3zssjk">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="asn4xe7b49yjvm3oah9uq93kvkdghu98" class="crayons-icon reaction-icon not-reacted"><title id="asn4xe7b49yjvm3oah9uq93kvkdghu98">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="alpt9s9tagvatub2fak5cryubaor264a" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="alpt9s9tagvatub2fak5cryubaor264a">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="ad46401iko7igcuv4xq08dv998zuplhu" class="crayons-icon reaction-icon not-reacted"><title id="ad46401iko7igcuv4xq08dv998zuplhu">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="aacvpvozvcry3fpbhwqiexln4v6bldz1" class="crayons-icon expanded"><title id="aacvpvozvcry3fpbhwqiexln4v6bldz1">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="atkzwap7lpax0ppypqwa6ykp8ubjehu1" class="crayons-icon collapsed"><title id="atkzwap7lpax0ppypqwa6ykp8ubjehu1">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="akynesavb3n5k0s785zfw4jal6rxiq85" class="crayons-icon pointer-events-none"><title id="akynesavb3n5k0s785zfw4jal6rxiq85">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="abljw9lu1ujwg54ijnld9qymqbdv0y1n" class="crayons-icon reaction-icon not-reacted"><title id="abljw9lu1ujwg54ijnld9qymqbdv0y1n">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="as7kei585wkd67cy8mbqz9gdy71hq100" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="as7kei585wkd67cy8mbqz9gdy71hq100">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="ampv2a39kliflwxn3ff4746l16lz78ga" class="crayons-icon reaction-icon not-reacted"><title id="ampv2a39kliflwxn3ff4746l16lz78ga">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="a4nqjea2vi0dckjxyzat31zzemetl3v1" class="crayons-icon expanded"><title id="a4nqjea2vi0dckjxyzat31zzemetl3v1">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="afbpf8hlco3aoehlshbcvd3eg5dirbtw" class="crayons-icon collapsed"><title id="afbpf8hlco3aoehlshbcvd3eg5dirbtw">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="a1u1npt4orpeg07xpdh2c0o719tm3wlk" class="crayons-icon pointer-events-none"><title id="a1u1npt4orpeg07xpdh2c0o719tm3wlk">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="abdzy160tn4yey2lo790wpcyjo0lf60b" class="crayons-icon reaction-icon not-reacted"><title id="abdzy160tn4yey2lo790wpcyjo0lf60b">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="arcvg66ilmrkxse3zoagzhnmmx79xcxm" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="arcvg66ilmrkxse3zoagzhnmmx79xcxm">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="a8qeofooa75nhp1lu3qztxv4e2c01oic" class="crayons-icon reaction-icon not-reacted"><title id="a8qeofooa75nhp1lu3qztxv4e2c01oic">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="ar0b04rlxdqhxgidqhvxwavzm8vu1tv" class="crayons-icon expanded"><title id="ar0b04rlxdqhxgidqhvxwavzm8vu1tv">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="ar204lyx531u2gdflybdaowhvswq2x19" class="crayons-icon collapsed"><title id="ar204lyx531u2gdflybdaowhvswq2x19">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="ag03ntzi7mk5smpdlswzoc0gt6g7sxb" class="crayons-icon pointer-events-none"><title id="ag03ntzi7mk5smpdlswzoc0gt6g7sxb">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="ah2cr06a77je031d3aq80x2o4x80p7j7" class="crayons-icon reaction-icon not-reacted"><title id="ah2cr06a77je031d3aq80x2o4x80p7j7">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="ahh2hasloyizu0oig3rql3jgtaem3w7e" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ahh2hasloyizu0oig3rql3jgtaem3w7e">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="ajbw4z9i6sfognb9uq02f74pdhngn038" class="crayons-icon reaction-icon not-reacted"><title id="ajbw4z9i6sfognb9uq02f74pdhngn038">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="ae9iyzb1k44n25t7kl4nctnxhza394qz" class="crayons-icon expanded"><title id="ae9iyzb1k44n25t7kl4nctnxhza394qz">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="a1zmega04wuvhhivopdhxusptep47d9v" class="crayons-icon collapsed"><title id="a1zmega04wuvhhivopdhxusptep47d9v">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="amqf80kseayj9ukcsem37dkd7duluan0" class="crayons-icon pointer-events-none"><title id="amqf80kseayj9ukcsem37dkd7duluan0">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="aciej4uivl8ttzszs7n36jc1xxnz8lc" class="crayons-icon reaction-icon not-reacted"><title id="aciej4uivl8ttzszs7n36jc1xxnz8lc">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="arwb4uphuezk4ls00ty6qwyx5zy1fsbk" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="arwb4uphuezk4ls00ty6qwyx5zy1fsbk">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="aptvg3ynh45xachsmb304685qbzo58oo" class="crayons-icon reaction-icon not-reacted"><title id="aptvg3ynh45xachsmb304685qbzo58oo">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="ais23s6mj1wcsoorgupf4bcqgrn261d6" class="crayons-icon expanded"><title id="ais23s6mj1wcsoorgupf4bcqgrn261d6">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="adyj4ehv2edk1h9uh46kvzaih7xkst65" class="crayons-icon collapsed"><title id="adyj4ehv2edk1h9uh46kvzaih7xkst65">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="a2e11qxqipker2u9wnwinzv75ekh2v8h" class="crayons-icon pointer-events-none"><title id="a2e11qxqipker2u9wnwinzv75ekh2v8h">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="ak11d8ocuzf7d0u81p6tpj7pvjy22wp1" class="crayons-icon reaction-icon not-reacted"><title id="ak11d8ocuzf7d0u81p6tpj7pvjy22wp1">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="a1x3efekegykp6zf3kl133cly6gb8w7x" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1x3efekegykp6zf3kl133cly6gb8w7x">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="aluj416kpeq8bf2nq0smsmvh453ibnjg" class="crayons-icon"><title id="aluj416kpeq8bf2nq0smsmvh453ibnjg">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="adheod13i7zlwvc9aunga1usrlfwy9jk" class="crayons-icon pointer-events-none"><title id="adheod13i7zlwvc9aunga1usrlfwy9jk">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="ae9z2osabn2s3phvctldudern5dvpvol" class="crayons-icon reaction-icon not-reacted"><title id="ae9z2osabn2s3phvctldudern5dvpvol">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="ao0mo6uytxls1si5yr1pcx5zuvravg1x" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ao0mo6uytxls1si5yr1pcx5zuvravg1x">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="ar3xuoxyuenb0mzrc5ozv05fnymr8l6n" class="crayons-icon"><title id="ar3xuoxyuenb0mzrc5ozv05fnymr8l6n">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="a72mlfvzx0m21471j34x68xuel8hi8jb" class="crayons-icon pointer-events-none"><title id="a72mlfvzx0m21471j34x68xuel8hi8jb">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="aihhomwcshbs9vm8ewy15z5tptg4yrsw" class="crayons-icon reaction-icon not-reacted"><title id="aihhomwcshbs9vm8ewy15z5tptg4yrsw">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="adx4nhcguelwfmug3cdar1ju1f59hk9l" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="adx4nhcguelwfmug3cdar1ju1f59hk9l">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="ao40nyq7vqqtbw0zdz4lqfqkm4m4kiv8" class="crayons-icon reaction-icon not-reacted"><title id="ao40nyq7vqqtbw0zdz4lqfqkm4m4kiv8">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="anpvuribwmhc8tyrsvrahkahy7kdiloe" class="crayons-icon expanded"><title id="anpvuribwmhc8tyrsvrahkahy7kdiloe">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="asha5qakbnwx3gjn7nb2bby6hxvgashs" class="crayons-icon collapsed"><title id="asha5qakbnwx3gjn7nb2bby6hxvgashs">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="ararbvidtmmdh9p2pz4pllm2i7qlxbrc" class="crayons-icon pointer-events-none"><title id="ararbvidtmmdh9p2pz4pllm2i7qlxbrc">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="atz8evpo1mfxnytsrtz7564seb47qdn" class="crayons-icon reaction-icon not-reacted"><title id="atz8evpo1mfxnytsrtz7564seb47qdn">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="a2zrcp6a8f6hq7od786jec9hn3y58xnb" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a2zrcp6a8f6hq7od786jec9hn3y58xnb">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="1505119"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gd5"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505119"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="agfrtbme9wke9bc3zatkzijnvq5u7oxc" class="crayons-icon reaction-icon not-reacted"><title id="agfrtbme9wke9bc3zatkzijnvq5u7oxc">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="arc6mkg3mghd99iq9fhjj81ss5weqlm9" class="crayons-icon expanded"><title id="arc6mkg3mghd99iq9fhjj81ss5weqlm9">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="a1bsyz3gvoqcoyl4k9eism8edrnzjirp" class="crayons-icon collapsed"><title id="a1bsyz3gvoqcoyl4k9eism8edrnzjirp">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="as12nzbpxbinsglsc5xoc6n2t21xqkot" class="crayons-icon pointer-events-none"><title id="as12nzbpxbinsglsc5xoc6n2t21xqkot">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="ajergpwooztrs7byqrlnr2y0g61sutrg" class="crayons-icon reaction-icon not-reacted"><title id="ajergpwooztrs7byqrlnr2y0g61sutrg">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="a8rs8ef6s8yad7pd1di4wr4qmo6tsd5o" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a8rs8ef6s8yad7pd1di4wr4qmo6tsd5o">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="a4c4b4bag1hx0gchuhxl7tx0nz3icpoc" class="crayons-icon reaction-icon not-reacted"><title id="a4c4b4bag1hx0gchuhxl7tx0nz3icpoc">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="a9g99khgywbed1v6dwkigdatgstzlaw6" class="crayons-icon expanded"><title id="a9g99khgywbed1v6dwkigdatgstzlaw6">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="a5uqxu80b126s986ts3lbyhqsdru1d5s" class="crayons-icon collapsed"><title id="a5uqxu80b126s986ts3lbyhqsdru1d5s">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="ak813y99d56byzhqy0wzv7q9t6rqk1dn" class="crayons-icon pointer-events-none"><title id="ak813y99d56byzhqy0wzv7q9t6rqk1dn">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="aoe1zyl0fe59a5r7pgqe86hi0a0gmme5" class="crayons-icon reaction-icon not-reacted"><title id="aoe1zyl0fe59a5r7pgqe86hi0a0gmme5">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="aoj7dwhwubewgd2q0amt6msumzsztdkq" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aoj7dwhwubewgd2q0amt6msumzsztdkq">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="akcfzphn1mhdlierpcx3xomjoqscxiwo" class="crayons-icon reaction-icon not-reacted"><title id="akcfzphn1mhdlierpcx3xomjoqscxiwo">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>

                <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="ajr6r1yojfnvcvozm42mnp6cl9cwrfx0" class="crayons-icon expanded"><title id="ajr6r1yojfnvcvozm42mnp6cl9cwrfx0">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="amc72s3pm8mpjdg3vvofcspjqyu5ye25" class="crayons-icon collapsed"><title id="amc72s3pm8mpjdg3vvofcspjqyu5ye25">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="a2zx15sgk1hfvi8mjid2posvbhx6dlqz" class="crayons-icon pointer-events-none"><title id="a2zx15sgk1hfvi8mjid2posvbhx6dlqz">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="aq6kcninx9s657yy0mghar9eozl3zpdw" class="crayons-icon reaction-icon not-reacted"><title id="aq6kcninx9s657yy0mghar9eozl3zpdw">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="aewt12qryhu49455v57qzloaw7huirgq" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aewt12qryhu49455v57qzloaw7huirgq">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="aeyrt39s05z4d6ry06ivxwgo0dwce9qn" class="crayons-icon reaction-icon not-reacted"><title id="aeyrt39s05z4d6ry06ivxwgo0dwce9qn">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="acjd9348kt8rrbu9g9fdwpztvqd2qevq" class="crayons-icon expanded"><title id="acjd9348kt8rrbu9g9fdwpztvqd2qevq">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="ab8ztawoc7sdlqc179d3gnoac0hyly5s" class="crayons-icon collapsed"><title id="ab8ztawoc7sdlqc179d3gnoac0hyly5s">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="{&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-37g18" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T19:03:29Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504810" aria-controls="comment-dropdown-1504810" 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="asnjpkjaxfwdna38jirtsxomywvzi0c2" class="crayons-icon pointer-events-none"><title id="asnjpkjaxfwdna38jirtsxomywvzi0c2">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-1504810" 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-37g18" 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/37g18/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="1504810"
                data-comment-url="https://dev.to/sylwia-lask/comment/37g18"
                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/37g18/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/37g18" 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 a great comment, probably the most architectural take in this whole discussion 🙂</p>

<p>In theory, I really like this approach. In practice… I honestly don’t know when I’d use it. Across all the projects I’ve worked on, it was always either a ready-made component library (like Angular Material) or Tailwind (often with shadcn). For context, most of my experience comes from startups.</p>

<p>The closest I’ve seen to a custom component system was our Head of Design in my previous company. He almost convinced leadership that a beautiful, fully custom UI would improve sales… but once they saw the estimates, they told him to go find a ready-made library 😄</p>

<p>And in corporate environments? There wasn’t even a conversation about flexibility. That decision was already made long before any code was written.</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-1504810"
    data-comment-id="1504810"
    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="afajdf3upbk62zr195nzgvy0kj3marm4" class="crayons-icon reaction-icon not-reacted"><title id="afajdf3upbk62zr195nzgvy0kj3marm4">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="ajvuogv3ajm4e1i0vp21beynn3kww76c" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ajvuogv3ajm4e1i0vp21beynn3kww76c">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="1504810"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g18"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504810"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3ajvp3rxz047ttnyey1cv5mmuv90dyv" class="crayons-icon reaction-icon not-reacted"><title id="a3ajvp3rxz047ttnyey1cv5mmuv90dyv">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="ak3uuu68xm4z972py4svold9g0oj9z2x" class="crayons-icon expanded"><title id="ak3uuu68xm4z972py4svold9g0oj9z2x">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="aopfkeormrxmj9nqwpvyfmlpjnf7cstg" class="crayons-icon collapsed"><title id="aopfkeormrxmj9nqwpvyfmlpjnf7cstg">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-1504854"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1504854"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g30"
    data-comment-author-id="235303"
    data-content-user-id="235303">
    <a name="comment-37g30" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/xwero" 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%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-1504854" aria-controls="comment-profile-preview-content-1504854" 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-1504854" 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-37g30" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T20:32:35Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504854" aria-controls="comment-dropdown-1504854" 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="asvpptzt92dju4ak8997p5siddsnq2do" class="crayons-icon pointer-events-none"><title id="asvpptzt92dju4ak8997p5siddsnq2do">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-1504854" 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-37g30" 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/37g30/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="1504854"
                data-comment-url="https://dev.to/xwero/comment/37g30"
                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/37g30/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/37g30" 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>I get the hit the ground running aspect from the business side. But the consequence is that with shadcn you are two abstractions away from CSS. </p>

<p>I think the head of design made the mistake to estimate a big bang solution. I think it is better to show the vision and estimate the startup phase. And after that each feature uses X procent of the time to build towards the vision. That way the startup phase looks like the biggest effort. </p>

<p>True in some occasions it are not developers that are making the decisions. It is not always the most enjoyable feeling, but is work. You can find joy in private 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-1504854"
    data-comment-id="1504854"
    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="apmdpk0leypxicmw7tp5z1uysitut7q5" class="crayons-icon reaction-icon not-reacted"><title id="apmdpk0leypxicmw7tp5z1uysitut7q5">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="a5s7kr7yntm065mvdsay8eyzaeu2yslv" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a5s7kr7yntm065mvdsay8eyzaeu2yslv">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="as10axqxpjcz545dlrid6y8xe7f53slm" class="crayons-icon"><title id="as10axqxpjcz545dlrid6y8xe7f53slm">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-1504913"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1504913"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g57"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37g57" 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-1504913" aria-controls="comment-profile-preview-content-1504913" 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-1504913" 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-37g57" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T22:13:05Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504913" aria-controls="comment-dropdown-1504913" 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="ai1i5tovfl6bnxxikl5lq40u75po9ifh" class="crayons-icon pointer-events-none"><title id="ai1i5tovfl6bnxxikl5lq40u75po9ifh">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-1504913" 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-37g57" 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/37g57/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="1504913"
                data-comment-url="https://dev.to/sylwia-lask/comment/37g57"
                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/37g57/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/37g57" 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>When it comes to that designer, honestly, whatever approach he chose back then probably wouldn’t matter today anyway.</p>

<p>It was one of those startups that completely fell in love with AI, and now the main criterion for choosing a stack is basically “what AI is good at.” So… most likely Tailwind 😄</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-1504913"
    data-comment-id="1504913"
    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="am64yeresndscofmlkfhtiyy5u3rwfz9" class="crayons-icon reaction-icon not-reacted"><title id="am64yeresndscofmlkfhtiyy5u3rwfz9">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="akczyt37ubxibqbnmmpwe9amqbq30pwb" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="akczyt37ubxibqbnmmpwe9amqbq30pwb">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="1504913"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37g57"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504913"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajgsanv905j4d8jv6qfv7qyiid47notk" class="crayons-icon reaction-icon not-reacted"><title id="ajgsanv905j4d8jv6qfv7qyiid47notk">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="a5cf5ww1npehkhel487c6mavyxaaat34" class="crayons-icon expanded"><title id="a5cf5ww1npehkhel487c6mavyxaaat34">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="a6uii11fuk49xaj7bdcus8svvr2uxkjd" class="crayons-icon collapsed"><title id="a6uii11fuk49xaj7bdcus8svvr2uxkjd">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-1505370"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1505370"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gmm"
    data-comment-author-id="3807844"
    data-content-user-id="3807844">
    <a name="comment-37gmm" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/codingwithjiro" 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%2F3807844%2Fcc7986ed-61bf-43ef-9d66-5a8c5b72c115.png" alt="codingwithjiro 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/codingwithjiro" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      Elmar Chavez
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1505370" aria-controls="comment-profile-preview-content-1505370" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Elmar Chavez profile details">
      Elmar Chavez
      
    </button>
    <div id="comment-profile-preview-content-1505370" 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="/codingwithjiro" 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%2F3807844%2Fcc7986ed-61bf-43ef-9d66-5a8c5b72c115.png" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      Elmar Chavez
      
    </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;:3807844,&quot;name&quot;:&quot;Elmar Chavez&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Elmar Chavez" aria-pressed="false">Follow</button>
</div>
  <div class="color-base-70">
    Licensed civil engineer turned full stack developer building accessible, responsive web applications. I also review code in Frontend Mentor and participate in collaborative projects.
  </div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
        <li>
          <div class="key">
            Email
          </div>
          <div class="value">
            <a href="mailto:chavezelmar03@gmail.com">chavezelmar03@gmail.com</a>
          </div>
        </li>
        <li>
          <div class="key">
            Location
          </div>
          <div class="value">
            Calapan City, Oriental Mindoro, Philippines
          </div>
        </li>
          <li>
            <div class="key">
              Education
            </div>
            <div class="value">
              Graduate of Bachelor of Science in Civil Engineering from TIP-Manila
            </div>
          </li>
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              Mr.
            </div>
          </li>
          <li>
            <div class="key">
              Work
            </div>
            <div class="value">
              Full Stack Developer
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2026-03-05T11:36:29Z" class="date">Mar 5, 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-37gmm" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T14:24:31Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505370" aria-controls="comment-dropdown-1505370" 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="apg8hcukho7a5732xj784578iqn1p188" class="crayons-icon pointer-events-none"><title id="apg8hcukho7a5732xj784578iqn1p188">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-1505370" 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-37gmm" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Elmar Chavez&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="3807844" data-action="settings-button" data-path="https://dev.to/codingwithjiro/comment/37gmm/settings" aria-label="Go to Elmar Chavez&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="3807844">
              <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="1505370"
                data-comment-url="https://dev.to/codingwithjiro/comment/37gmm"
                aria-label="Hide Elmar Chavez&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/codingwithjiro/comment/37gmm/mod" aria-label="Moderate Elmar Chavez&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/codingwithjiro/comment/37gmm" aria-label="Report Elmar Chavez&#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've built multiple web apps with vanilla CSS. When I switched to Tailwind, I don't like it at first. I don't like having to read multiple class names in my HTML. It somewhat breaks my own personal code. I like HTML and CSS separate.</p>

<p>But over time it grew on me. At first I have to look up equivalent class names from the official Tailwind site. That was the only struggle. It replaced my old struggle of thinking about custom class names following a naming structure like BEM. Once I deployed enough projects, I realized that Tailwind is not as bad as it seems. </p>

<p>However, I totally agree that we should be able to ship projects with vanilla CSS first before using Tailwind. Not only because you will be missing the fundamentals, but also you will not be able to fully appreciate the pros this CSS library brings to the table. </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-1505370"
    data-comment-id="1505370"
    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="adzt2nlyblrebgxf1fdgpihe2zks0kny" class="crayons-icon reaction-icon not-reacted"><title id="adzt2nlyblrebgxf1fdgpihe2zks0kny">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="a8gpbu9ufk2zi6mxc6282vymfhtt0dpx" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a8gpbu9ufk2zi6mxc6282vymfhtt0dpx">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="1505370"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37gmm"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505370"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ap1v10vhpxr33xupnjy9jdqzwgb1y1cj" class="crayons-icon reaction-icon not-reacted"><title id="ap1v10vhpxr33xupnjy9jdqzwgb1y1cj">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="adodp9ztxz8ozcaigi5jzx7gmubtim45" class="crayons-icon expanded"><title id="adodp9ztxz8ozcaigi5jzx7gmubtim45">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="aadlfkg51oybcj5tq3j2kdvmkh4b41kq" class="crayons-icon collapsed"><title id="aadlfkg51oybcj5tq3j2kdvmkh4b41kq">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-1505517"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1505517"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h2d"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37h2d" 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-1505517" aria-controls="comment-profile-preview-content-1505517" 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-1505517" 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-37h2d" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-05T19:42:58Z" class=date-no-year>
    May 5
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1505517" aria-controls="comment-dropdown-1505517" 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="ab4j8zwb9q8u2x76mwihqwkq9l99alph" class="crayons-icon pointer-events-none"><title id="ab4j8zwb9q8u2x76mwihqwkq9l99alph">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-1505517" 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-37h2d" 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/37h2d/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="1505517"
                data-comment-url="https://dev.to/sylwia-lask/comment/37h2d"
                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/37h2d/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/37h2d" 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>Exactly, and the benefits of Tailwind become even more noticeable in larger teams 🙂</p>

<p>And yes, fundamentals are a must. If anything, they’re becoming even more important in the age of LLMs. I was actually wondering recently how people will learn programming if the “coding” part is increasingly handled by tools. But then a friend of mine, who’s getting into programming, just sat down and started learning C++ from scratch… and it reminded me that this isn’t some kind of secret knowledge after all 😄</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-1505517"
    data-comment-id="1505517"
    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="ask6z42yzcsuu67nfpx7rmvgugq51uq6" class="crayons-icon reaction-icon not-reacted"><title id="ask6z42yzcsuu67nfpx7rmvgugq51uq6">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="apcdth49iry8pcuxdxg3jj1p5raj7302" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="apcdth49iry8pcuxdxg3jj1p5raj7302">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="1505517"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37h2d"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1505517"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6fjnv0ohimqu6sj6w28gl7vhlx48s3m" class="crayons-icon reaction-icon not-reacted"><title id="a6fjnv0ohimqu6sj6w28gl7vhlx48s3m">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>

                <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="agbpaphgo9jj2uir08gj1nm5ycxlxxk7" class="crayons-icon expanded"><title id="agbpaphgo9jj2uir08gj1nm5ycxlxxk7">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="an6sd4kgl1yku3j7ha7hkx97ahxf0pit" class="crayons-icon collapsed"><title id="an6sd4kgl1yku3j7ha7hkx97ahxf0pit">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-1504441"
    class="
      comment single-comment-node
      
      root
      comment--deep-0
      
    "
    data-comment-id="1504441"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fd3"
    data-comment-author-id="28704"
    data-content-user-id="28704">
    <a name="comment-37fd3" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" alt="leob 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/leob" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      leob
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504441" aria-controls="comment-profile-preview-content-1504441" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="leob profile details">
      leob
      
    </button>
    <div id="comment-profile-preview-content-1504441" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; 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="/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      leob
      
    </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;:28704,&quot;name&quot;:&quot;leob&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: leob" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              he/him
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2017-08-04T01:13:01Z" class="date">Aug 4, 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-37fd3" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T13:30:42Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504441" aria-controls="comment-dropdown-1504441" 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="ahpk0oq73wnuze4upxh2k1tr208sk3hm" class="crayons-icon pointer-events-none"><title id="ahpk0oq73wnuze4upxh2k1tr208sk3hm">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-1504441" 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-37fd3" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to leob&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="28704" data-action="settings-button" data-path="https://dev.to/leob/comment/37fd3/settings" aria-label="Go to leob&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="28704">
              <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="1504441"
                data-comment-url="https://dev.to/leob/comment/37fd3"
                aria-label="Hide leob&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/leob/comment/37fd3/mod" aria-label="Moderate leob&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/leob/comment/37fd3" aria-label="Report leob&#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>Arguments well made - I think the author of the original article is an expert CSS craftsman, who really loves his craft - and as you say, it still does have a place ...</p>

<p>But for most of us, who are mediocre or maybe "reasonably good" at CSS, Tailwind just delivers benefits :-)</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-1504441"
    data-comment-id="1504441"
    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="aenkuslacdclbkq63wn48rv98oxqitxz" class="crayons-icon reaction-icon not-reacted"><title id="aenkuslacdclbkq63wn48rv98oxqitxz">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="asp8xmwf9h4pwsorexq91yo7b02effjg" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="asp8xmwf9h4pwsorexq91yo7b02effjg">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="1504441"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fd3"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504441"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apbq8hun12hr0xbjl9y1pniz9leja0cb" class="crayons-icon reaction-icon not-reacted"><title id="apbq8hun12hr0xbjl9y1pniz9leja0cb">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="a6xv2r9iezo0t61t1u25z52awwhe1jce" class="crayons-icon expanded"><title id="a6xv2r9iezo0t61t1u25z52awwhe1jce">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="aoskw57a4cqq8o97h2w37eh85k2ejcfb" class="crayons-icon collapsed"><title id="aoskw57a4cqq8o97h2w37eh85k2ejcfb">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-1504463"
    class="
      comment single-comment-node
      
      child
      comment--deep-1
      
    "
    data-comment-id="1504463"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fdp"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37fdp" 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-1504463" aria-controls="comment-profile-preview-content-1504463" 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-1504463" 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-37fdp" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T13:55:41Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504463" aria-controls="comment-dropdown-1504463" 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="acvy0yx08m7m7h1u4tgvir5yp8gmq05n" class="crayons-icon pointer-events-none"><title id="acvy0yx08m7m7h1u4tgvir5yp8gmq05n">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-1504463" 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-37fdp" 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/37fdp/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="1504463"
                data-comment-url="https://dev.to/sylwia-lask/comment/37fdp"
                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/37fdp/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/37fdp" 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, of course! I totally understand and respect that! There will always be a place for beautifully crafted CSS 🙂</p>

<p>And about skills vs Tailwind: someone can have an amazing skillset, but it only takes one backend dev jumping in to “just fix something,” and a month later nobody understands what’s going on 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-1504463"
    data-comment-id="1504463"
    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="a3o7waj9tilbf5hczuo6obe0xue69nx1" class="crayons-icon reaction-icon not-reacted"><title id="a3o7waj9tilbf5hczuo6obe0xue69nx1">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="aa19rk5omxdogsocaouwo6dklsi58d7x" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aa19rk5omxdogsocaouwo6dklsi58d7x">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="1504463"
        data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fdp"
        data-tracking-name="comment_reply_button"
        data-testid="reply-button-1504463"
        rel="nofollow">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar5dc4xyle3a5knvzhjg8ar9v00pghzk" class="crayons-icon reaction-icon not-reacted"><title id="ar5dc4xyle3a5knvzhjg8ar9v00pghzk">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="a5qc0rnuhykvx70b2yc3trqlyj4wvhtr" class="crayons-icon expanded"><title id="a5qc0rnuhykvx70b2yc3trqlyj4wvhtr">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="aki93cmdu63vlrhldpfoh09akctf19a6" class="crayons-icon collapsed"><title id="aki93cmdu63vlrhldpfoh09akctf19a6">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-1504477"
    class="
      comment single-comment-node
      
      child
      comment--deep-2
      
    "
    data-comment-id="1504477"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fed"
    data-comment-author-id="28704"
    data-content-user-id="28704">
    <a name="comment-37fed" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" alt="leob 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/leob" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      leob
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504477" aria-controls="comment-profile-preview-content-1504477" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="leob profile details">
      leob
      
    </button>
    <div id="comment-profile-preview-content-1504477" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; 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="/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      leob
      
    </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;:28704,&quot;name&quot;:&quot;leob&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: leob" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-metadata-details-inner">
          <li>
            <div class="key">
              Pronouns
            </div>
            <div class="value">
              he/him
            </div>
          </li>
      <li>
        <div class="key">
          Joined
        </div>
        <div class="value">
          <time datetime="2017-08-04T01:13:01Z" class="date">Aug 4, 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-37fed" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T14:13:53Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504477" aria-controls="comment-dropdown-1504477" 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="ak5x3as1pfbpqa45cu0pstjeu42thssa" class="crayons-icon pointer-events-none"><title id="ak5x3as1pfbpqa45cu0pstjeu42thssa">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-1504477" 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-37fed" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to leob&#39;s comment" data-no-instant>Copy link</a></li>
        <li class="comment-actions hidden" data-user-id="28704" data-action="settings-button" data-path="https://dev.to/leob/comment/37fed/settings" aria-label="Go to leob&#39;s comment settings"></li>
          <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="3535771" data-user-id="28704">
              <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="1504477"
                data-comment-url="https://dev.to/leob/comment/37fed"
                aria-label="Hide leob&#39;s comment">
                Hide
              </button>
          </li>
        <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/leob/comment/37fed/mod" aria-label="Moderate leob&#39;s comment"></li>
        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/leob/comment/37fed" aria-label="Report leob&#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 good point - Tailwind is just (well, just, lol) about having a "standard way", structure and predictability, especially in a team setting ...</p>

<p>It's like building a house with prefab parts, or assembling IKEA furniture, etc - good enough for most use cases, but in some cases you still want the "craftsman" bricklayer or carpenter :-)</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-1504477"
    data-comment-id="1504477"
    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="aly4k5d7z5xnrgpji8pp973pw5tx4c5k" class="crayons-icon reaction-icon not-reacted"><title id="aly4k5d7z5xnrgpji8pp973pw5tx4c5k">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="abwu29wsz7yxrc9ucwndz4sky7kafxr8" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="abwu29wsz7yxrc9ucwndz4sky7kafxr8">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="af6wp042d1l66r9h3b9c8jyev506oew4" class="crayons-icon"><title id="af6wp042d1l66r9h3b9c8jyev506oew4">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-1504486"
    class="
      comment single-comment-node
      
      child
      comment--deep-3
      
    "
    data-comment-id="1504486"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37fem"
    data-comment-author-id="3535771"
    data-content-user-id="3535771">
    <a name="comment-37fem" 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-1504486" aria-controls="comment-profile-preview-content-1504486" 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-1504486" 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-37fem" class="comment-date crayons-link crayons-link--secondary fs-s">
  <time datetime="2026-05-04T14:18:22Z" class=date-no-year>
    May 4
  </time>

</a>


  <div class="comment__dropdown" data-tracking-name="comment_dropdown">
    <button id="comment-dropdown-trigger-1504486" aria-controls="comment-dropdown-1504486" 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="asc1sfq13gtooko7v95srngipgfuzs59" class="crayons-icon pointer-events-none"><title id="asc1sfq13gtooko7v95srngipgfuzs59">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-1504486" 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-37fem" 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/37fem/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="1504486"
                data-comment-url="https://dev.to/sylwia-lask/comment/37fem"
                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/37fem/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/37fem" 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 the IKEA comparison 😄 And honestly, I always get my kitchen furniture from IKEA. 20-year warranty, can’t argue with 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-1504486"
    data-comment-id="1504486"
    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="ae8y9knqvvch74g1waaniiim4fh8023j" class="crayons-icon reaction-icon not-reacted"><title id="ae8y9knqvvch74g1waaniiim4fh8023j">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="are1illcrtttri4kyoyos446ttcdjd13" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="are1illcrtttri4kyoyos446ttcdjd13">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="a3v4pq8hfvlwodr3gmruna5nsfck6zf3" class="crayons-icon"><title id="a3v4pq8hfvlwodr3gmruna5nsfck6zf3">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-1504502"
    class="
      comment single-comment-node
      
      child
      comment--deep-4
      comment--too-deep
    "
    data-comment-id="1504502"
    data-path="/sylwia-lask/i-love-tailwind-sorry-not-sorry-5cfh/comments/37ffc"
    data-comment-author-id="28704"
    data-content-user-id="28704">
    <a name="comment-37ffc" style="position: absolute; top: -8px;">&nbsp;</a>
    
<div class="comment__inner">
    <a href="https://dev.to/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" alt="leob 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/leob" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
    <span class="js-comment-username">
      leob
    </span>
  </a>
  <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
    <button id="comment-profile-preview-trigger-1504502" aria-controls="comment-profile-preview-content-1504502" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="leob profile details">
      leob
      
    </button>
    <div id="comment-profile-preview-content-1504502" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; 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="/leob" 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%2F28704%2F616e76ac-2a61-4758-8dcd-da819cec4c85.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
    </span>
    <span class="crayons-link crayons-subtitle-2 mt-5">
      leob
      
    </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;:28704,&quot;name&quot;:&quot;leob&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: leob" aria-pressed="false">Follow</button>
</div>

  <div class="user-metadata-details">
    <ul class="user-met
... [TRUNCATED]