Tailwind Factory API Reference
The Tailwind factory provides a pre-configured Tailwind setup with all EBRAINS design tokens built-in. It simplifies app configuration while maintaining consistency across the ecosystem.
Location: /tailwind.factory.js (monorepo root)
Basic Usage
API
createTailwindConfig(options)
Creates a complete Tailwind CSS configuration object with EBRAINS design tokens.
Parameters
options (Object) - Configuration options
| Parameter | Type | Required | Description |
|---|---|---|---|
appName | string | Yes | Your application name. Used for logging during build. |
contentPaths | string[] | Yes | Array of glob patterns for files to scan for Tailwind classes. |
extend | Object | No | Additional theme extensions. Merged with EBRAINS tokens. |
Returns
Object - Complete Tailwind CSS configuration object
Example
What’s Included
The factory automatically configures:
All tokens from packages/assets/frontend.config.js:
- Colors -
colors.tokens,colors.background,colors.text,colors.border - Spacing -
spacing.tokensconverted to Tailwind scale - Typography -
typography.families,typography.typesets - Structure -
structure.breakpoints,structure.container - Radii - Border radius values
- Shadows - Box shadows and drop shadows
- Easings - Transition timing functions
Advanced utilities:
- ColorTokens - Enhanced color system
- Components - Utility components
- Container - Smart container utilities
- DevTools - Development helpers
- FullBleedScroller - Full-width scrolling
- GridGap - Grid gap utilities
- GridLayout - Advanced grid system
- GridLine - Grid line helpers
- InteractionMediaQueries - Hover/touch detection
- Keyline - Border utilities
- Layout - Layout helpers
- PseudoElements - Before/after utilities
- RatioBox - Aspect ratio boxes
- Scrollbar - Custom scrollbar styles
- Spacing - Spacing system
- Typography - Typography utilities
- Underline - Text decoration
4. Third-Party Plugins
- Container Queries -
@tailwindcss/container-queries
5. Safelist
Pre-generated classes that are always available (never purged):
6. Core Plugin Configuration
7. Theme Configuration
Complete theme with EBRAINS tokens:
Real-World Examples
Example 1: Basic React App
Example 2: Vue App with Custom Colors
Related Documentation
- Configure Tailwind Tutorial - Step-by-step setup
- Tailwind Reference - All EBRAINS classes
- How to Add Custom Classes - Extend the factory
- How to Set Up External Projects - Non-monorepo config