Square-bracket values let any CSS value be written inline, which is what makes adoption possible and what makes a codebase unmaintainable if it becomes the norm.
<!-- the escape hatch, used once -->
<div class="top-[117px] w-[calc(100%-2rem)]">
<!-- the same value, in four files, six months later -->
<div class="top-[117px]">
<!-- what it should have become -->
// tailwind.config.js
theme: { extend: { spacing: { header: '117px' } } }
<div class="top-header">The moment a bracket value appears twice it is a design token that has not been named, and there is no mechanism that notices. A lint rule counting arbitrary values per file is the cheapest guard; the alternative is a codebase where the design system exists in the configuration and the actual values are scattered through the markup.