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

tailwind.config.ts

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

Add a custom font

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).

Add a brand-specific color

extend: {
  colors: {
    brand: {
      50:  "#EFF6FF",
      500: "#3B82F6",
      900: "#1E3A8A",
    },
  },
}

Use as bg-brand-500, text-brand-900, etc.

Custom spacing scale

extend: {
  spacing: {
    "18": "4.5rem",
    "112": "28rem",
  },
}

Tailwind plugin

plugins: [
  require("tailwindcss-animate"),
  require("@tailwindcss/typography"),
]

Then npm install @tailwindcss/typography (handled automatically when vly adds the plugin via prompt).

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

Themes

Runtime theme tokens (CSS variables).

Typography

Font setup.

shadcn/ui components

Components that use the config.