Integrating Tailwind CSS into a Deno Project

Tailwind CSS is popular due to its utility-first approach. You can create a TSX component and apply Tailwind CSS utility classes to it, effectively managing the component's style without worrying about large CSS classes anymore.

Inspired by Fresh, the official Deno web framework, you can now style your web app with Tailwind CSS in a super easy way.

Create tailwind.config.ts file.

import { type Config } from "npm:tailwindcss@3.3.5";
export default {
  content: [
    "./modules/**/*.tsx",
    "./components/**/*.tsx",
  ],
} satisfies Config;

You can find the detail instruction of this configuration in the Tailwind docs.

Create default tailwind.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

This file will be seamlessly transformed into style.css. Therefore, you must include it in your HTML layout.

<link href="styles.css" rel="stylesheet" />;

You can find how to custom the CSS in the Using CSS and @layer page.

Import tailwind middleware and attach it to the entry point file main.ts:

import Server from "fastro/mod.ts";
import { tailwind } from "fastro/middleware/tailwind/mod.ts";

const s = new Server();
s.use(tailwind());
s.serve();

And of course, you must adjust the deno.json file too.

{
  "lock": false,
  "tasks": {
    "start": "ENV=DEVELOPMENT deno run -A --watch main.ts"
  },
  "imports": {
    "std/": "https://deno.land/std@0.222.0/",
    "fastro/": "https://fastro.deno.dev/v0.87.2/",
    "$app/": "./",
    "preact": "npm:preact@10.20.2",
    "preact/": "npm:/preact@10.20.2/"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "nodeModulesDir": true
}

You can find the complete example in the template source code.