Hono Tailwind

A Hono 🔥 middleware for getting started with Tailwind right away!

hono-tailwind 🔥 (WIP)

This project is a TailwindCSS middleware for Hono. This is just a way of doing it without Vite, and it will just compile your TailwindCSS on every request.

For now this is really only recommended in development until I make a way to save the file to your system.

Usage (Subject to change)

Install the package

npm i -S hono-tailwind

Install TailwindCSS package

npm i -S tailwindcss

Add the middleware to your Hono app

import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { tailwind } from "hono-tailwind";

const app = new Hono();

app.use("/tailwind.css", tailwind());
app.get("/", (c) =>
  c.html(`
    <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/tailwind.css">
      </head>
      <body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
        <div>
          <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind + Hono!</h1>
          <p class="mt-4 text-lg text-gray-700">If this is styled, it works 🎉</p>
        </div>
      </body>
    </html>
  `),
);

serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running on http://localhost:${info.port}`);
  },
);

To Do

[ ] Set up a way for the user to configure their own tailwind

[ ] Set up a way to export the generated tailwind css file

Top categories