CSS

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

xmcp automatically detects and imports a globals.css file if it exists in globals.css, src/globals.css, or src/tools/globals.css (in priority order). You don't need to manually import it in every tool.

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:

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

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

@import 'tailwindcss';

Now you can use Tailwind classes in your tools:

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:

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

Use the styles in your tool:

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:

.container {
  padding: 2rem;
}

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

Import the styles object and use it in your tool:

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.

CSS

Tailwind CSS

CSS

CSS Modules

Summary

One framework to rule them all