Enhancing Static Sites with Tailwind CSS and Rust/WASM Client-Side Filters

#tailwindcss #rust #filters #frontend

Static sites are fast and easy to deploy, but as the number of items grows—like portfolios, blog lists, or product catalogs—filtering on the client can become slow and clunky. Thanks to Rust compiled to WebAssembly (WASM), you can implement lightning-fast client-side filters while styling everything smoothly with Tailwind CSS.

Why Rust + WASM for Filtering?

Near-native performance for large datasets
Compiled Rust is memory-safe and type-checked
Offloads heavy computation from JavaScript runtime
Packs tightly and loads quickly in the browser

Tailwind for UI & Feedback

Use Tailwind to build filter UI and display results effortlessly:

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow">
  <div class="flex space-x-2 mb-4">
    <button class="filter-btn px-4 py-2 bg-indigo-600 text-white rounded">All</button>
    <button class="filter-btn px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded">Design</button>
    <button class="filter-btn px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded">Development</button>
  </div>
  <ul id="items-list" class="space-y-4">
    <!-- Items rendered dynamically -->
  </ul>
</div>

Buttons styled with rounded, px-4 py-2, and theme-aware colors
space-x-2 and space-y-4 handle spacing elegantly

Rust/WASM Filter Logic

Write fast filtering in Rust and call it from JS using wasm-bindgen:

use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
pub struct Item {
  pub title: String,
  pub category: String,
}

#[wasm_bindgen]
pub fn filter_items(json_items: &str, category: &str) -> JsValue {
  let items: Vec<Item> = serde_json::from_str(json_items).unwrap();
  let filtered: Vec<Item> = if category == "All" {
    items
  } else {
    items.into_iter().filter(|i| i.category == category).collect()
  };
  JsValue::from_serde(&filtered).unwrap()
}

Parses JSON, filters in Rust, and returns a serialized result
Performance remains high even as dataset sizes increase

Integrating in JavaScript

Load the WASM module and update UI based on filter:

import init, { filter_items } from './pkg/filter_wasm.js';

async function setup() {
  await init();

  const items = [...]; // JSON data array
  const json = JSON.stringify(items);
  const list = document.getElementById('items-list');
  const buttons = document.querySelectorAll('.filter-btn');

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      const cat = btn.innerText;
      const result = filter_items(json, cat);
      const filtered = JSON.parse(result);
      list.innerHTML = '';
      filtered.forEach((it) => {
        const li = document.createElement('li');
        li.textContent = it.title;
        li.className = 'p-2 bg-gray-50 dark:bg-gray-800 rounded';
        list.appendChild(li);
      });
    });
  });
}

setup();

Tailwind classes (p-2, rounded, theme variants) keep styling consistent.

Why This Pattern Scales

Rust/WASM handles performance-heavy tasks
Tailwind remains the single styling source
Works with static site generators like Eleventy, Hugo, 11ty, or Astro

Get the 37‑Page PDF Guide

Whether you’re building static sites, component libraries, or progressive web apps with interactive logic, Mastering Tailwind at Scale: Architecture, Patterns & Performance is your blueprint: