Commonly Confusing Tailwind CSS Atomic Classes and Their Usage

Tailwind CSS is an atomic utility‑first CSS framework that generates styles by scanning HTML and template files, and it has become a standard tool for many frontend projects.

The article reviews a collection of Tailwind utility classes that are often confusing, covering width/height ( w- , h- , size-[100px] , w-full , w-screen ), font weight and style ( font-bold , font-[500] , italic , not-italic ), line height ( leading-[1.5em] ), letter spacing ( tracking-[10px] ), text truncation ( truncate ) and multi‑line clamping ( line-clamp-1 … line-clamp-6 , line-clamp-[n] ), background images and sizing ( bg-[url(...)] , bg-[length:750px_auto] ), shadows ( shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] ), transform origins ( origin-center , origin-[33%_75%] ), and the use of pseudo‑classes and pseudo‑elements with group utilities.

Code examples demonstrate self‑targeted pseudo‑classes on a button and group‑based hover effects on links, as well as a <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Email</span> snippet for adding required‑field asterisks.

The author also recommends official plugins such as Tailwind CSS IntelliSense for VS Code, the Tailwind language service for HBuilderX, and notes that WebStorm provides built‑in support.