> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind config

> Edit the Tailwind config directly. Add custom colors, spacing, breakpoints, and plugins.

Every vly project's `tailwind.config.ts` is editable. Use it for tokens that don't need to change at runtime (theme tokens stay in CSS variables; static config — breakpoints, fonts, plugins — lives here).

## What's in the default config

```typescript tailwind.config.ts theme={null}
import type { Config } from "tailwindcss";

export default {
  darkMode: ["class"],
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    container: { center: true, padding: "2rem" },
    extend: {
      colors: {
        border:      "hsl(var(--border))",
        background:  "hsl(var(--background))",
        foreground:  "hsl(var(--foreground))",
        primary: {
          DEFAULT:    "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // …
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["Inter", "ui-sans-serif", "system-ui"],
        mono: ["JetBrains Mono", "ui-monospace"],
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;
```

## Common customizations

<Tabs>
  <Tab title="Add a custom font">
    ```typescript theme={null}
    fontFamily: {
      sans: ["Geist", "Inter", "ui-sans-serif", "system-ui"],
    }
    ```

    Then add the Geist `<link>` to your root layout (or import from `next/font` if applicable).
  </Tab>

  <Tab title="Add a brand-specific color">
    ```typescript theme={null}
    extend: {
      colors: {
        brand: {
          50:  "#EFF6FF",
          500: "#3B82F6",
          900: "#1E3A8A",
        },
      },
    }
    ```

    Use as `bg-brand-500`, `text-brand-900`, etc.
  </Tab>

  <Tab title="Custom spacing scale">
    ```typescript theme={null}
    extend: {
      spacing: {
        "18": "4.5rem",
        "112": "28rem",
      },
    }
    ```
  </Tab>

  <Tab title="Tailwind plugin">
    ```typescript theme={null}
    plugins: [
      require("tailwindcss-animate"),
      require("@tailwindcss/typography"),
    ]
    ```

    Then `npm install @tailwindcss/typography` (handled automatically when vly adds the plugin via prompt).
  </Tab>
</Tabs>

## When to edit by hand

Most users let vly handle the config via prompt. Hand-edit when:

* You want to fine-tune a value that's not directly tied to a feature (a single padding value).
* You're debugging a Tailwind issue and want to see the exact config.
* You're adding a third-party plugin not yet supported by a vly prompt.

## Related

<CardGroup cols={3}>
  <Card title="Themes" icon="palette" href="/features/design/themes">
    Runtime theme tokens (CSS variables).
  </Card>

  <Card title="Typography" icon="type" href="/features/design/typography">
    Font setup.
  </Card>

  <Card title="shadcn/ui components" icon="boxes" href="/features/design/shadcn-components">
    Components that use the config.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.