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 each page, I
just have it display the name of the page just to demonstrate that the react
router works.


You will need to install packup and twd.

deno run -A[email protected]/install.ts
deno install --allow-read=. --allow-write=.,, -fq[email protected]/cli.ts


The twd cli tool will update the style.css file as you make changes to your

twd -w index.html -o css/style.css

The packup cli tool will handle hot reloading of the application during

packup index.html

For classes to be included in the styles.css, you must use the tw template
string around the className.

import { React, tw } from "./deps.ts";

export const Example = () => (
  <h2 className={tw`bg-gray-800`}>


If you have not used the twd cli tool yet, you will need to do so to generate
the style.css file for your build.

twd index.html -o css/style.css

The packup cli tool will handle generating a distribution of the application.

packup build index.html