Lesson 15 +10 XP

Detecting Classes in Source Files

Tailwind finds the classes you use by scanning your source files. Knowing how this works prevents frustrating bugs.

How detection works

Tailwind treats all source files as plain text (no code parsing), extracts tokens that could be class names, then generates CSS for the ones that match known utilities.

Never build class names dynamically

Because scanning is textual, string interpolation does not work:

// ❌ Won't work - "text-red-600" never exists as a literal string
<div className={"text-" + color + "-600"}>

Instead, use full class names or maps:

const colorVariants = {
  blue: "bg-blue-600 hover:bg-blue-500",
  red: "bg-red-600 hover:bg-red-500"
};
<div className={colorVariants[color]}>

Which files are scanned?

By default these are not scanned: .gitignored files, node_modules, binary files (images/videos/zips), CSS files, and package-manager lock files.

@source directive

Explicitly register sources not auto-detected:

@source "../node_modules/@my-company/ui-lib";

Safelisting utilities

Force-generate classes that only appear dynamically:

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

TL;DR

Tailwind scans files as plain text for class-name tokens.
Don't construct class names dynamically - use full literals.
Use @source to add more files.
Use @source inline(...) to safelist utilities.

Detecting Classes in Source Files