Tailwind CSS v3 content path resolution in nested project layouts

In Tailwind CSS v3, content array globs resolve relative to the location of the tailwind.config.js file. If your configuration is located in a subdirectory, you can reference sibling or parent directories using standard relative path syntax (../).

Referencing Sibling Packages

Yes, you can reference directories above or beside the configuration file. To ensure reliability across different operating systems (Windows, macOS, Linux), use forward slashes; Node.js, which Tailwind uses, resolves these correctly on all platforms.

// tailwind.config.js located in /packages/app/
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // Current package
    '../sibling-package/src/**/*.{js,ts,jsx,tsx}', // Sibling package
  ],
  // ... rest of config
};

Dynamic Class Names and the Safelist

The JIT engine works by scanning source files for literal string matches. It does not execute your JavaScript code to determine what classes might be built.

• Dynamic Assembly: If you assemble classes using string interpolation (e.g., text-${color}), Tailwind will not find the literal text-red-500 or text-blue-500.
• The Safelist: If these classes are generated at runtime and do not exist as full strings in your source code, you must add them to the safelist option to ensure they are included in the final CSS.

module.exports = {
  content: ['./src/**/*.{js}'],
  safelist: [
    'text-(red|blue|green)-500', // Regex or string to match dynamic classes
  ]
};

Note: To avoid massive safelists, it is often better to use full class names in your logic (e.g., const colors = { red: 'text-red-500' }) so the JIT engine can find them naturally.