Use Tailwind just with @hono/jsx?

bruceharrison1984 commented 1 year ago

I'm looking to use this lib with Tailwind, but can't seem to get it working without one of the additional JS frameworks. Pages render, but the Tailwind styles don't work.

Is there anyway to get this working just with Hono?

bruceharrison1984 commented 1 year ago

I was able to get it working by creating the following:

// app/client.ts
import './style.css'

// app/_layout.ts
const handler: LayoutHandler = ({ children, head }) => {
  return (
    <html lang="en" class="h-full w-full">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/svg+xml" href="static/torch-auth.svg" />
        {import.meta.env.PROD ? (
          <>
            <link href="/static/style.css" rel="stylesheet" />
            <script type="module" src="/static/client.js"></script>
          </>
        ) : (
          <>
            <link href="/app/style.css" rel="stylesheet" />
            <script type="module" src="/app/client.ts"></script>
          </>
        )}
        {head.createTags()}
      </head>
      <body class="text-gray-600 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 h-full w-full">
        {children}
      </body>
    </html>
  );
};

as well as adding the following to quiet the linter error:

// app/env.d.ts
interface ImportMeta {
  env: {
    PROD: string;
  };
}

yusukebe commented 1 year ago

Cool!

sonikjs / sonik

Use Tailwind just with @hono/jsx? #5