Skip to main content
After installing Mintlify Components, you need to import the component styles and configure Tailwind CSS. The setup process differs slightly between Tailwind CSS v3 and v4.
Make sure you’ve completed the Installation steps before proceeding with setup.

​
Choose Your Tailwind Version

Select the setup instructions for your Tailwind CSS version:

Tailwind CSS v4

Modern setup with the new CSS-first configuration

Tailwind CSS v3

Traditional setup with JavaScript configuration

​
Tailwind CSS v4

Tailwind CSS v4 introduces a new CSS-first configuration approach. The order of imports is critical for proper theming.
1

Import component styles first

Open your main CSS file (usually app/globals.css or src/index.css) and add the component styles before the Tailwind import:
globals.css
@import "@mintlify/components/styles.css";
@import "tailwindcss";

@theme {
  --color-primary: #0ea5e9;
  --color-secondary: #8b5cf6;
}
The component styles must be imported before @import "tailwindcss". This ensures your custom theme values override the component defaults.
2

Configure theme variables

Customize component styling using CSS variables in the @theme block:
globals.css
@import "@mintlify/components/styles.css";
@import "tailwindcss";

@theme {
  /* Primary brand color */
  --color-primary: #0ea5e9;
  
  /* Accent color for highlights */
  --color-accent: #f59e0b;
  
  /* Custom spacing */
  --spacing-card: 1.5rem;
  
  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
}
These variables will be available to both Tailwind and the components.
3

Verify setup

Test that everything is working by importing and using a component:
app/page.tsx
import { Callout } from '@mintlify/components';

export default function Home() {
  return (
    <div className="p-8">
      <Callout type="success" title="Setup Complete">
        Mintlify Components is ready to use with Tailwind CSS v4!
      </Callout>
    </div>
  );
}

​
Tailwind v4 Example

Here’s a complete example with dark mode support:
globals.css
@import "@mintlify/components/styles.css";
@import "tailwindcss";

@theme {
  /* Light mode colors */
  --color-primary: #0ea5e9;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  
  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --color-background: #0f172a;
    --color-foreground: #f1f5f9;
  }
  
  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'Fira Code', monospace;
  
  /* Spacing */
  --spacing-page: 2rem;
}

​
Tailwind CSS v3

For Tailwind CSS v3, import the styles and configure your theme in tailwind.config.js.
1

Import component styles

Open your main CSS file and import the component styles before the Tailwind directives:
globals.css
@import "@mintlify/components/styles.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
Import the component styles before the @tailwind directives to ensure proper style precedence.
2

Configure tailwind.config.js

Extend your Tailwind configuration to customize component styling:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@mintlify/components/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#0ea5e9',
        secondary: '#8b5cf6',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
  plugins: [],
};
Add node_modules/@mintlify/components/**/*.js to the content array so Tailwind includes the component styles.
3

Verify setup

Test the configuration with a simple component:
app/page.tsx
import { Callout } from '@mintlify/components';

export default function Home() {
  return (
    <div className="p-8">
      <Callout type="success" title="Setup Complete">
        Mintlify Components is ready to use with Tailwind CSS v3!
      </Callout>
    </div>
  );
}

​
Tailwind v3 Example

Here’s a complete configuration with custom colors and dark mode:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@mintlify/components/**/*.js',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#0ea5e9',
          dark: '#0284c7',
        },
        background: {
          light: '#ffffff',
          dark: '#0f172a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'Consolas', 'monospace'],
      },
      spacing: {
        'card': '1.5rem',
        'section': '3rem',
      },
    },
  },
  plugins: [],
};

​
Import Order Explained

The import order is critical for proper theming and customization: 
@import "@mintlify/components/styles.css"; /* 1. Component defaults */
@import "tailwindcss";                      /* 2. Tailwind utilities */

@theme {
  --color-primary: #0ea5e9;                 /* 3. Your overrides */
}
Importing styles after Tailwind will prevent your custom theme values from overriding the component defaults.

​
Start Using Components

Now you’re ready to use Mintlify Components in your application. Here’s a comprehensive example: 
import { 
  Accordion, 
  Callout, 
  CodeBlock, 
  Tabs,
  Steps,
  Card,
  Columns 
} from '@mintlify/components';

export default function Documentation() {
  return (
    <div>
      <Callout variant="info">
        Start building beautiful documentation with Mintlify Components.
      </Callout>

      <Steps>
        <Step title="Install">
          Install the package with your preferred package manager.
        </Step>
        <Step title="Configure">
          Set up Tailwind CSS following the instructions above.
        </Step>
        <Step title="Build">
          Start using components in your documentation.
        </Step>
      </Steps>

      <Columns cols={2}>
        <Card title="Quick Start" icon="zap">
          Get started in minutes with our installation guide
        </Card>
        <Card title="Components" icon="grid">
          Explore 22 production-ready components
        </Card>
      </Columns>

      <Tabs>
        <Tab title="JavaScript">
          <CodeBlock language="javascript">
            {`import { Callout } from '@mintlify/components';

function App() {
  return (
    <Callout variant="tip">
      This is a tip callout!
    </Callout>
  );
}`}
          </CodeBlock>
        </Tab>
        <Tab title="TypeScript">
          <CodeBlock language="typescript">
            {`import { Callout, type CalloutProps } from '@mintlify/components';

const MyCallout: React.FC<CalloutProps> = (props) => {
  return <Callout variant="info" {...props} />;
};`}
          </CodeBlock>
        </Tab>
      </Tabs>
    </div>
  );
}

​
Component Exports

All components are exported from the main entry point with their TypeScript types: 
// Import components
import { 
  Accordion,
  AccordionGroup,
  Badge,
  Callout,
  Card,
  CodeBlock,
  CodeGroup,
  Color,
  Columns,
  Expandable,
  Frame,
  Icon,
  Mermaid,
  Panel,
  Property,
  Search,
  SearchProvider,
  SearchButton,
  Steps,
  Tabs,
  Tile,
  Tooltip,
  Tree,
  TreeRoot,
  TreeFolder,
  TreeFile,
  Update,
  View
} from '@mintlify/components';

// Import TypeScript types
import type {
  CalloutProps,
  CalloutVariant,
  CardProps,
  StepsProps,
  StepsItemProps
} from '@mintlify/components';

// Import utility function
import { cn } from '@mintlify/components';
The cn utility function is also exported for advanced Tailwind class merging using tailwind-merge and clsx under the hood.

​
Next Steps

Explore Components

Browse the full component library and examples

Theming Guide

Learn how to customize colors and styles

TypeScript

Use components with full type safety

Dark Mode

Implement dark mode in your documentation

​
Troubleshooting

If component styles aren’t being applied:
  1. Verify the import order in your CSS file
  2. Check that @mintlify/components/styles.css is imported before Tailwind
  3. Clear your build cache and restart your dev server
  4. For Tailwind v3, ensure node_modules/@mintlify/components/**/*.js is in the content array
If your custom theme values aren’t overriding component defaults:Tailwind v4:
  • Ensure @import "@mintlify/components/styles.css" comes before @import "tailwindcss"
  • Place theme customizations in the @theme block
Tailwind v3:
  • Ensure @import "@mintlify/components/styles.css" comes before @tailwind directives
  • Use extend in your tailwind.config.js to preserve default values
If you encounter build errors with Tailwind CSS v4:
  1. Update to the latest version: npm install tailwindcss@latest
  2. Ensure you’re using @import "tailwindcss" (not @tailwind directives)
  3. Check that your build tool supports Tailwind v4 (Vite 6+, Next.js 15+, etc.)

Build docs developers (and LLMs) love

Get started for freeTalk to us