Build a Clipboard Manager with Tauri + Tailwind CSS | Desktop App Tutorial

Build a Clipboard Manager with Tauri + Tailwind CSS

This guide shows how to create a desktop Clipboard Manager app using Tauri, React, and Tailwind CSS. You'll learn to set up Tailwind in a Tauri project, access the system clipboard with a plugin, and build a clipboard history tracker with a modern responsive UI.

Code

import React, { useState, useEffect } from 'react'
import { readText, writeText } from 'tauri-plugin-clipboard-manager-api'

export default function ClipboardManager() {
  const [history, setHistory] = useState([])           // Clipboard history array
  const [currentClip, setCurrentClip] = useState('')   // Current clipboard content

  useEffect(() => {
    async function checkClipboard() {
      try {
        const text = await readText()                   // Read from system clipboard
        if (text && text !== currentClip) {
          setCurrentClip(text)
          setHistory(prev => [text, ...prev].slice(0, 10)) // Keep max 10 entries
        }
      } catch {
        // Ignore errors if clipboard is empty or inaccessible
      }
    }

    checkClipboard()                                    // Initial check on mount
    const interval = setInterval(checkClipboard, 1000) // Poll clipboard every second
    return () => clearInterval(interval)             // Cleanup on unmount
  }, [currentClip])

  // Write selected text back to clipboard
  const copyToClipboard = async (text) => {
    await writeText(text)
    setCurrentClip(text)
  }

  return (
    <div className="p-4 max-w-md mx-auto">
      <h1 className="text-xl font-bold mb-4">Clipboard History</h1>
      <ul className="space-y-2">
        {history.map((item, index) => (
          <li key={index} className="p-2 bg-gray-100 rounded cursor-pointer hover:bg-gray-200"
              onClick={() => copyToClipboard(item)}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
}

Key Points

• Use the tauri-plugin-clipboard-manager API to read and write system clipboard content asynchronously.
• Poll the clipboard regularly (e.g., every second) to detect new clipboard entries and update state.
• Maintain a clipboard history in React state, limiting the number of stored items for performance.
• Use Tailwind CSS utility classes to build a clean, responsive UI quickly without writing custom CSS.
• Handle errors silently when reading clipboard to avoid disrupting the app if clipboard is empty or inaccessible.