CSS

Style your xmcp MCP tools with Tailwind CSS, CSS Modules, or plain CSS, including class management and theming for tool-rendered UI components.

For the complete documentation index, see llms.txt. Markdown variants of every page are available by appending .md to the URL.

If you're using MCP Apps, xmcp provides your application multiple ways to use CSS:

Tailwind CSS
CSS
CSS Modules

Tailwind CSS

A CSS framework that provides utility classes like flex, pt-4, text-center, and rotate-90. You use these classes directly in your component to build layouts and designs.

Install Tailwind CSS:

pnpm add -D tailwindcss @tailwindcss/postcss

Add the PostCSS plugin to your postcss.config.mjs file:

Code

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Create a globals.css file in your project root (or src/globals.css) and import Tailwind:

Code

@import 'tailwindcss';

Now you can use Tailwind classes in your tools:

Code

import type { ToolMetadata } from "xmcp";

export const metadata: ToolMetadata = {
  name: "greet",
  description: "Hello, world!",
};

export default function handler() {
  return (
    <div className="flex items-center justify-center p-8">
      <h1 className="text-2xl font-bold">Hello, world!</h1>
    </div>
  );
}

Write standard CSS to style your components without any framework or tooling.

Create a globals.css file:

Code

.title {
  font-size: 2rem;
  font-weight: bold;
}

Use the styles in your tool:

Code

import type { ToolMetadata } from "xmcp";

export const metadata: ToolMetadata = {
  name: "greet",
  description: "Hello, world!",
};

export default function handler() {
  return (
    <div>
      <h1 className="title">Hello, world!</h1>
    </div>
  );
}

CSS Modules

Scoped styles that are tied to a specific tool file.

Create a CSS module file with the .module.css extension:

Code

.container {
  padding: 2rem;
}

.title {
  font-size: 2rem;
  font-weight: bold;
}

Import the styles object and use it in your tool:

Code

import type { ToolMetadata } from "xmcp";
import styles from "./greet.module.css";

export const metadata: ToolMetadata = {
  name: "greet",
  description: "Hello, world!",
};

export default function handler() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
}

Summary

Pick the approach that fits your project. You can also mix them, for example, use Tailwind for layout and CSS Modules for component-specific styles.