htmx + tailwindcss

概要:

htmx + tailwindcss 構成になります。

• bundler は、Viteを使用する例です。

[ 作成日: 2024/08/22 ]

---

構成

• htmx
• Vite:5.2
• typescript: 5.4
• express
• tailwindcss

---

関連

• https://tailwindcss.com/docs/guides/vite

---

作成したコード

• https://github.com/kuc-arc-f/express_48htmx/tree/main/example/tailwind

---

• example/tailwind/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

---

• example/tailwind/src/pages/App.tsx

• https://github.com/kuc-arc-f/express_48htmx/blob/main/example/tailwind/src/pages/App.tsx

import renderLayout from "./renderLayout";
//
export default function Page(props: any) { 
  //
  const htm = `
  <h1 class="text-4xl font-bold my-2">hello</h1>
  `;
  return renderLayout({children: htm, title: "Home"});
}

---