Data attributes are the bridge between JavaScript-managed state and CSS styling. A component’s state — whether a menu is open, whether a tab is active, whether a form is submitting — often lives in a JavaScript variable or a framework’s internal state. The data attribute makes that state visible to CSS. data-state=”open” on a dropdown…
Tailwind v4 made a structural decision that changes how every custom style is authored: it stopped hijacking the @layer at-rule and handed control back to the browser’s native CSS cascade layers. In v3, @layer base, @layer components, and @layer utilities were Tailwind-specific directives that the framework intercepted, reordered, and purged. In v4, those same at-rules…
Utility-first CSS has a well-known friction point. When the same set of utilities appears on every instance of a component — a button, a card, a badge — the markup is repeated, and a change to the pattern requires editing every occurrence. The @apply directive is Tailwind’s answer. It takes a list of utility classes…
The @utility and @variant directives are the two primitives that make Tailwind v4’s CSS-first configuration work. @utility registers a custom utility class with Tailwind’s variant system, so the class supports hover:, md:, dark:, and every other variant. @variant applies a variant inside a CSS rule, replacing the @screen directive from v3 and the hover: prefix…
The @plugin directive is Tailwind v4’s mechanism for loading JavaScript-based plugins in a CSS-first configuration. In v3, plugins were registered in the plugins array of tailwind.config.js. In v4, the configuration moves to CSS, and the @plugin directive is the replacement. It loads a plugin from a package name or a local path, and it can…
Tailwind’s preflight resets every browser default. The headings lose their sizes, the paragraphs lose their margins, and the lists lose their markers. This is intentional: the reset gives the developer a blank canvas, and the utility classes paint the styles. But when the content comes from a Markdown file, a CMS, or a rich-text editor,…
Tailwind’s preflight removes the browser’s default form styling, but it does not replace it. The input, the select, and the textarea lose their native appearance, and the developer must add the utilities to make them usable. The problem is that the form elements are the most inconsistent across the browsers. The <select> has the arrow,…
Media queries ask one question: how wide is the browser window? Container queries ask a different question: how wide is this component’s parent? The distinction matters when a component appears in multiple layout contexts. A card in a sidebar and the same card in a main panel should look different, even on the same screen….
A layout written with margin-left and margin-right is a layout that assumes every reader reads from left to right. For Arabic, Hebrew, Persian, and Urdu speakers, the assumption is wrong. The text flows from right to left, the sidebar that sits on the left in English should sit on the right, and the padding that…
Accessibility is not a feature that can be added at the end. It is a property of the markup, the styles, and the interaction, and it must be designed from the start. Tailwind provides a small set of utilities and variants that address the most common accessibility needs: the sr-only and the not-sr-only for the…