Managing Tailwind CSS in Turborepo Packages

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:
…


This content originally appeared on DEV Community and was authored by Aleksandr Ippatev

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

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: [],
};

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',
      }
    },
  },
};

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; }
}

4. PostCSS Configuration 

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

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';

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}',
  ],
};

/* 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);
  }
}

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.


This content originally appeared on DEV Community and was authored by Aleksandr Ippatev


Print Share Comment Cite Upload Translate Updates
APA

Aleksandr Ippatev | Sciencx (2025-08-22T03:14:56+00:00) Managing Tailwind CSS in Turborepo Packages. Retrieved from https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/

MLA
" » Managing Tailwind CSS in Turborepo Packages." Aleksandr Ippatev | Sciencx - Friday August 22, 2025, https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/
HARVARD
Aleksandr Ippatev | Sciencx Friday August 22, 2025 » Managing Tailwind CSS in Turborepo Packages., viewed ,<https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/>
VANCOUVER
Aleksandr Ippatev | Sciencx - » Managing Tailwind CSS in Turborepo Packages. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/
CHICAGO
" » Managing Tailwind CSS in Turborepo Packages." Aleksandr Ippatev | Sciencx - Accessed . https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/
IEEE
" » Managing Tailwind CSS in Turborepo Packages." Aleksandr Ippatev | Sciencx [Online]. Available: https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/. [Accessed: ]
rf:citation
» Managing Tailwind CSS in Turborepo Packages | Aleksandr Ippatev | Sciencx | https://www.scien.cx/2025/08/22/managing-tailwind-css-in-turborepo-packages/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts