Tailwind

The @foundrykit/tailwind package provides Tailwind CSS configuration and global styles for the FoundryKit ecosystem.

Features

Tailwind CSS v4: Latest version with modern features
Pre-configured: Ready-to-use configuration with sensible defaults
Customizable: Easy to extend and customize for your needs
Performance optimized: Optimized for production builds
Design system: Consistent design tokens and spacing

Installation

pnpm add @foundrykit/tailwind

Usage

Import Global Styles

/* In your main CSS file */
@import "@foundrykit/tailwind/globals.css";

Next.js Integration

// In your app/layout.tsx or pages/_app.tsx
import '@foundrykit/tailwind/globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Custom Configuration

// tailwind.config.js
import { foundrykitTailwind } from '@foundrykit/tailwind'

export default foundrykitTailwind({
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // Your custom colors
      },
    },
  },
})

Configuration Features

Design Tokens

Pre-configured design tokens for consistent styling:

Colors: Primary, secondary, accent, and semantic colors
Typography: Font families, sizes, and weights
Spacing: Consistent spacing scale
Breakpoints: Responsive breakpoints
Shadows: Elevation and shadow system

Custom Properties

CSS custom properties for dynamic theming:

:root {
  --color-primary: 220 13% 91%;
  --color-primary-foreground: 220 9% 46%;
  --color-secondary: 220 14% 96%;
  --color-secondary-foreground: 220 9% 46%;
  /* ... more color variables */
}

Utility Classes

Extended utility classes for common patterns:

Layout utilities: Container queries, aspect ratios
Animation utilities: Smooth transitions and animations
Interactive utilities: Hover, focus, and active states
Accessibility utilities: Screen reader and focus management

Theme Customization

Colors

Customize the color palette:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        // ... more colors
      },
    },
  },
}

Typography

Customize typography settings:

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.75rem' }],
      },
    },
  },
}

Spacing

Customize spacing scale:

// tailwind.config.js
export default {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
    },
  },
}

Best Practices

Performance

Purge unused styles: Configure content paths for optimal purging
Use JIT mode: Leverage Tailwind's JIT compiler for faster builds
Optimize imports: Only import what you need

Maintainability

Consistent naming: Use consistent class naming conventions
Component abstraction: Abstract common patterns into components
Design tokens: Use design tokens for consistent values

Accessibility

Color contrast: Ensure sufficient color contrast ratios
Focus management: Use proper focus indicators
Screen readers: Include proper ARIA attributes

Migration from v3

If you're migrating from Tailwind CSS v3:

Update imports: Use the new import syntax
Review configuration: Check for deprecated options
Update utilities: Some utility classes may have changed
Test thoroughly: Ensure all styles work as expected

Dependencies

tailwindcss - Core Tailwind CSS library
tw-animate-css - Animation utilities
No other external dependencies

Tailwind

On this page