This project is a TailwindCSS middleware for Hono.
- Install the package
npm i -S hono-tailwind- Install TailwindCSS package
npm i -S tailwindcss- Add the middleware to your Hono app
You don't need to add any configuration to get going in development:
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { tailwind } from "hono-tailwind";
const app = new Hono();
const NODE_ENV = process.env.NODE_ENV || "development";
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-800">If this is styled, it works 🎉</p>
<p class="mt-4 text-lg text-gray-600">This is even lighter!</p>
</div>
</body>
</html>
`),
);
serve(
{
fetch: app.fetch,
port: 3000,
},
(info) => {
console.log(`Server is running on http://localhost:${info.port}`);
},
);If you want a more production-friendly approach:
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { tailwind } from "hono-tailwind";
const app = new Hono();
const NODE_ENV = process.env.NODE_ENV || "development";
app.use(
"/public/tailwind.css",
tailwind({
out: NODE_ENV === "production" ? "/public/tailwind.css" : undefined,
}),
);
app.get("/", (c) =>
c.html(`
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/public/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-800">If this is styled, it works 🎉</p>
<p class="mt-4 text-lg text-gray-600">This is even lighter!</p>
</div>
</body>
</html>
`),
);
serve(
{
fetch: app.fetch,
port: 3000,
},
(info) => {
console.log(`Server is running on http://localhost:${info.port}`);
},
);- Set up a way for the user to configure their own tailwind
- Set up a way to export the generated tailwind css file