CSS

If you're using ChatGPT widgets or 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