@run4w4y/nx-tailwind-source-plugin

PostCSS plugin that expands @nx-sources; into Tailwind CSS v4 @source directives by reading the cached Nx project graph.

It lets a Tailwind entry stylesheet include the source roots for the Nx projects that the consuming project depends on, so shared libraries can contribute styles without maintaining duplicate @source lists by hand.

Framework/bundler compatibility

Please keep in mind that at the time of writing this plugin does NOT work with Next.js using Turbopack.

Has been verified to work with Rspack/Rsbuild setups.

Installation

bun add -d @run4w4y/nx-tailwind-source-plugin

The package expects to run inside an Nx workspace and has peer dependencies on @nx/devkit and postcss.

Usage

Add @nx-sources; before Tailwind runs:

@nx-sources;
@import "tailwindcss";

Register the plugin before Tailwind in your PostCSS config:

import nxTailwindSourcePlugin from '@run4w4y/nx-tailwind-source-plugin'
import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    nxTailwindSourcePlugin({
      projectRoot: 'apps/web',
    }),
    tailwindcss(),
  ],
}

Options

Option	Description	Default
projectRoot	Nx project root to resolve sources for. Relative paths are resolved from the workspace root.	Inferred from the CSS file path
useRelativePaths	Emit paths relative to the CSS file instead of absolute workspace paths.	true
additionalSources	Extra @source paths to append after Nx dependency source roots.	[]
debug	Emit scoped console logs while expanding sources.	false

Development

direnv allow
bun install
bun run test
bun run build

GitHub Actions can be inspected locally with act:

act -l