Why Tailwind, not Bootstrap

Bootstrap is the most widely used CSS framework on the web. Tailwind CSS is the fastest-growing. They solve different problems. For a site targeting WCAG 2.2 AAA accessibility, especially for neurodivergent users, the differences matter in concrete ways. This page explains each one.

Tailwind is accessibility-first by design

Bootstrap ships with a global CSS reset and a library of pre-built component styles. Those styles have opinions — about what a button looks like, what a modal backdrop does, and crucially, what a focused element looks like. Historically, Bootstrap overrode browser default focus rings with outline: 0 and replaced them with a thin box-shadow that fails WCAG SC 2.4.11 Focus Appearance (AA) and the stricter SC 2.4.13 (AAA) that requires a minimum focus indicator area.

Tailwind ships with no component styles and no focus ring overrides. The browser’s native focus indicator is preserved by default. Everything you add is explicit. There is no hidden CSS that breaks assistive technology — because there is no hidden CSS at all.

No JavaScript by default

Bootstrap’s interactive components — modals, dropdowns, off-canvas panels, tooltips — are implemented with JavaScript. That JavaScript is required to open the component, close it, and manage focus correctly. When the JavaScript is absent or fails, the component is broken. More importantly, Bootstrap’s modal implementation has historically struggled with keyboard traps: a modal should trap focus inside while open and return focus to the trigger when closed. Getting that right requires careful implementation that is easy to miss when the framework encourages dropping in a pre-built component.

Tailwind is a CSS framework. It has no JavaScript. Interactive behavior is the developer’s responsibility — which means it cannot be silently wrong inside a black-box component. Every focus management decision is visible in the code and testable with Playwright.

Utility classes = no specificity wars

Fixing an accessibility issue in Bootstrap often means overriding framework CSS. A button’s text color may come from a chain of selectors — .btn, .btn-primary, .btn-primary:hover — and overriding it requires a selector of equal or greater specificity, or an !important declaration. Contrast failures are therefore expensive to fix: the correct color is easy to find, but making it stick without breaking adjacent styles takes time and careful testing.

Tailwind utilities are single-property classes with low specificity. Adding text-gray-900 replaces the text color. There is nothing to fight. A contrast audit finding turns into a one-word class change. That speed matters in practice — accessibility fixes that are costly to implement get deferred; fixes that take ten seconds get done.

Focus ring preserved

Tailwind’s ring utility family makes the focus indicator explicit and composable. Adding focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-700 to an element produces a thick, offset ring that meets SC 2.4.11 and SC 2.4.13 with a single attribute. The color, width, and offset are all adjustable without touching a stylesheet.

In Bootstrap, achieving an equivalent focus ring means writing custom CSS that overrides Bootstrap’s :focus and :focus-visible rules — and verifying the override holds across every component that Bootstrap applies its own focus styles to. With Tailwind there are no Bootstrap focus styles to override. The ring is yours from the start.

Smaller bundle = faster load = better for cognitive load

Bootstrap’s full CSS bundle is approximately 190 kB uncompressed (30 kB gzip). A Tailwind production build for a typical site is under 10 kB after purging unused utilities. Smaller CSS means faster first paint, and faster first paint reduces the gap between navigation and readable content.

For users with ADHD, waiting for a page to render is not a neutral experience. A blank or partially-loaded screen breaks focus. Every second of load time increases the chance the user abandons the page or loses their place in a task. A 20 kB saving sounds trivial on a fast connection; on a mobile network or an assistive device with limited CPU, it is the difference between a usable and an unusable page.

Better for neurodivergent developers

Accessibility is maintained over time by the developers who make changes. A framework that is opaque — where styles come from classes named .btn-primary or .navbar-expand-lg that do not describe what they do visually — makes it harder for any developer to reason about what will change when they edit markup.

Tailwind class names are explicit and one-dimensional: bg-white sets a white background. text-sm sets a small font size. px-4 sets horizontal padding. A developer — including a developer who is autistic, has ADHD, or is a visual thinker — can read the class list on an element and know exactly what it looks like without context from the rest of the stylesheet. That explicitness reduces cognitive load and reduces the risk that an accessibility fix is made in one place while an identical issue persists somewhere else.

Comparison table

The bottom line

Bootstrap is a capable framework for getting a design up quickly. It is not well-suited to WCAG 2.2 AAA compliance without significant overrides. Tailwind starts from nothing and makes every accessibility decision explicit. That is more work upfront and less debugging later — exactly the trade-off that a site built around accessibility should make.