get-styling-patterns

Retrieve styling patterns for React Native Expo projects using NativeWind and Tailwind CSS. Covers className approaches, arbitrary values, CSS interop, configuration, and conditional styling techniques.

Instructions

Get styling patterns (NativeWind / Tailwind CSS). Call this when styling components. Covers NativeWind v4 className approach, arbitrary values, cssInterop for third-party components, Tailwind config, JS constants, conditional styles, and setup checklist. Use topic to get a specific section only.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`topic`	No	Get a specific section only. Available: nativewind, arbitrary-values, css-interop, tailwind-config, js-constants, conditional, checklist. Omit for full content.
`compact`	No	If true, returns rules only without code examples. Much shorter.

Implementation Reference

src/content/patterns/styling-patterns.ts:197-199 (handler)
The handler function `getStylingPatterns` retrieves styling pattern documentation, supporting topic filtering and a compact mode.
```
export const getStylingPatterns = (topic?: string, compact?: boolean): string =>
  resolvePattern(pattern, topic, compact);
```

src/index.ts:146-164 (registration)

Registration of the `get-styling-patterns` tool in `src/index.ts`.

server.tool(
  "get-styling-patterns",
  "Get styling patterns (NativeWind / Tailwind CSS). Call this when styling components. Covers NativeWind v4 className approach, arbitrary values, cssInterop for third-party components, Tailwind config, JS constants, conditional styles, and setup checklist. Use `topic` to get a specific section only.",
  {
    topic: z
      .string()
      .optional()
      .describe(
        "Get a specific section only. Available: nativewind, arbitrary-values, css-interop, tailwind-config, js-constants, conditional, checklist. Omit for full content."
      ),
    compact: z
      .boolean()
      .optional()
      .describe("If true, returns rules only without code examples. Much shorter."),
  },
  async ({ topic, compact }) => ({
    content: [{ type: "text", text: getStylingPatterns(topic, compact) }],
  })
);

src/index.ts:149-160 (schema)

Input schema definition for the `get-styling-patterns` tool.

{
  topic: z
    .string()
    .optional()
    .describe(
      "Get a specific section only. Available: nativewind, arbitrary-values, css-interop, tailwind-config, js-constants, conditional, checklist. Omit for full content."
    ),
  compact: z
    .boolean()
    .optional()
    .describe("If true, returns rules only without code examples. Much shorter."),
},

React Native Expo MCP