> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pyqdeck.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling System

> Tailwind CSS, theming, and responsive design in PyqDeck

## Tailwind CSS 4

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

### The `cn()` Utility

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

```javascript theme={null}
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

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

## Theming

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.

## Typography

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

## Responsive Design

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.

## Best Practices

* **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`.