# CSS (/docs/core-concepts/css)

If you're using [MCP Apps](/docs/core-concepts/tools#mcp-apps-metadata), xmcp provides your application multiple ways to use CSS:

* [Tailwind CSS](#tailwind-css)
* [CSS](#css)
* [CSS Modules](#css-modules)

<Callout type="info">
  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.
</Callout>

## 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:

<TerminalTabs
  tabs={[
  {
    label: "pnpm",
    value: "pnpm",
    content: "pnpm add -D tailwindcss @tailwindcss/postcss",
  },
  {
    label: "npm",
    value: "npm",
    content: "npm i -D tailwindcss @tailwindcss/postcss",
  },
  {
    label: "yarn",
    value: "yarn",
    content: "yarn add -D tailwindcss @tailwindcss/postcss",
  },
  {
    label: "bun",
    value: "bun",
    content: "bun add -D tailwindcss @tailwindcss/postcss",
  },
]}
  defaultTab="pnpm"
/>

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

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

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

```css
@import 'tailwindcss';
```

Now you can use Tailwind classes in your tools:

```tsx
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>
  );
}
```

## CSS

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

Create a `globals.css` file:

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

Use the styles in your tool:

```tsx
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:

```css
.container {
  padding: 2rem;
}

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

Import the styles object and use it in your tool:

```tsx
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.