Create script using the twind arg does not have any twind use

cdoremus commented 1 year ago

Running the create script as thus:

deno run -A -r https://deno.land/x/ultra/create.ts twind

Produces an app that does not use Tailwind in the app. Here's what the app.tsx file looks like and you can see that there is no tailwind classes referenced in it:

import useAsset from "ultra/hooks/use-asset.js";
// Twind
import { TwindProvider } from "./twind/TwindProvider.tsx";

export default function App() {
  console.log("Hello world!");
  return (
    <TwindProvider>
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <title>Ultra</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="shortcut icon" href={useAsset("/favicon.ico")} />
          <link rel="stylesheet" href={useAsset("/style.css")} />
        </head>
        <body>
          <main>
            <h1>
              <span></span>__<span></span>
            </h1>
            <p>
              Welcome to{" "}
              <strong>Ultra</strong>. This is a barebones starter for your web
              app.
            </p>
            <p>
              Take{" "}
              <a
                href="https://ultrajs.dev/docs"
                target="_blank"
              >
                this
              </a>, you may need it where you are going. It will show you how to
              customise your routing, data fetching, and styling with popular
              libraries.
            </p>
          </main>
        </body>
      </html>
    </TwindProvider>
  );
}

cdoremus commented 1 year ago

I tried adding the tailwind context and hook to the app.tsx file like is done in the with-twind example, but when I did that I got a "No TWProvider found" error.

mashaal commented 1 year ago

I think it just needs

import { tw } from "twind" after that provider import

deckchairlabs commented 1 year ago

If your going from the with-twind example, you would need to place the provider around in the App on client and server if your receiving that context error.

We should probably rework the create so it matches the example?

cdoremus commented 1 year ago

@mashaal It works. Thank you!

cdoremus commented 1 year ago

@deckchairlabs it works with your solution too, but I think that @mashaal solution (#192) is better since it does not rely on extra code in the src/context and src/hooks folders, so I would prefer the the with-twind example be modeled after #192 (with one exception: #192 needs to show twind use in the HTML markup. The setup is correct, but tailwind styling is not applied to anything in app.tsx).

cdoremus commented 1 year ago

Setup works with PR #192, but an example of Tailwind styling is still needed.

exhibitionist-digital / ultra

Create script using the twind arg does not have any twind use #190