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…
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…
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…
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…
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…
useCallback is the function-specific version of useMemo. It returns a memoized function that only changes identity when its dependencies change. The comparison is the same: on every render, React compares the dependency array, and if the dependencies are unchanged, it returns the same function reference from the previous render. If a dependency has changed, it…
A React component re-renders when its state changes, when its props change, or when a parent re-renders. On every re-render, the entire component function runs from top to bottom. Every variable is recreated, every computation is repeated, and every object literal is a new object. Most of the time this is fine. A few arithmetic…
useRef returns a plain object with a single property, current. React creates that object once, on the first render, and returns the same object on every subsequent render. Nothing about the object is special. It is not a proxy, it is not reactive, and it is not tracked by the reconciler. It is a box….
React is declarative. You describe what the UI should look like for a given state, and React updates the DOM to match. Most of the time, you never touch the DOM directly. But some operations are inherently imperative. Focusing an input, scrolling to a position, measuring an element’s size, playing a video, or integrating a…
A reducer centralizes state transitions. A context distributes state across the tree. Each solves a different problem in isolation: useReducer gives a component a single function that computes the next state from the current state and an action, and createContext gives a component a way to make a value available to every descendant without prop…