dinou docs

Overview

dinou is ready to use Tailwind.css, .module.css, and .css styles. All styles will be generated in a file in webpack folder named styles.css. So you must include this in your page.tsx or layout.tsx file, in the head tag:

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

Important: Only styles imported under "use client" directive will be detected by Webpack and generated in a styles.css in webpack folder.

Example with Client Components

Layout

// src/layout.tsx
"use client";

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

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>dinou app</title>
        <link rel="icon" type="image/png" href="/favicon.ico" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest"></link>
        <link href="/styles.css" rel="stylesheet"></link>
      </head>
      <body>{children}</body>
    </html>
  );
}

Global CSS

/* global.css */
@import "tailwindcss";

.test1 {
  background-color: purple;
}

Page Component

// src/page.tsx
"use client";

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

export default function Page() {
  return (
    <div className={`text-red-500 test1 ${styles.test2}`}>hi world!</div>
  );
}

Module CSS

/* src/page.module.css */
.test2 {
  text-decoration: underline;
}

CSS Types

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

The above will produce the text hi world! in red, underlined, and with a purple background color.

Example with Server Components

If you want to use server components instead of client components, then you must create an additional file (e.g. styles.ts) where you use the "use client" directive and import all the .css files used in server components.

Server Layout

// src/layout.tsx
import type { ReactNode } from "react";

export default async function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>dinou app</title>
        <link rel="icon" type="image/png" href="/favicon.ico" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest"></link>
        <link href="/styles.css" rel="stylesheet"></link>
      </head>
      <body>{children}</body>
    </html>
  );
}

Server Page

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

export default async function Page() {
  return (
    <div className={`text-red-500 test1 ${styles.test2}`}>hi world!</div>
  );
}

Styles Import File

// src/styles.ts
"use client"; // <-- This is key.
import "./global.css";
import "./page.module.css";

Styles & CSS