Managing Tailwind CSS in Turborepo Packages
#tailwindcss#turborepo#monorepo#webdev
Aleksandr Ippatev

Aleksandr Ippatev @ippatev

Joined:
Jun 19, 2020

Managing Tailwind CSS in Turborepo Packages

Publish Date: Aug 22
5 0

Managing Tailwind CSS in Turborepo Packages

When working with a Turborepo that has multiple packages, you'll need to handle Tailwind CSS imports and configuration properly. Here's how to set up individual index.css files for each package:

Project Structure 

your-turborepo/
├── apps/
│   └── web/                 # Example app
│       ├── src/
│       │   └── index.css    # App-specific CSS
│       └── tailwind.config.js
├── packages/
│   ├── ui/                  # UI components package
│   │   ├── src/
│   │   │   └── index.css    # Package-specific CSS
│   │   └── tailwind.config.js
│   └── utils/               # Another package
│       ├── src/
│       │   └── index.css
│       └── tailwind.config.js
├── tailwind.config.preset.js # Shared base config
└── package.json
Enter fullscreen mode Exit fullscreen mode

Implementation

1. Create Shared Preset (Root Level) 

// tailwind.config.preset.js
module.exports = {
  content: [
    // This will be overridden in individual packages
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

2. Package-specific Tailwind Config 

// packages/ui/tailwind.config.js
const sharedConfig = require('../../tailwind.config.preset');

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Add other paths if this package consumes other packages
  ],
  theme: {
    extend: {
      // Package-specific extensions
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
      }
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

3. Package-specific CSS Files 

/* packages/ui/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Package-specific custom styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors;
  }

  .card {
    @apply bg-white rounded-xl shadow-md p-6;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
Enter fullscreen mode Exit fullscreen mode

4. PostCSS Configuration 

// packages/ui/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
};
Enter fullscreen mode Exit fullscreen mode

5. Import CSS in Package Entry Points 

// packages/ui/src/index.ts
import './index.css';

// Export your components
export { Button } from './Button';
export { Card } from './Card';
Enter fullscreen mode Exit fullscreen mode

6. Handling in Apps

In your applications (like the web app), you'll need to:

  1. Import the CSS from consumed packages
  2. Set up your own Tailwind config that includes the packages 
// apps/web/tailwind.config.js
const sharedConfig = require('../../tailwind.config.preset');

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Include paths to packages you're using
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
};
Enter fullscreen mode Exit fullscreen mode 
/* apps/web/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* App-specific styles */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}
Enter fullscreen mode Exit fullscreen mode

Build Process Considerations

When building your packages, make sure:

  1. Each package's build process includes CSS processing
  2. The built CSS is properly bundled with the package
  3. Apps that consume packages also process the CSS from those packages

This setup allows each package to have its own Tailwind configuration and styles while maintaining a consistent design system through the shared preset.

Comments 0 total

    Add comment