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

Install

You will need to install packup and twd.

deno run -A https://deno.land/x/packup@v0.0.15/install.ts
deno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/twd@v0.4.8/cli.ts

Development

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

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

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

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`}>
    Example
  <h2>
);

Build

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

Download Details:

Author: KyleJune
Download Link: Download The Source Code
Official Website: https://github.com/KyleJune/deno-tailwind-ui-react-example

#react #tailwind #deno #tailwindcss