Dinou logoDinou
docs
npmGitHub

Styles & CSS

Learn how to use Tailwind.css, .module.css, and .css styles in Dinou.

Overview

Dinou is ready to use Tailwind.css, .module.css, and .css styles. All styles will be generated in a file in public 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>

Example of Usage

Layout

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

import type { ReactNode } from "react";
import "@/globals.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>
  );
}

Globals CSS

/* src/globals.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.