Tailwind CSS Source Detection: What You Need to Know

Tailwind CSS scans your project files as plain text to find utility classes and generate only the CSS you use. Understanding this process helps you avoid common pitfalls and optimize your builds.

How Detection Works

Tailwind looks for tokens that could be class names and generates CSS for recognized utilities. It doesn't parse your code, so string interpolation won't work.

Critical Rule: Never Construct Classes Dynamically

❌ This won't work:

function Button({ color }) {
  return Click
}

✅ Do this instead:

function Button({ color }) {
  const colors = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }
  return Click
}

Advanced Configuration

Register External Sources

@import 'tailwindcss';
@source '../node_modules/@acmecorp/ui-lib';

Set Custom Base Path

@import 'tailwindcss' source('../src');

Ignore Specific Paths

@import 'tailwindcss';
@source not '../src/legacy';

Force Generate Classes

@source inline('underline');
@source inline('{hover:,focus:,}underline');
@source inline('{hover:,}bg-red-{50,{100..900..100},950}');

Best Practices

1. Always use complete class names
2. Map props to static classes
3. Register external component libraries
4. Use inline sources sparingly
5. Exclude large unused directories

Default Exclusions

Tailwind automatically ignores .gitignore files and node_modules. Register these explicitly if needed.

Learn More: Tailwind Docs