Styling System - PyqDeck Wiki

Tailwind CSS 4

PyqDeck uses Tailwind CSS 4 for styling. This version brings improved performance and a more streamlined configuration via CSS variables.

We use a standard utility function to merge Tailwind classes safely, handling conflicts between base classes and overrides.

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

The application supports Dark and Light modes out of the box.

Implementation: Uses next-themes and a ThemeProvider.
CSS Variables: Themes are defined using CSS variables (e.g., --background, --foreground, --primary).
Usage: Use Tailwind’s theme-aware classes like text-primary, bg-background, or prefix with dark: for specific overrides.

We use the Roboto font family for a clean, modern, and readable look across all devices. It is integrated via next/font.

PyqDeck follows a mobile-first approach.

Use Tailwind’s breakpoint prefixes (sm:, md:, lg:, xl:) for responsive layouts.
We have a custom use-mobile hook to detect screen size in JavaScript when CSS media queries are insufficient.

Avoid Inline Styles: Use Tailwind classes for all styling.
Component-Level Styles: Keep styling within the .view.jsx files.
Reusability: If you find yourself repeating a set of styles, consider creating a new UI primitive in components/ui/.
Semantic Colors: Use semantic names like primary, secondary, destructive, muted instead of specific colors like blue-500.