Tailwind CSS 4 in Production: Tips from Building a Healthcare Marketplace

Tailwind CSS 4 is a significant upgrade that we adopted early for OpenMyPro. The new CSS-first configuration, improved performance, and modern features make it the right choice for production applications. Here are our production tips from using Tailwind 4 across a healthcare marketplace serving 150K+ users.

The @theme Directive Changes Everything

Tailwind 4 replaced JavaScript configuration files with a CSS-native @theme directive. Our globals.css defines our entire design system in pure CSS using custom properties. Brand colors, surface colors, typography — all defined in one place and available throughout the application.

This approach is superior to the old tailwind.config.js because design tokens are now actual CSS variables, accessible to both Tailwind utility classes and custom CSS. When we need a color in a dynamic style attribute, we use var(--color-brand) directly. No JavaScript imports needed.

Dark Theme Pattern

Healthcare applications should offer dark themes for several reasons: reduced eye strain during long browsing sessions, accessibility for light-sensitive users, and the professional aesthetic that builds trust. OpenMyPro uses a dark theme throughout, and Tailwind 4 makes this straightforward.

Our pattern uses the @theme directive for all colors with a dark palette as the default. We pair Tailwind utility classes with inline style props for critical text elements, ensuring white text is always visible on dark backgrounds. For example, style={{ color: '#ffffff' }} as a backup ensures text visibility even if Tailwind classes fail to load.

The key lesson is redundancy. Do not rely solely on Tailwind classes for critical contrast ratios. Inline styles provide a safety net that guarantees readability. In healthcare, unreadable text is not just a design issue — it is an accessibility and safety issue.

Component Patterns for Scalability

With 50+ pages and dozens of shared components, we developed patterns that keep Tailwind manageable at scale. First, we use consistent spacing and sizing across all components. Cards always use p-6, sections use py-12 or py-16, and max-width containers use max-w-3xl, max-w-4xl, or max-w-6xl depending on content type.

Second, border-color consistency. We use border-zinc-400 for primary borders and border-zinc-800 for secondary borders throughout the application. This consistency creates visual harmony that patients notice subconsciously, even if they cannot articulate why the interface feels professional.

Third, interaction patterns. All interactive elements use transition-colors duration-200 for hover effects. Buttons use rounded-lg or rounded-xl depending on prominence. Links use text-cyan-400 for brand color with hover:text-cyan-300. These consistent patterns create a cohesive experience.

Performance Optimization

Tailwind 4 generates CSS at build time using a Rust-based engine, producing smaller CSS bundles than previous versions. Our entire application's CSS is under 30KB gzipped. This contributes to our sub-800ms First Contentful Paint.

We avoid dynamic class generation, which can cause Tailwind to miss classes during the build scan. All class names are written as complete strings, never constructed dynamically. Instead of using template literals to build class names, we use conditional logic with complete class strings. This ensures the build scanner finds every class and includes it in the output.

Accessibility With Tailwind

WCAG compliance is non-negotiable for healthcare. Tailwind 4 provides utilities that support accessibility, but you must use them deliberately. Every interactive element needs focus-visible styles for keyboard navigation. Color contrast must meet WCAG AA minimum of 4.5:1 for text.

Our text uses zinc-300 on a dark background, which provides a contrast ratio above 7:1 — exceeding AA standards. Interactive elements use focus-visible:ring-2 focus-visible:ring-cyan-500 for clear keyboard focus indicators. Form inputs use aria-label and aria-describedby attributes that pair with Tailwind styling.

Tailwind 4 has been a productivity multiplier for building OpenMyPro. The CSS-native configuration, dark theme support, and build performance make it ideal for production healthcare applications. See our Tailwind-powered design at openmypro.com. Check out noizz.io for brand discovery with the same design system.