Tailwind CSS · Utilities reference · all subjects

build-process

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

How Tailwind detects utility classes in source files

Tailwind scans project source files as plain text without parsing the code. It looks for any tokens that match the character patterns expected in class names, then generates CSS only for tokens that map to known utility classes. Unknown tokens are discarded.

Dynamic class names cannot be detected

Tailwind cannot understand string concatenation or interpolation in source code because it scans files as plain text. Class names constructed dynamically, such as `text-{{ error ? 'red' : 'green' }}-600` or `bg-${color}-600`, will not be detected and CSS will not be generated for them.

Always use complete, static class names

To ensure Tailwind detects and generates CSS for all classes, always use complete class names that are statically detectable at build-time. Map props to predefined class name strings instead of constructing class names dynamically with template literals or string interpolation.

Files excluded from automatic scanning

Tailwind does not scan files in the following cases: files listed in `.gitignore`, files in the `node_modules` directory, binary files like images and videos, CSS files, and common package manager lock files.

@source directive to explicitly register source paths

Use the `@source` directive in CSS to explicitly register source paths relative to the stylesheet. Example: `@source "../node_modules/@acmecorp/ui-lib";`. This is useful for scanning external libraries built with Tailwind that would normally be ignored.

source() function to set base path for scanning

Use the `source()` function when importing Tailwind in CSS to set the base path for source detection. Example: `@import "tailwindcss" source("../src");`. This is useful for monorepos where build commands run from the root instead of the project root.

@source not directive to ignore specific paths

Use `@source not` to ignore specific paths relative to the stylesheet when scanning for class names. Example: `@source not "../src/components/legacy";`. This is useful for excluding large directories known not to use Tailwind classes.

source(none) to disable automatic detection

Use `source(none)` when importing Tailwind to completely disable automatic source detection. Example: `@import "tailwindcss" source(none);`. After this, use `@source` directives to explicitly register all sources. This is useful for projects with multiple Tailwind stylesheets.

@source inline() to safelist specific utilities

Use `@source inline()` to force Tailwind to generate specific class names that may not exist in content files. Example: `@source inline("underline");` generates the `.underline` class. This ensures certain utilities are always included in the generated CSS.

Safelisting variants with @source inline()

Add variant syntax to `@source inline()` to generate classes with specific variants. Example: `@source inline("{hover:,focus:,}underline");` generates `.underline`, `.hover\:underline:hover`, and `.focus\:underline:focus`. Multiple variants can be specified separated by commas.

Brace expansion in @source inline() for ranges

The `@source inline()` input supports brace expansion syntax. Example: `@source inline("{hover:,}bg-red-{50,{100..900..100},950}");` generates red background colors from 50 to 950 with hover variants. The syntax `{100..900..100}` creates a range from 100 to 900 in increments of 100.

@source not inline() to explicitly exclude classes

Use `@source not inline()` to prevent specific classes from being generated, even if they are detected in source files. Example: `@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");` excludes all red background utilities with hover and focus variants.

Give your agent this brain