Tailwind CSS Integration

Hyperclay supports Tailwind CSS out of the box. Just add these two lines to your HTML:


<link rel="stylesheet" href="https://hyperclay.com/css/tailwind-base.css">
<script src="https://hyperclay.com/js/vendor/tailwind-play.js"></script>

How It Works

The first line (tailwind-base.css) applies Tailwind’s reset and base styles, giving you a clean foundation without polluting your HTML.

The second line (tailwind-play.js) watches your DOM for changes and generates CSS in a single persistent <style> tag. You can use any Tailwind class without thinking about it - it just works.

Basic Example


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://hyperclay.com/css/tailwind-base.css">
    <script src="https://hyperclay.com/js/vendor/tailwind-play.js"></script>
    <script src="https://hyperclay.com/js/hyperclay-starter-kit.js" type="module"></script>
</head>
<body class="bg-slate-50 p-8">
    <div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6">
        <h1 class="text-2xl font-bold text-slate-900" edit-mode-contenteditable>
            Hello Tailwind
        </h1>
        <p class="text-slate-500 mt-2">
            Building interfaces with utility classes
        </p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
            Click me
        </button>
    </div>
</body>
</html>

That’s it. Tailwind CSS with zero configuration.