Dinou docs

💅 Styles (Tailwind, CSS Modules, & Global CSS)

Dinou supports multiple styling approaches out of the box: Tailwind CSS, CSS Modules, and global CSS. All styles are bundled into a single file served at /styles.css.

1. Link the Stylesheet

You must manually link the bundled stylesheet in your root layout or page.

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

2. Full Example (Layout + Global CSS + Modules)

Complete example showing all styling approaches working together.

Root Layout (`src/layout.tsx`)

"use client";

import type { ReactNode } from "react";
import "./globals.css"; // Import global styles

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>Dinou App</title>
        <link href="/styles.css" rel="stylesheet" />
      </head>
      <body className="min-h-screen bg-background">
        {children}
      </body>
    </html>
  );
}

Global CSS (`src/globals.css`)

@import "tailwindcss";

/* Custom global styles */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

.custom-bg {
  background-color: purple;
}

/* Tailwind directives */
@layer base {
  h1 {
    @apply text-4xl font-bold;
  }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
  }
}

Page with CSS Modules (`src/page.tsx`)

"use client";

import styles from "./page.module.css";

export default function Page() {
  return (
    <div className={`text-red-500 custom-bg ${styles.underlined}`}>
      <h1>Hello World!</h1>
      <button className="btn-primary">Click me</button>
    </div>
  );
}

CSS Module (`src/page.module.css`)

.underlined {
  text-decoration: underline;
  border-bottom: 2px solid currentColor;
}

TypeScript Declarations (`src/css.d.ts`)

For TypeScript support with CSS Modules:

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

Tailwind CSS

Utility-first framework.

CSS Modules

Locally scoped CSS with .module.css extension.

Global CSS

Traditional CSS files imported in components.

Styles