deno-tailwind-ui-react-example
deno-tailwind-ui-react-example copied to clipboard
An example of how you can use Tailwind UI and React with Deno
Deno Tailwind UI React example
I built this example application to show how you can use Tailwind UI and React with Deno.
The navigation bar is from Tailwind UI's preview components list. I updated it to use NavLinks from React Router. For the body of most pages, I just have it display the name of the page and update the title to show that React Router and Helmet are working correctly. The post pages demonstrate using React Suspense with React Query.
Click here to see this example live on deno deploy.
Development
To start the application, use the make run
command. This would run the script
as if it were in production, without any live reloading.
To create the bundle for the client application, use the make bundle
command.
To start the application in development mode, use the make run-dev
command. It
will automatically reload the page whenever the server is restarted or a public
file is modified. It will also run make bundle in watch mode so that the page
will reload whenever there is a change that affects the bundle.
For classes to be included in the style tag when rendered on the server, you must use the tw template string around the className.
import { React } from "./deps.ts";
import { TwindContext } from "./twind.tsx";
export const Example = () => {
const { tw } = useContext(TwindContext);
return (
<h2 className={tw`bg-gray-800`}>
Example
<h2>
);
};
Deploy
To be able to deploy this application, you must commit the bundle to the repo.