Skip to main content

ADR-0017: Tailwind CSS for Styling

Status​

Accepted - 2025-01-26

Context​

TVL Platform web application needs a CSS solution for styling React components with requirements for fast development, consistency, and maintainability.

Decision​

Tailwind CSS 3.x as the primary styling solution.

Rationale​

  1. Utility-First: Rapid UI development with utility classes
  2. Design System: Built-in design tokens (colors, spacing, typography)
  3. Performance: PurgeCSS removes unused styles (small bundles)
  4. TypeScript Support: IntelliSense with tailwindcss-intellisense
  5. Next.js Integration: Official Next.js plugin

Alternatives Considered​

Alternative 1: CSS Modules​

Rejected - Requires separate CSS files, no design system

Alternative 2: Styled Components​

Rejected - Runtime overhead, larger bundles, SSR complexity

Alternative 3: CSS-in-JS (Emotion)​

Rejected - Performance overhead, React 18 SSR issues

Configuration​

// tailwind.config.js
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
      }
    }
  }
};

Usage Examples​

// Utility classes
<button className="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600">
  Confirm Booking
</button>

// Responsive design
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {properties.map(...)}
</div>

// Dark mode
<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  Content
</div>

References​