Skip to main content

​
Tailwind Plugin

The @empathyco/x-tailwindcss package provides a Tailwind CSS plugin that adds Interface X component styles and utilities to your project.

​
Installation

1

Install the package

Install @empathyco/x-tailwindcss using your package manager:
npm install @empathyco/x-tailwindcss
2

Configure Tailwind

Add the plugin to your tailwind.config.ts or tailwind.config.js file:
tailwind.config.ts
import xTailwindCss from '@empathyco/x-tailwindcss'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  plugins: [xTailwindCss],
}
Source: /home/daytona/workspace/source/packages/x-tailwindcss/demo/tailwind.config.ts:1
3

Import Tailwind CSS

Import Tailwind’s directives in your main CSS file:
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

​
What the Plugin Provides

The plugin automatically adds:

​
1. Theme Configuration

Access to the x theme namespace with all design tokens: 
theme: {
  x: {
    colors: { /* color palette */ },
    spacing: { /* spacing scale */ },
    fontSize: { /* font sizes */ },
    borderRadius: { /* border radii */ },
    // ... all other tokens
  }
}
You can use these tokens in your custom styles: 
.my-component {
  color: theme('x.colors.lead.50');
  padding: theme('x.spacing.16');
  font-size: theme('x.fontSize.md');
}

​
2. Component Classes

Pre-styled component classes for common UI elements: 
<button class="x-button">Default Button</button>
<button class="x-button x-button-outlined">Outlined</button>
<button class="x-button x-button-ghost">Ghost</button>
<button class="x-button x-button-link">Link</button>

<!-- Sizes -->
<button class="x-button x-button-sm">Small</button>
<button class="x-button x-button-md">Medium</button>
<button class="x-button x-button-lg">Large</button>

<!-- Colors -->
<button class="x-button x-button-lead">Lead</button>
<button class="x-button x-button-accent">Accent</button>

​
3. Utility Classes

Additional utility classes for common patterns in search UIs.

​
4. Custom Variants

The selected variant for selected states: 
<button class="x-button selected:bg-blue-600">
  Selected button
</button>
This corresponds to the .x-selected class being present on the element.

​
Plugin Architecture

The plugin is built using Tailwind’s official plugin API: 
import plugin from 'tailwindcss/plugin'

export default plugin.withOptions(
  () => {
    return function (helpers: TailwindHelpers) {
      // Add component styles
      helpers.addComponents(components(helpers), { respectPrefix: false })
      
      // Add dynamic components (color variants, etc.)
      forEach(dynamicComponents(helpers), (key, { styles, values }) => {
        helpers.matchComponents(
          { [key]: styles },
          { respectPrefix: false, values: values ?? undefined },
        )
      })
      
      // Add utilities
      helpers.addUtilities(utilities(helpers), { respectPrefix: false })
      
      // Add custom variant
      helpers.addVariant('selected', '&.x-selected')
    }
  },
  () => {
    return {
      theme: { x: xTheme }
    }
  },
)
Source: /home/daytona/workspace/source/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts:1

​
Using Theme Helpers

When creating custom component styles, use the Tailwind helpers: 
import type { TailwindHelpers } from '@empathyco/x-tailwindcss'

export function myComponent(helpers: TailwindHelpers) {
  const { theme } = helpers
  
  return {
    '.my-component': {
      color: theme('x.colors.lead.50'),
      padding: theme('x.spacing.16'),
      fontSize: theme('x.fontSize.md'),
      borderRadius: theme('x.borderRadius.sm'),
    }
  }
}

​
Package Information

Package

@empathyco/x-tailwindcss

Version

2.0.0-alpha.31+

Dependencies

  • Tailwind CSS 3.4+
  • Node.js 22+

Repository

empathyco/x

​
Next Steps

Customization

Learn how to customize the design system

Components

Explore available Vue components

Build docs developers (and LLMs) love

Get started for freeTalk to us