@repo/tailwind-config

@repo/tailwind-config centralizes Tailwind CSS and PostCSS configuration so every app in the monorepo uses consistent styling settings.

Package Exports

The package exports three items:

Export Path	File	Description
`@repo/tailwind-config/tailwind`	`tailwind.config.js`	Tailwind CSS configuration
`@repo/tailwind-config/postcss`	`postcss.config.js`	PostCSS configuration
`@repo/tailwind-config/style`	`shared.style.css`	Base Tailwind directives

Usage

Tailwind Config

Re-export the shared Tailwind config in your app:

apps/my-app/tailwind.config.js

import tailwindcss from '@repo/tailwind-config/tailwind'

export default tailwindcss

PostCSS Config

Re-export the shared PostCSS config:

apps/my-app/postcss.config.js

import postcss from '@repo/tailwind-config/postcss'

export default postcss

Base Styles

Import the shared base stylesheet in your app's CSS entry point:

apps/my-app/src/index.css

@import '@repo/tailwind-config/style';

This imports the three Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configuration Details

Tailwind Config

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./{src,app}/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content array includes:

The app's index.html
All source files in src/ or app/ directories
All components from @repo/ui — This ensures Tailwind generates CSS for shared component classes

PostCSS Config

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Uses both tailwindcss and autoprefixer PostCSS plugins.

Extending Tailwind

If you need app-specific Tailwind customizations, you can override the config instead of re-exporting:

apps/my-app/tailwind.config.js

import baseConfig from '@repo/tailwind-config/tailwind'

export default {
  ...baseConfig,
  theme: {
    ...baseConfig.theme,
    extend: {
      ...baseConfig.theme?.extend,
      colors: {
        primary: '#ff6b35',
      },
    },
  },
}

@repo/tailwind-config

On this page