Create script using the twind arg does not have any twind use
cdoremus opened this issue · comments
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>
);
}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.
I think it just needs
import { tw } from "twind" after that provider import
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?
@mashaal It works. Thank you!
@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).
Setup works with PR #192, but an example of Tailwind styling is still needed.