Performance Test: Tailwind 4.0 vs. UnoCSS 0.60 vs. CSS Modules for 100 Component Styles: Bundle Size

// tailwind.config.js - Tailwind 4.0 configuration for 100 component benchmark
// Includes JIT mode, custom presets, and purge paths for 100 components
const { createRequire } = require('module');
const require = createRequire(import.meta.url);
const tailwind = require('tailwindcss');

/** @type {import('tailwindcss').Config} */
export default {
  // JIT mode is enabled by default in Tailwind 4.0, no need for mode: 'jit'
  content: [
    // Purge paths for all 100 React components
    './src/components/**/*.{js,jsx,ts,tsx}',
    './src/pages/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        // Custom brand colors used in 100 components
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        secondary: '#6b7280',
      },
      spacing: {
        // Custom spacing used in component margins/padding
        18: '4.5rem',
        22: '5.5rem',
      },
    },
  },
  plugins: [
    // Official Typography plugin for text rendering styles
    require('@tailwindcss/typography'),
    // Forms plugin for input styling in 15 form components
    require('@tailwindcss/forms'),
  ],
  // Error handling: log unpurged classes in development
  future: {
    hoverOnlyWhenSupported: true,
  },
};

// postcss.config.js - PostCSS configuration for Tailwind 4.0
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// src/components/Button.jsx - Sample component from the 100 component benchmark
import React from 'react';
import './tailwind.css';

// Error boundary for component rendering failures
class ButtonErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Button component failed to render:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return Failed to load button;
    }
    return this.props.children;
  }
}

// Main Button component with Tailwind 4.0 utility classes
export const Button = ({ variant = 'primary', size = 'md', children, onClick }) => {
  // Validate props to prevent invalid class generation
  const validVariants = ['primary', 'secondary', 'danger'];
  const validSizes = ['sm', 'md', 'lg'];

  if (!validVariants.includes(variant)) {
    console.warn(`Invalid variant: ${variant}, falling back to primary`);
    variant = 'primary';
  }

  if (!validSizes.includes(size)) {
    console.warn(`Invalid size: ${size}, falling back to md`);
    size = 'md';
  }

  const baseClasses = 'font-semibold rounded-lg focus:outline-none focus:ring-2 transition-colors';
  const variantClasses = {
    primary: 'bg-primary-500 text-white hover:bg-primary-900 focus:ring-primary-500',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500',
    danger: 'bg-red-500 text-white hover:bg-red-700 focus:ring-red-500',
  };
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (


        {children}


  );
};

// build.js - Tailwind 4.0 build script with error handling
import { build } from 'vite';
import { resolve } from 'path';

async function buildTailwind() {
  try {
    console.log('Starting Tailwind 4.0 build...');
    const result = await build({
      root: resolve(__dirname, 'src'),
      build: {
        outDir: 'dist/tailwind',
        rollupOptions: {
          input: resolve(__dirname, 'src/main.jsx'),
        },
      },
      css: {
        postcss: resolve(__dirname, 'postcss.config.js'),
      },
    });
    console.log(`Tailwind build completed successfully. Bundle size: ${result.output[0].code.length} bytes`);
  } catch (error) {
    console.error('Tailwind build failed:', error);
    process.exit(1);
  }
}

// Run build if this is the main module
if (import.meta.url === `file://${process.argv[1]}`) {
  buildTailwind();
}

// uno.config.js - UnoCSS 0.60 configuration for 100 component benchmark
// Uses preset-uno, preset-attributify, and custom preset for 100 components
import { defineConfig, presetUno, presetAttributify, transformerDirectives } from 'unocss';

export default defineConfig({
  presets: [
    presetUno({
      // Extend default theme to match Tailwind's customizations
      theme: {
        colors: {
          primary: {
            50: '#eff6ff',
            100: '#dbeafe',
            500: '#3b82f6',
            900: '#1e3a8a',
          },
          secondary: '#6b7280',
        },
        spacing: {
          18: '4.5rem',
          22: '5.5rem',
        },
      },
    }),
    presetAttributify(), // Enables attributify mode for cleaner JSX
  ],
  transformers: [
    transformerDirectives(), // Supports @apply in CSS if needed
  ],
  content: {
    // Files to scan for UnoCSS classes
    filesystem: [
      './src/components/**/*.{js,jsx,ts,tsx}',
      './src/pages/**/*.{js,jsx,ts,tsx}',
    ],
  },
  // Error handling: warn on unused classes
  warn: true,
  // Enable hashing for atomic classes to prevent collisions
  hash: true,
});

// vite.config.js - Vite configuration for UnoCSS 0.60
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    react(),
    UnoCSS(), // Inject UnoCSS into Vite build
  ],
  build: {
    outDir: 'dist/unocss',
    rollupOptions: {
      input: './src/main.jsx',
    },
  },
});

// src/components/Button.jsx - Sample component with UnoCSS 0.60 attributify mode
import React from 'react';

// Error boundary for UnoCSS component rendering
class UnoButtonErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('UnoCSS Button render error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return UnoCSS Button failed to load;
    }
    return this.props.children;
  }
}

// Main Button component using UnoCSS attributify mode
export const UnoButton = ({ variant = 'primary', size = 'md', children, onClick }) => {
  // Prop validation to prevent invalid class generation
  const validVariants = ['primary', 'secondary', 'danger'];
  const validSizes = ['sm', 'md', 'lg'];

  if (!validVariants.includes(variant)) {
    console.warn(`UnoCSS: Invalid variant ${variant}, falling back to primary`);
    variant = 'primary';
  }

  if (!validSizes.includes(size)) {
    console.warn(`UnoCSS: Invalid size ${size}, falling back to md`);
    size = 'md';
  }

  // Attributify mode: classes as attributes
  const variantAttrs = {
    primary: { bg: 'primary-500', text: 'white', hover: 'bg-primary-900', focus: 'ring-primary-500' },
    secondary: { bg: 'gray-200', text: 'gray-800', hover: 'bg-gray-300', focus: 'ring-gray-500' },
    danger: { bg: 'red-500', text: 'white', hover: 'bg-red-700', focus: 'ring-red-500' },
  };
  const sizeAttrs = {
    sm: { px: '3', py: '1.5', text: 'sm' },
    md: { px: '4', py: '2', text: 'base' },
    lg: { px: '6', py: '3', text: 'lg' },
  };

  const variantAttr = variantAttrs[variant];
  const sizeAttr = sizeAttrs[size];

  return (


        {children}


  );
};

// build.js - UnoCSS 0.60 build script with error handling
import { build } from 'vite';
import { resolve } from 'path';

async function buildUnoCSS() {
  try {
    console.log('Starting UnoCSS 0.60 build...');
    const result = await build({
      root: resolve(__dirname, 'src'),
      build: {
        outDir: 'dist/unocss',
        rollupOptions: {
          input: resolve(__dirname, 'src/main.jsx'),
        },
      },
    });
    // Calculate CSS bundle size from build output
    const cssAssets = result.output.filter(asset => asset.fileName.endsWith('.css'));
    const totalCssSize = cssAssets.reduce((sum, asset) => sum + asset.source.length, 0);
    console.log(`UnoCSS build completed. Total CSS size: ${totalCssSize} bytes`);
  } catch (error) {
    console.error('UnoCSS build failed:', error);
    process.exit(1);
  }
}

if (import.meta.url === `file://${process.argv[1]}`) {
  buildUnoCSS();
}

// vite.config.js - Vite configuration for CSS Modules
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import postcssModules from 'postcss-modules';

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        postcssModules({
          // Generate unique class names for collision prevention
          generateScopedName: '[name]__[local]___[hash:base64:5]',
          // Error handling: warn on missing class definitions
          warnOnEmpty: true,
        }),
      ],
    },
  },
  build: {
    outDir: 'dist/css-modules',
    rollupOptions: {
      input: './src/main.jsx',
    },
  },
});

// src/components/Button.module.css - CSS Module for Button component
/*
  Button.module.css - Styles for Button component using CSS Modules
  Isolated scope prevents class collisions across 100 components
*/

/* Base button styles shared across variants */
.button {
  font-weight: 600;
  border-radius: 0.5rem;
  outline: none;
  transition: colors 0.2s ease;
  cursor: pointer;
}

/* Size variants */
.buttonSm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.buttonMd {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.buttonLg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* Color variants */
.buttonPrimary {
  background-color: #3b82f6;
  color: white;
}

.buttonPrimary:hover {
  background-color: #1e3a8a;
}

.buttonSecondary {
  background-color: #e5e7eb;
  color: #1f2937;
}

.buttonSecondary:hover {
  background-color: #d1d5db;
}

.buttonDanger {
  background-color: #ef4444;
  color: white;
}

.buttonDanger:hover {
  background-color: #b91c1c;
}

/* Focus styles */
.button:focus {
  outline: 2px solid;
  outline-offset: 2px;
}

.buttonPrimary:focus {
  outline-color: #3b82f6;
}

.buttonSecondary:focus {
  outline-color: #6b7280;
}

.buttonDanger:focus {
  outline-color: #ef4444;
}

// src/components/Button.jsx - Button component using CSS Modules
import React from 'react';
import styles from './Button.module.css';

// Error boundary for CSS Modules component
class CSSModButtonErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('CSS Modules Button render error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return CSS Modules Button failed to load;
    }
    return this.props.children;
  }
}

// Main Button component with CSS Modules
export const CSSModButton = ({ variant = 'primary', size = 'md', children, onClick }) => {
  // Prop validation
  const validVariants = ['primary', 'secondary', 'danger'];
  const validSizes = ['sm', 'md', 'lg'];

  if (!validVariants.includes(variant)) {
    console.warn(`CSS Modules: Invalid variant ${variant}, falling back to primary`);
    variant = 'primary';
  }

  if (!validSizes.includes(size)) {
    console.warn(`CSS Modules: Invalid size ${size}, falling back to md`);
    size = 'md';
  }

  // Construct class name from CSS Module
  const buttonClass = [
    styles.button,
    styles[`button${variant.charAt(0).toUpperCase()}${variant.slice(1)}`],
    styles[`button${size.charAt(0).toUpperCase()}${size.slice(1)}`],
  ].filter(Boolean).join(' ');

  return (


        {children}


  );
};

// build.js - CSS Modules build script with error handling
import { build } from 'vite';
import { resolve } from 'path';

async function buildCSSModules() {
  try {
    console.log('Starting CSS Modules build...');
    const result = await build({
      root: resolve(__dirname, 'src'),
      build: {
        outDir: 'dist/css-modules',
        rollupOptions: {
          input: resolve(__dirname, 'src/main.jsx'),
        },
      },
    });
    // Calculate total CSS size
    const cssAssets = result.output.filter(asset => asset.fileName.endsWith('.css'));
    const totalCssSize = cssAssets.reduce((sum, asset) => sum + asset.source.length, 0);
    console.log(`CSS Modules build completed. Total CSS size: ${totalCssSize} bytes`);
  } catch (error) {
    console.error('CSS Modules build failed:', error);
    process.exit(1);
  }
}

if (import.meta.url === `file://${process.argv[1]}`) {
  buildCSSModules();
}

// Correct Tailwind 4.0 content configuration for file-based routing
export default {
  content: [
    './app/**/*.{js,jsx,ts,tsx}', // Remix app directory
    './pages/**/*.{js,jsx,ts,tsx}', // Next.js pages
    './components/**/*.{js,jsx,ts,tsx}', // Shared components
  ],
};

// Minimal UnoCSS 0.60 configuration using official presets
import { defineConfig, presetUno, presetAttributify } from 'unocss';

export default defineConfig({
  presets: [
    presetUno(), // Standard utility classes
    presetAttributify(), // Attributify mode
  ],
});

// postcss-modules configuration for consistent CSS Module scoping
module.exports = {
  plugins: [
    require('postcss-modules')({
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      warnOnEmpty: true,
    }),
  ],
};