🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 59 (from laksa133)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa059.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://tailwindcss.com/docs/detecting-classes-in-source-files\')), getAhrefsUnparsedNoserviceFromURL(\'https://tailwindcss.com/docs/detecting-classes-in-source-files\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files","crawl_time":1776100244,"first_indexed_time":1737629510,"http_code":200,"src_unparsed":"com,tailwindcss!\/docs\/detecting-classes-in-source-files s443","src_root_hash":"16242711095379765659","history_drop_reason":null,"meta_title":"Detecting classes in source files - Core concepts - Tailwind CSS","meta_descriptions":["Understanding and customizing how Tailwind scans your source files."],"attrs_boilerpipe_text":"Understanding and customizing how Tailwind scans your source files.\nOverview\nTailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.\nThis makes sure your CSS is as small as possible, and is also what makes features like\narbitrary values\npossible.\nHow classes are detected\nTailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way.\nInstead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names:\nJSX\nexport\nfunction\nButton\n({\ncolor\n,\nchildren\n})\n{\nconst\ncolor\ns\n=\n{\nblack\n:\n\"\nbg-\nblack\ntext-\nwhite\n\"\n,\nblue\n:\n\"\nbg-\nblue\n-500\ntext-\nwhite\n\"\n,\nwhite\n:\n\"\nbg-\nwhite\ntext-\nblack\n\"\n,\n};\nreturn\n(\n<\nbutton\nclassName\n={\n`\n${\ncolor\ns\n[\ncolor\n]\n}\nrounded-full\npx-2\npy-1.5\nfont-sans\ntext-sm\/6\nfont-medium\nshadow\n`\n}>\n{\nchildren\n}\n<\/\nbutton\n>\n)\n;\n}\nThen it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about.\nDynamic class names\nSince Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.\nDon't construct class names dynamically\nHTML\n<\ndiv\nclass\n=\n\"text-{{ error ? 'red' : 'green' }}-600\"\n><\/\ndiv\n>\nIn the example above, the strings\ntext-red-600\nand\ntext-green-600\ndo not exist, so Tailwind will not generate those classes.\nInstead, make sure any class names you’re using exist in full:\nAlways use complete class names\nHTML\n<\ndiv\nclass\n=\n\"{{ error ? '\ntext-red-600\n' : '\ntext-green-600\n' }}\"\n><\/\ndiv\n>\nIf you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:\nDon't use props to build class names dynamically\nJSX\nfunction\nButton\n({\ncolor\n,\nchildren\n})\n{\nreturn\n<\nbutton\nclassName\n={\n`bg-\n${\ncolor\n}\n-600 hover:bg-\n${\ncolor\n}\n-500 ...`\n}>{\nchildren\n}<\/\nbutton\n>;\n}\nInstead, map props to complete class names that are statically detectable at build-time:\nAlways map props to static class names\nJSX\nfunction\nButton\n({\ncolor\n,\nchildren\n})\n{\nconst\ncolorVariants\n=\n{\nblue\n:\n\"bg-blue-600 hover:bg-blue-500\"\n,\nred\n:\n\"bg-red-600 hover:bg-red-500\"\n,\n};\nreturn\n<\nbutton\nclassName\n={\n`\n${\ncolorVariants\n[\ncolor\n]\n}\n...`\n}>{\nchildren\n}<\/\nbutton\n>;\n}\nThis has the added benefit of letting you map different prop values to different color shades for example:\nJSX\nfunction\nButton\n({\ncolor\n,\nchildren\n})\n{\nconst\ncolorVariants\n=\n{\nblue\n:\n\"bg-blue-600 hover:bg-blue-500 text-white\"\n,\nred\n:\n\"bg-red-500 hover:bg-red-400 text-white\"\n,\nyellow\n:\n\"bg-yellow-300 hover:bg-yellow-400 text-black\"\n,\n};\nreturn\n<\nbutton\nclassName\n={\n`\n${\ncolorVariants\n[\ncolor\n]\n}\n...`\n}>{\nchildren\n}<\/\nbutton\n>;\n}\nAs long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.\nWhich files are scanned\nTailwind will scan every file in your project for class names, except in the following cases:\nFiles that are in your\n.gitignore\nfile\nFiles in the\nnode_modules\ndirectory\nBinary files like images, videos, or zip files\nCSS files\nCommon package manager lock files\nIf you need to scan any files that Tailwind is ignoring by default, you can\nexplicitly register\nthose sources.\nExplicitly registering sources\nUse\n@source\nto explicitly register source paths relative to the stylesheet:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\n\"..\/node_modules\/@acmecorp\/ui-lib\"\n;\nThis is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your\n.gitignore\nfile and ignored by Tailwind by default.\nSetting your base path\nTailwind uses the current working directory as its starting point when scanning for class names by default.\nTo set the base path for source detection explicitly, use the\nsource()\nfunction when importing Tailwind in your CSS:\nCSS\n@import\n\"tailwindcss\"\nsource\n(\n\"..\/src\"\n)\n;\nThis can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project.\nIgnoring specific paths\nUse\n@source not\nto ignore specific paths, relative to the stylesheet, when scanning for class names:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\nnot\n\"..\/src\/components\/legacy\"\n;\nThis is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries.\nDisabling automatic detection\nUse\nsource(none)\nto completely disable automatic source detection if you want to register all of your sources explicitly:\nCSS\n@import\n\"tailwindcss\"\nsource\n(\nnone\n);\n@source\n\"..\/admin\"\n;\n@source\n\"..\/shared\"\n;\nThis can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs.\nSafelisting specific utilities\nIf you need to make sure Tailwind generates certain class names that don’t exist in your content files, use\n@source inline()\nto force them to be generated:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\ninline(\n\"underline\"\n)\n;\nGenerated CSS\n.underline\n{\ntext-decoration-line\n:\nunderline\n;\n}\nSafelisting variants\nYou can also use\n@source inline()\nto generate classes with variants. For example, to generate the\nunderline\nclass with hover and focus variants, add\n{hover:,focus:,}\nto the source input:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\ninline(\n\"{hover:,focus:,}underline\"\n)\n;\nGenerated CSS\n.underline\n{\ntext-decoration-line\n:\nunderline\n;\n}\n@media\n(\nhover\n:\nhover\n)\n{\n.hover\n\\:\nunderline:hover\n{\ntext-decoration-line\n:\nunderline\n;\n}\n}\n@media\n(\nfocus\n:\nfocus\n)\n{\n.focus\n\\:\nunderline:focus\n{\ntext-decoration-line\n:\nunderline\n;\n}\n}\nSafelisting with ranges\nThe source input is\nbrace expanded\n, so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\ninline(\n\"{hover:,}bg-red-{50,{100..900..100},950}\"\n)\n;\nGenerated CSS\n.bg-red-50\n{\nbackground-color\n:\nvar\n(\n--color-red-50\n);\n}\n.bg-red-100\n{\nbackground-color\n:\nvar\n(\n--color-red-100\n);\n}\n.bg-red-200\n{\nbackground-color\n:\nvar\n(\n--color-red-200\n);\n}\n\/* ... *\/\n.bg-red-800\n{\nbackground-color\n:\nvar\n(\n--color-red-800\n);\n}\n.bg-red-900\n{\nbackground-color\n:\nvar\n(\n--color-red-900\n);\n}\n.bg-red-950\n{\nbackground-color\n:\nvar\n(\n--color-red-950\n);\n}\n@media\n(\nhover\n:\nhover\n)\n{\n.hover\n\\:\nbg-red-50:hover\n{\nbackground-color\n:\nvar\n(\n--color-red-50\n);\n}\n\/* ... *\/\n.hover\n\\:\nbg-red-950:hover\n{\nbackground-color\n:\nvar\n(\n--color-red-950\n);\n}\n}\nThis generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the\nhover:\nvariant for each of those classes.\nExplicitly excluding classes\nUse\n@source not inline()\nto prevent specific classes from being generated, even if they are detected in your source files:\nCSS\n@import\n\"tailwindcss\"\n;\n@source\nnot inline(\n\"{hover:,focus:,}bg-red-{50,{100..900..100},950}\"\n)\n;\nThis will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.","attrs_markdown":"v4.2\n\n`⌘K``Ctrl K`\n\n[Docs](https:\/\/tailwindcss.com\/docs)[Blog](https:\/\/tailwindcss.com\/blog)[Showcase](https:\/\/tailwindcss.com\/showcase)[Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n[Plus](https:\/\/tailwindcss.com\/plus?ref=top)\n\n1. Core concepts\n2. Detecting classes in source files\n\n- [Documentation](https:\/\/tailwindcss.com\/docs\/installation)\n- [Components](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=sidebar)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=sidebar)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=sidebar)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [CourseNew](https:\/\/tailwindcss.com\/build-uis-that-dont-suck)\n- [Community](https:\/\/tailwindcss.com\/insiders)\n\n### Getting started\n- [Installation](https:\/\/tailwindcss.com\/docs\/installation)\n- [Editor setup](https:\/\/tailwindcss.com\/docs\/editor-setup)\n- [Compatibility](https:\/\/tailwindcss.com\/docs\/compatibility)\n- [Upgrade guide](https:\/\/tailwindcss.com\/docs\/upgrade-guide)\n\n### Core concepts\n- [Styling with utility classes](https:\/\/tailwindcss.com\/docs\/styling-with-utility-classes)\n- [Hover, focus, and other states](https:\/\/tailwindcss.com\/docs\/hover-focus-and-other-states)\n- [Responsive design](https:\/\/tailwindcss.com\/docs\/responsive-design)\n- [Dark mode](https:\/\/tailwindcss.com\/docs\/dark-mode)\n- [Theme variables](https:\/\/tailwindcss.com\/docs\/theme)\n- [Colors](https:\/\/tailwindcss.com\/docs\/colors)\n- [Adding custom styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles)\n- [Detecting classes in source files](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files)\n- [Functions and directives](https:\/\/tailwindcss.com\/docs\/functions-and-directives)\n\n### Base styles\n- [Preflight](https:\/\/tailwindcss.com\/docs\/preflight)\n\n### Layout\n- [aspect-ratio](https:\/\/tailwindcss.com\/docs\/aspect-ratio)\n- [columns](https:\/\/tailwindcss.com\/docs\/columns)\n- [break-after](https:\/\/tailwindcss.com\/docs\/break-after)\n- [break-before](https:\/\/tailwindcss.com\/docs\/break-before)\n- [break-inside](https:\/\/tailwindcss.com\/docs\/break-inside)\n- [box-decoration-break](https:\/\/tailwindcss.com\/docs\/box-decoration-break)\n- [box-sizing](https:\/\/tailwindcss.com\/docs\/box-sizing)\n- [display](https:\/\/tailwindcss.com\/docs\/display)\n- [float](https:\/\/tailwindcss.com\/docs\/float)\n- [clear](https:\/\/tailwindcss.com\/docs\/clear)\n- [isolation](https:\/\/tailwindcss.com\/docs\/isolation)\n- [object-fit](https:\/\/tailwindcss.com\/docs\/object-fit)\n- [object-position](https:\/\/tailwindcss.com\/docs\/object-position)\n- [overflow](https:\/\/tailwindcss.com\/docs\/overflow)\n- [overscroll-behavior](https:\/\/tailwindcss.com\/docs\/overscroll-behavior)\n- [position](https:\/\/tailwindcss.com\/docs\/position)\n- [top \/ right \/ bottom \/ left](https:\/\/tailwindcss.com\/docs\/top-right-bottom-left)\n- [visibility](https:\/\/tailwindcss.com\/docs\/visibility)\n- [z-index](https:\/\/tailwindcss.com\/docs\/z-index)\n\n### Flexbox & Grid\n- [flex-basis](https:\/\/tailwindcss.com\/docs\/flex-basis)\n- [flex-direction](https:\/\/tailwindcss.com\/docs\/flex-direction)\n- [flex-wrap](https:\/\/tailwindcss.com\/docs\/flex-wrap)\n- [flex](https:\/\/tailwindcss.com\/docs\/flex)\n- [flex-grow](https:\/\/tailwindcss.com\/docs\/flex-grow)\n- [flex-shrink](https:\/\/tailwindcss.com\/docs\/flex-shrink)\n- [order](https:\/\/tailwindcss.com\/docs\/order)\n- [grid-template-columns](https:\/\/tailwindcss.com\/docs\/grid-template-columns)\n- [grid-column](https:\/\/tailwindcss.com\/docs\/grid-column)\n- [grid-template-rows](https:\/\/tailwindcss.com\/docs\/grid-template-rows)\n- [grid-row](https:\/\/tailwindcss.com\/docs\/grid-row)\n- [grid-auto-flow](https:\/\/tailwindcss.com\/docs\/grid-auto-flow)\n- [grid-auto-columns](https:\/\/tailwindcss.com\/docs\/grid-auto-columns)\n- [grid-auto-rows](https:\/\/tailwindcss.com\/docs\/grid-auto-rows)\n- [gap](https:\/\/tailwindcss.com\/docs\/gap)\n- [justify-content](https:\/\/tailwindcss.com\/docs\/justify-content)\n- [justify-items](https:\/\/tailwindcss.com\/docs\/justify-items)\n- [justify-self](https:\/\/tailwindcss.com\/docs\/justify-self)\n- [align-content](https:\/\/tailwindcss.com\/docs\/align-content)\n- [align-items](https:\/\/tailwindcss.com\/docs\/align-items)\n- [align-self](https:\/\/tailwindcss.com\/docs\/align-self)\n- [place-content](https:\/\/tailwindcss.com\/docs\/place-content)\n- [place-items](https:\/\/tailwindcss.com\/docs\/place-items)\n- [place-self](https:\/\/tailwindcss.com\/docs\/place-self)\n\n### Spacing\n- [padding](https:\/\/tailwindcss.com\/docs\/padding)\n- [margin](https:\/\/tailwindcss.com\/docs\/margin)\n\n### Sizing\n- [width](https:\/\/tailwindcss.com\/docs\/width)\n- [min-width](https:\/\/tailwindcss.com\/docs\/min-width)\n- [max-width](https:\/\/tailwindcss.com\/docs\/max-width)\n- [height](https:\/\/tailwindcss.com\/docs\/height)\n- [min-height](https:\/\/tailwindcss.com\/docs\/min-height)\n- [max-height](https:\/\/tailwindcss.com\/docs\/max-height)\n- [inline-size](https:\/\/tailwindcss.com\/docs\/inline-size)\n- [min-inline-size](https:\/\/tailwindcss.com\/docs\/min-inline-size)\n- [max-inline-size](https:\/\/tailwindcss.com\/docs\/max-inline-size)\n- [block-size](https:\/\/tailwindcss.com\/docs\/block-size)\n- [min-block-size](https:\/\/tailwindcss.com\/docs\/min-block-size)\n- [max-block-size](https:\/\/tailwindcss.com\/docs\/max-block-size)\n\n### Typography\n- [font-family](https:\/\/tailwindcss.com\/docs\/font-family)\n- [font-size](https:\/\/tailwindcss.com\/docs\/font-size)\n- [font-smoothing](https:\/\/tailwindcss.com\/docs\/font-smoothing)\n- [font-style](https:\/\/tailwindcss.com\/docs\/font-style)\n- [font-weight](https:\/\/tailwindcss.com\/docs\/font-weight)\n- [font-stretch](https:\/\/tailwindcss.com\/docs\/font-stretch)\n- [font-variant-numeric](https:\/\/tailwindcss.com\/docs\/font-variant-numeric)\n- [font-feature-settings](https:\/\/tailwindcss.com\/docs\/font-feature-settings)\n- [letter-spacing](https:\/\/tailwindcss.com\/docs\/letter-spacing)\n- [line-clamp](https:\/\/tailwindcss.com\/docs\/line-clamp)\n- [line-height](https:\/\/tailwindcss.com\/docs\/line-height)\n- [list-style-image](https:\/\/tailwindcss.com\/docs\/list-style-image)\n- [list-style-position](https:\/\/tailwindcss.com\/docs\/list-style-position)\n- [list-style-type](https:\/\/tailwindcss.com\/docs\/list-style-type)\n- [text-align](https:\/\/tailwindcss.com\/docs\/text-align)\n- [color](https:\/\/tailwindcss.com\/docs\/color)\n- [text-decoration-line](https:\/\/tailwindcss.com\/docs\/text-decoration-line)\n- [text-decoration-color](https:\/\/tailwindcss.com\/docs\/text-decoration-color)\n- [text-decoration-style](https:\/\/tailwindcss.com\/docs\/text-decoration-style)\n- [text-decoration-thickness](https:\/\/tailwindcss.com\/docs\/text-decoration-thickness)\n- [text-underline-offset](https:\/\/tailwindcss.com\/docs\/text-underline-offset)\n- [text-transform](https:\/\/tailwindcss.com\/docs\/text-transform)\n- [text-overflow](https:\/\/tailwindcss.com\/docs\/text-overflow)\n- [text-wrap](https:\/\/tailwindcss.com\/docs\/text-wrap)\n- [text-indent](https:\/\/tailwindcss.com\/docs\/text-indent)\n- [vertical-align](https:\/\/tailwindcss.com\/docs\/vertical-align)\n- [white-space](https:\/\/tailwindcss.com\/docs\/white-space)\n- [word-break](https:\/\/tailwindcss.com\/docs\/word-break)\n- [overflow-wrap](https:\/\/tailwindcss.com\/docs\/overflow-wrap)\n- [hyphens](https:\/\/tailwindcss.com\/docs\/hyphens)\n- [content](https:\/\/tailwindcss.com\/docs\/content)\n\n### Backgrounds\n- [background-attachment](https:\/\/tailwindcss.com\/docs\/background-attachment)\n- [background-clip](https:\/\/tailwindcss.com\/docs\/background-clip)\n- [background-color](https:\/\/tailwindcss.com\/docs\/background-color)\n- [background-image](https:\/\/tailwindcss.com\/docs\/background-image)\n- [background-origin](https:\/\/tailwindcss.com\/docs\/background-origin)\n- [background-position](https:\/\/tailwindcss.com\/docs\/background-position)\n- [background-repeat](https:\/\/tailwindcss.com\/docs\/background-repeat)\n- [background-size](https:\/\/tailwindcss.com\/docs\/background-size)\n\n### Borders\n- [border-radius](https:\/\/tailwindcss.com\/docs\/border-radius)\n- [border-width](https:\/\/tailwindcss.com\/docs\/border-width)\n- [border-color](https:\/\/tailwindcss.com\/docs\/border-color)\n- [border-style](https:\/\/tailwindcss.com\/docs\/border-style)\n- [outline-width](https:\/\/tailwindcss.com\/docs\/outline-width)\n- [outline-color](https:\/\/tailwindcss.com\/docs\/outline-color)\n- [outline-style](https:\/\/tailwindcss.com\/docs\/outline-style)\n- [outline-offset](https:\/\/tailwindcss.com\/docs\/outline-offset)\n\n### Effects\n- [box-shadow](https:\/\/tailwindcss.com\/docs\/box-shadow)\n- [text-shadow](https:\/\/tailwindcss.com\/docs\/text-shadow)\n- [opacity](https:\/\/tailwindcss.com\/docs\/opacity)\n- [mix-blend-mode](https:\/\/tailwindcss.com\/docs\/mix-blend-mode)\n- [background-blend-mode](https:\/\/tailwindcss.com\/docs\/background-blend-mode)\n- [mask-clip](https:\/\/tailwindcss.com\/docs\/mask-clip)\n- [mask-composite](https:\/\/tailwindcss.com\/docs\/mask-composite)\n- [mask-image](https:\/\/tailwindcss.com\/docs\/mask-image)\n- [mask-mode](https:\/\/tailwindcss.com\/docs\/mask-mode)\n- [mask-origin](https:\/\/tailwindcss.com\/docs\/mask-origin)\n- [mask-position](https:\/\/tailwindcss.com\/docs\/mask-position)\n- [mask-repeat](https:\/\/tailwindcss.com\/docs\/mask-repeat)\n- [mask-size](https:\/\/tailwindcss.com\/docs\/mask-size)\n- [mask-type](https:\/\/tailwindcss.com\/docs\/mask-type)\n\n### Filters\n- [filter](https:\/\/tailwindcss.com\/docs\/filter)\n  - [blur](https:\/\/tailwindcss.com\/docs\/filter-blur)\n  - [brightness](https:\/\/tailwindcss.com\/docs\/filter-brightness)\n  - [contrast](https:\/\/tailwindcss.com\/docs\/filter-contrast)\n  - [drop-shadow](https:\/\/tailwindcss.com\/docs\/filter-drop-shadow)\n  - [grayscale](https:\/\/tailwindcss.com\/docs\/filter-grayscale)\n  - [hue-rotate](https:\/\/tailwindcss.com\/docs\/filter-hue-rotate)\n  - [invert](https:\/\/tailwindcss.com\/docs\/filter-invert)\n  - [saturate](https:\/\/tailwindcss.com\/docs\/filter-saturate)\n  - [sepia](https:\/\/tailwindcss.com\/docs\/filter-sepia)\n- [backdrop-filter](https:\/\/tailwindcss.com\/docs\/backdrop-filter)\n  - [blur](https:\/\/tailwindcss.com\/docs\/backdrop-filter-blur)\n  - [brightness](https:\/\/tailwindcss.com\/docs\/backdrop-filter-brightness)\n  - [contrast](https:\/\/tailwindcss.com\/docs\/backdrop-filter-contrast)\n  - [grayscale](https:\/\/tailwindcss.com\/docs\/backdrop-filter-grayscale)\n  - [hue-rotate](https:\/\/tailwindcss.com\/docs\/backdrop-filter-hue-rotate)\n  - [invert](https:\/\/tailwindcss.com\/docs\/backdrop-filter-invert)\n  - [opacity](https:\/\/tailwindcss.com\/docs\/backdrop-filter-opacity)\n  - [saturate](https:\/\/tailwindcss.com\/docs\/backdrop-filter-saturate)\n  - [sepia](https:\/\/tailwindcss.com\/docs\/backdrop-filter-sepia)\n\n### Tables\n- [border-collapse](https:\/\/tailwindcss.com\/docs\/border-collapse)\n- [border-spacing](https:\/\/tailwindcss.com\/docs\/border-spacing)\n- [table-layout](https:\/\/tailwindcss.com\/docs\/table-layout)\n- [caption-side](https:\/\/tailwindcss.com\/docs\/caption-side)\n\n### Transitions & Animation\n- [transition-property](https:\/\/tailwindcss.com\/docs\/transition-property)\n- [transition-behavior](https:\/\/tailwindcss.com\/docs\/transition-behavior)\n- [transition-duration](https:\/\/tailwindcss.com\/docs\/transition-duration)\n- [transition-timing-function](https:\/\/tailwindcss.com\/docs\/transition-timing-function)\n- [transition-delay](https:\/\/tailwindcss.com\/docs\/transition-delay)\n- [animation](https:\/\/tailwindcss.com\/docs\/animation)\n\n### Transforms\n- [backface-visibility](https:\/\/tailwindcss.com\/docs\/backface-visibility)\n- [perspective](https:\/\/tailwindcss.com\/docs\/perspective)\n- [perspective-origin](https:\/\/tailwindcss.com\/docs\/perspective-origin)\n- [rotate](https:\/\/tailwindcss.com\/docs\/rotate)\n- [scale](https:\/\/tailwindcss.com\/docs\/scale)\n- [skew](https:\/\/tailwindcss.com\/docs\/skew)\n- [transform](https:\/\/tailwindcss.com\/docs\/transform)\n- [transform-origin](https:\/\/tailwindcss.com\/docs\/transform-origin)\n- [transform-style](https:\/\/tailwindcss.com\/docs\/transform-style)\n- [translate](https:\/\/tailwindcss.com\/docs\/translate)\n\n### Interactivity\n- [accent-color](https:\/\/tailwindcss.com\/docs\/accent-color)\n- [appearance](https:\/\/tailwindcss.com\/docs\/appearance)\n- [caret-color](https:\/\/tailwindcss.com\/docs\/caret-color)\n- [color-scheme](https:\/\/tailwindcss.com\/docs\/color-scheme)\n- [cursor](https:\/\/tailwindcss.com\/docs\/cursor)\n- [field-sizing](https:\/\/tailwindcss.com\/docs\/field-sizing)\n- [pointer-events](https:\/\/tailwindcss.com\/docs\/pointer-events)\n- [resize](https:\/\/tailwindcss.com\/docs\/resize)\n- [scroll-behavior](https:\/\/tailwindcss.com\/docs\/scroll-behavior)\n- [scroll-margin](https:\/\/tailwindcss.com\/docs\/scroll-margin)\n- [scroll-padding](https:\/\/tailwindcss.com\/docs\/scroll-padding)\n- [scroll-snap-align](https:\/\/tailwindcss.com\/docs\/scroll-snap-align)\n- [scroll-snap-stop](https:\/\/tailwindcss.com\/docs\/scroll-snap-stop)\n- [scroll-snap-type](https:\/\/tailwindcss.com\/docs\/scroll-snap-type)\n- [touch-action](https:\/\/tailwindcss.com\/docs\/touch-action)\n- [user-select](https:\/\/tailwindcss.com\/docs\/user-select)\n- [will-change](https:\/\/tailwindcss.com\/docs\/will-change)\n\n### SVG\n- [fill](https:\/\/tailwindcss.com\/docs\/fill)\n- [stroke](https:\/\/tailwindcss.com\/docs\/stroke)\n- [stroke-width](https:\/\/tailwindcss.com\/docs\/stroke-width)\n\n### Accessibility\n- [forced-color-adjust](https:\/\/tailwindcss.com\/docs\/forced-color-adjust)\n\nCore concepts\n\n# Detecting classes in source files\nUnderstanding and customizing how Tailwind scans your source files.\n\n## [Overview](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#overview)\nTailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.\n\nThis makes sure your CSS is as small as possible, and is also what makes features like [arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-arbitrary-values) possible.\n\n### [How classes are detected](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#how-classes-are-detected)\nTailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way.\n\nInstead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names:\n\nJSX\n```\nexport function Button({ color, children }) {  const colors = {    black: \"bg-black text-white\",    blue: \"bg-blue-500 text-white\",    white: \"bg-white text-black\",  };  return (    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm\/6 font-medium shadow`}>      {children}    <\/button>  );}\n```\n\nThen it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about.\n\n### [Dynamic class names](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#dynamic-class-names)\nSince Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.\n\nDon't construct class names dynamically\n\nHTML\n```\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"><\/div>\n```\n\nIn the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes.\n\nInstead, make sure any class names you’re using exist in full:\n\nAlways use complete class names\n\nHTML\n```\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"><\/div>\n```\n\nIf you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:\n\nDon't use props to build class names dynamically\n\nJSX\n```\nfunction Button({ color, children }) {  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}<\/button>;}\n```\n\nInstead, map props to complete class names that are statically detectable at build-time:\n\nAlways map props to static class names\n\nJSX\n```\nfunction Button({ color, children }) {  const colorVariants = {    blue: \"bg-blue-600 hover:bg-blue-500\",    red: \"bg-red-600 hover:bg-red-500\",  };  return <button className={`${colorVariants[color]} ...`}>{children}<\/button>;}\n```\n\nThis has the added benefit of letting you map different prop values to different color shades for example:\n\nJSX\n```\nfunction Button({ color, children }) {  const colorVariants = {    blue: \"bg-blue-600 hover:bg-blue-500 text-white\",    red: \"bg-red-500 hover:bg-red-400 text-white\",    yellow: \"bg-yellow-300 hover:bg-yellow-400 text-black\",  };  return <button className={`${colorVariants[color]} ...`}>{children}<\/button>;}\n```\n\nAs long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.\n\n### [Which files are scanned](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#which-files-are-scanned)\nTailwind will scan every file in your project for class names, except in the following cases:\n\n- Files that are in your `.gitignore` file\n- Files in the `node_modules` directory\n- Binary files like images, videos, or zip files\n- CSS files\n- Common package manager lock files\n\nIf you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-registering-sources) those sources.\n\n## [Explicitly registering sources](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-registering-sources)\nUse `@source` to explicitly register source paths relative to the stylesheet:\n\nCSS\n```\n@import \"tailwindcss\";@source \"..\/node_modules\/@acmecorp\/ui-lib\";\n```\n\nThis is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default.\n\n### [Setting your base path](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#setting-your-base-path)\nTailwind uses the current working directory as its starting point when scanning for class names by default.\n\nTo set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS:\n\nCSS\n```\n@import \"tailwindcss\" source(\"..\/src\");\n```\n\nThis can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project.\n\n### [Ignoring specific paths](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#ignoring-specific-paths)\nUse `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names:\n\nCSS\n```\n@import \"tailwindcss\";@source not \"..\/src\/components\/legacy\";\n```\n\nThis is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries.\n\n### [Disabling automatic detection](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#disabling-automatic-detection)\nUse `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly:\n\nCSS\n```\n@import \"tailwindcss\" source(none);@source \"..\/admin\";@source \"..\/shared\";\n```\n\nThis can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs.\n\n## [Safelisting specific utilities](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-specific-utilities)\nIf you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"underline\");\n```\n\nGenerated CSS\n```\n.underline {  text-decoration-line: underline;}\n```\n### [Safelisting variants](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-variants)\nYou can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"{hover:,focus:,}underline\");\n```\n\nGenerated CSS\n```\n.underline {  text-decoration-line: underline;}@media (hover: hover) {  .hover\\:underline:hover {    text-decoration-line: underline;  }}@media (focus: focus) {  .focus\\:underline:focus {    text-decoration-line: underline;  }}\n```\n### [Safelisting with ranges](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-with-ranges)\nThe source input is [brace expanded](https:\/\/www.gnu.org\/software\/bash\/manual\/html_node\/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"{hover:,}bg-red-{50,{100..900..100},950}\");\n```\n\nGenerated CSS\n```\n.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}\/* ... *\/.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\\:bg-red-50:hover {    background-color: var(--color-red-50);  }  \/* ... *\/  .hover\\:bg-red-950:hover {    background-color: var(--color-red-950);  }}\n```\n\nThis generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes.\n\n### [Explicitly excluding classes](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-excluding-classes)\nUse `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files:\n\nCSS\n```\n@import \"tailwindcss\";@source not inline(\"{hover:,focus:,}bg-red-{50,{100..900..100},950}\");\n```\n\nThis will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.\n\n[Adding custom styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles)\n\n[Functions and directives](https:\/\/tailwindcss.com\/docs\/functions-and-directives)\n\n### On this page\n- [Overview](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#overview)\n  - [How classes are detected](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#how-classes-are-detected)\n  - [Dynamic class names](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#dynamic-class-names)\n  - [Which files are scanned](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#which-files-are-scanned)\n- [Explicitly registering sources](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-registering-sources)\n  - [Setting your base path](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#setting-your-base-path)\n  - [Ignoring specific paths](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#ignoring-specific-paths)\n  - [Disabling automatic detection](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#disabling-automatic-detection)\n- [Safelisting specific utilities](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-specific-utilities)\n  - [Safelisting variants](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-variants)\n  - [Safelisting with ranges](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-with-ranges)\n  - [Explicitly excluding classes](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-excluding-classes)\n\n[![Refactoring UI](https:\/\/tailwindcss.com\/_next\/image?url=%2F_next%2Fstatic%2Fmedia%2Fbook-promo.3012c0f6.png&w=256&q=75)From the creators of Tailwind CSSMake your ideas look awesome, without relying on a designer.“This is the survival kit I wish I had when I started building apps.” Derrick Reimer, SavvyCal](https:\/\/www.refactoringui.com\/?ref=sidebar)\n\n### Tailwind CSS\n- [Documentation](https:\/\/tailwindcss.com\/docs)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [Blog](https:\/\/tailwindcss.com\/blog)\n- [Showcase](https:\/\/tailwindcss.com\/showcase)\n- [Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n### Resources\n- [Refactoring UI](https:\/\/www.refactoringui.com\/)\n- [Headless UI](https:\/\/headlessui.com\/)\n- [Heroicons](https:\/\/heroicons.com\/)\n- [Hero Patterns](https:\/\/heropatterns.com\/)\n\n### [Tailwind Plus](https:\/\/tailwindcss.com\/plus?ref=footer)\n- [UI Blocks](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=footer)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=footer)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=footer)\n\n### Community\n- [GitHub](https:\/\/github.com\/tailwindlabs\/tailwindcss)\n- [Discord](https:\/\/tailwindcss.com\/sponsor#insiders)\n- [X](https:\/\/x.com\/tailwindcss)\n\n### Tailwind CSS\n- [Documentation](https:\/\/tailwindcss.com\/docs)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [Blog](https:\/\/tailwindcss.com\/blog)\n- [Showcase](https:\/\/tailwindcss.com\/showcase)\n- [Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n### [Tailwind Plus](https:\/\/tailwindcss.com\/plus?ref=footer)\n- [UI Blocks](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=footer)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=footer)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=footer)\n\n### Resources\n- [Refactoring UI](https:\/\/www.refactoringui.com\/)\n- [Headless UI](https:\/\/headlessui.com\/)\n- [Heroicons](https:\/\/heroicons.com\/)\n- [Hero Patterns](https:\/\/heropatterns.com\/)\n\n### Community\n- [GitHub](https:\/\/github.com\/tailwindlabs\/tailwindcss)\n- [Discord](https:\/\/tailwindcss.com\/sponsor#insiders)\n- [X](https:\/\/x.com\/tailwindcss)\n\nCopyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https:\/\/tailwindcss.com\/brand)","attrs_readable_markdown":"Understanding and customizing how Tailwind scans your source files.\n\n## [Overview](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#overview)\nTailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.\n\nThis makes sure your CSS is as small as possible, and is also what makes features like [arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-arbitrary-values) possible.\n\n### [How classes are detected](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#how-classes-are-detected)\nTailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way.\n\nInstead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names:\n\nJSX\n```\nexport function Button({ color, children }) {  const colors = {    black: \"bg-black text-white\",    blue: \"bg-blue-500 text-white\",    white: \"bg-white text-black\",  };  return (    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm\/6 font-medium shadow`}>      {children}    <\/button>  );}\n```\n\nThen it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about.\n\n### [Dynamic class names](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#dynamic-class-names)\nSince Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.\n\nDon't construct class names dynamically\n\nHTML\n```\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"><\/div>\n```\n\nIn the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes.\n\nInstead, make sure any class names you’re using exist in full:\n\nAlways use complete class names\n\nHTML\n```\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"><\/div>\n```\n\nIf you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:\n\nDon't use props to build class names dynamically\n\nJSX\n```\nfunction Button({ color, children }) {  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}<\/button>;}\n```\n\nInstead, map props to complete class names that are statically detectable at build-time:\n\nAlways map props to static class names\n\nJSX\n```\nfunction Button({ color, children }) {  const colorVariants = {    blue: \"bg-blue-600 hover:bg-blue-500\",    red: \"bg-red-600 hover:bg-red-500\",  };  return <button className={`${colorVariants[color]} ...`}>{children}<\/button>;}\n```\n\nThis has the added benefit of letting you map different prop values to different color shades for example:\n\nJSX\n```\nfunction Button({ color, children }) {  const colorVariants = {    blue: \"bg-blue-600 hover:bg-blue-500 text-white\",    red: \"bg-red-500 hover:bg-red-400 text-white\",    yellow: \"bg-yellow-300 hover:bg-yellow-400 text-black\",  };  return <button className={`${colorVariants[color]} ...`}>{children}<\/button>;}\n```\n\nAs long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.\n\n### [Which files are scanned](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#which-files-are-scanned)\nTailwind will scan every file in your project for class names, except in the following cases:\n\n- Files that are in your `.gitignore` file\n- Files in the `node_modules` directory\n- Binary files like images, videos, or zip files\n- CSS files\n- Common package manager lock files\n\nIf you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-registering-sources) those sources.\n\n## [Explicitly registering sources](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-registering-sources)\nUse `@source` to explicitly register source paths relative to the stylesheet:\n\nCSS\n```\n@import \"tailwindcss\";@source \"..\/node_modules\/@acmecorp\/ui-lib\";\n```\n\nThis is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default.\n\n### [Setting your base path](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#setting-your-base-path)\nTailwind uses the current working directory as its starting point when scanning for class names by default.\n\nTo set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS:\n\nCSS\n```\n@import \"tailwindcss\" source(\"..\/src\");\n```\n\nThis can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project.\n\n### [Ignoring specific paths](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#ignoring-specific-paths)\nUse `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names:\n\nCSS\n```\n@import \"tailwindcss\";@source not \"..\/src\/components\/legacy\";\n```\n\nThis is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries.\n\n### [Disabling automatic detection](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#disabling-automatic-detection)\nUse `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly:\n\nCSS\n```\n@import \"tailwindcss\" source(none);@source \"..\/admin\";@source \"..\/shared\";\n```\n\nThis can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs.\n\n## [Safelisting specific utilities](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-specific-utilities)\nIf you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"underline\");\n```\n\nGenerated CSS\n```\n.underline {  text-decoration-line: underline;}\n```\n### [Safelisting variants](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-variants)\nYou can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"{hover:,focus:,}underline\");\n```\n\nGenerated CSS\n```\n.underline {  text-decoration-line: underline;}@media (hover: hover) {  .hover\\:underline:hover {    text-decoration-line: underline;  }}@media (focus: focus) {  .focus\\:underline:focus {    text-decoration-line: underline;  }}\n```\n### [Safelisting with ranges](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#safelisting-with-ranges)\nThe source input is [brace expanded](https:\/\/www.gnu.org\/software\/bash\/manual\/html_node\/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range:\n\nCSS\n```\n@import \"tailwindcss\";@source inline(\"{hover:,}bg-red-{50,{100..900..100},950}\");\n```\n\nGenerated CSS\n```\n.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}\/* ... *\/.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\\:bg-red-50:hover {    background-color: var(--color-red-50);  }  \/* ... *\/  .hover\\:bg-red-950:hover {    background-color: var(--color-red-950);  }}\n```\n\nThis generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes.\n\n### [Explicitly excluding classes](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files#explicitly-excluding-classes)\nUse `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files:\n\nCSS\n```\n@import \"tailwindcss\";@source not inline(\"{hover:,focus:,}bg-red-{50,{100..900..100},950}\");\n```\n\nThis will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

1 hour ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://tailwindcss.com/docs/detecting-classes-in-source-files
Last Crawled	2026-04-13 17:10:44 (1 hour ago)
First Indexed	2025-01-23 10:51:50 (1 year ago)
HTTP Status Code	200
Meta Title	Detecting classes in source files - Core concepts - Tailwind CSS
Meta Description	Understanding and customizing how Tailwind scans your source files.
Meta Canonical	null
Boilerpipe Text	Understanding and customizing how Tailwind scans your source files. Overview Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used. This makes sure your CSS is as small as possible, and is also what makes features like arbitrary values possible. How classes are detected Tailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way. Instead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names: JSX export function Button ({ color , children }) { const color s = { black : " bg- black text- white " , blue : " bg- blue -500 text- white " , white : " bg- white text- black " , }; return ( < button className ={ ` ${ color s [ color ] } rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow ` }> { children } </ button > ) ; } Then it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about. Dynamic class names Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using. Don't construct class names dynamically HTML < div class = "text-{{ error ? 'red' : 'green' }}-600" ></ div > In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full: Always use complete class names HTML < div class = "{{ error ? ' text-red-600 ' : ' text-green-600 ' }}" ></ div > If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes: Don't use props to build class names dynamically JSX function Button ({ color , children }) { return < button className ={ `bg- ${ color } -600 hover:bg- ${ color } -500 ...` }>{ children }</ button >; } Instead, map props to complete class names that are statically detectable at build-time: Always map props to static class names JSX function Button ({ color , children }) { const colorVariants = { blue : "bg-blue-600 hover:bg-blue-500" , red : "bg-red-600 hover:bg-red-500" , }; return < button className ={ ` ${ colorVariants [ color ] } ...` }>{ children }</ button >; } This has the added benefit of letting you map different prop values to different color shades for example: JSX function Button ({ color , children }) { const colorVariants = { blue : "bg-blue-600 hover:bg-blue-500 text-white" , red : "bg-red-500 hover:bg-red-400 text-white" , yellow : "bg-yellow-300 hover:bg-yellow-400 text-black" , }; return < button className ={ ` ${ colorVariants [ color ] } ...` }>{ children }</ button >; } As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. Which files are scanned Tailwind will scan every file in your project for class names, except in the following cases: Files that are in your .gitignore file Files in the node_modules directory Binary files like images, videos, or zip files CSS files Common package manager lock files If you need to scan any files that Tailwind is ignoring by default, you can explicitly register those sources. Explicitly registering sources Use @source to explicitly register source paths relative to the stylesheet: CSS @import "tailwindcss" ; @source "../node_modules/@acmecorp/ui-lib" ; This is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your .gitignore file and ignored by Tailwind by default. Setting your base path Tailwind uses the current working directory as its starting point when scanning for class names by default. To set the base path for source detection explicitly, use the source() function when importing Tailwind in your CSS: CSS @import "tailwindcss" source ( "../src" ) ; This can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project. Ignoring specific paths Use @source not to ignore specific paths, relative to the stylesheet, when scanning for class names: CSS @import "tailwindcss" ; @source not "../src/components/legacy" ; This is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries. Disabling automatic detection Use source(none) to completely disable automatic source detection if you want to register all of your sources explicitly: CSS @import "tailwindcss" source ( none ); @source "../admin" ; @source "../shared" ; This can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs. Safelisting specific utilities If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use @source inline() to force them to be generated: CSS @import "tailwindcss" ; @source inline( "underline" ) ; Generated CSS .underline { text-decoration-line : underline ; } Safelisting variants You can also use @source inline() to generate classes with variants. For example, to generate the underline class with hover and focus variants, add {hover:,focus:,} to the source input: CSS @import "tailwindcss" ; @source inline( "{hover:,focus:,}underline" ) ; Generated CSS .underline { text-decoration-line : underline ; } @media ( hover : hover ) { .hover \: underline:hover { text-decoration-line : underline ; } } @media ( focus : focus ) { .focus \: underline:focus { text-decoration-line : underline ; } } Safelisting with ranges The source input is brace expanded , so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range: CSS @import "tailwindcss" ; @source inline( "{hover:,}bg-red-{50,{100..900..100},950}" ) ; Generated CSS .bg-red-50 { background-color : var ( --color-red-50 ); } .bg-red-100 { background-color : var ( --color-red-100 ); } .bg-red-200 { background-color : var ( --color-red-200 ); } /* ... / .bg-red-800 { background-color : var ( --color-red-800 ); } .bg-red-900 { background-color : var ( --color-red-900 ); } .bg-red-950 { background-color : var ( --color-red-950 ); } @media ( hover : hover ) { .hover \: bg-red-50:hover { background-color : var ( --color-red-50 ); } / ... */ .hover \: bg-red-950:hover { background-color : var ( --color-red-950 ); } } This generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the hover: variant for each of those classes. Explicitly excluding classes Use @source not inline() to prevent specific classes from being generated, even if they are detected in your source files: CSS @import "tailwindcss" ; @source not inline( "{hover:,focus:,}bg-red-{50,{100..900..100},950}" ) ; This will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.
Markdown	v4.2 `⌘K``Ctrl K` [Docs](https://tailwindcss.com/docs)[Blog](https://tailwindcss.com/blog)[Showcase](https://tailwindcss.com/showcase)[Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) 1. Core concepts 2. Detecting classes in source files - [Documentation](https://tailwindcss.com/docs/installation) - [Components](https://tailwindcss.com/plus/ui-blocks?ref=sidebar) - [Templates](https://tailwindcss.com/plus/templates?ref=sidebar) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=sidebar) - [Playground](https://play.tailwindcss.com/) - [CourseNew](https://tailwindcss.com/build-uis-that-dont-suck) - [Community](https://tailwindcss.com/insiders) ### Getting started - [Installation](https://tailwindcss.com/docs/installation) - [Editor setup](https://tailwindcss.com/docs/editor-setup) - [Compatibility](https://tailwindcss.com/docs/compatibility) - [Upgrade guide](https://tailwindcss.com/docs/upgrade-guide) ### Core concepts - [Styling with utility classes](https://tailwindcss.com/docs/styling-with-utility-classes) - [Hover, focus, and other states](https://tailwindcss.com/docs/hover-focus-and-other-states) - [Responsive design](https://tailwindcss.com/docs/responsive-design) - [Dark mode](https://tailwindcss.com/docs/dark-mode) - [Theme variables](https://tailwindcss.com/docs/theme) - [Colors](https://tailwindcss.com/docs/colors) - [Adding custom styles](https://tailwindcss.com/docs/adding-custom-styles) - [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) - [Functions and directives](https://tailwindcss.com/docs/functions-and-directives) ### Base styles - [Preflight](https://tailwindcss.com/docs/preflight) ### Layout - [aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) - [columns](https://tailwindcss.com/docs/columns) - [break-after](https://tailwindcss.com/docs/break-after) - [break-before](https://tailwindcss.com/docs/break-before) - [break-inside](https://tailwindcss.com/docs/break-inside) - [box-decoration-break](https://tailwindcss.com/docs/box-decoration-break) - [box-sizing](https://tailwindcss.com/docs/box-sizing) - [display](https://tailwindcss.com/docs/display) - [float](https://tailwindcss.com/docs/float) - [clear](https://tailwindcss.com/docs/clear) - [isolation](https://tailwindcss.com/docs/isolation) - [object-fit](https://tailwindcss.com/docs/object-fit) - [object-position](https://tailwindcss.com/docs/object-position) - [overflow](https://tailwindcss.com/docs/overflow) - [overscroll-behavior](https://tailwindcss.com/docs/overscroll-behavior) - [position](https://tailwindcss.com/docs/position) - [top / right / bottom / left](https://tailwindcss.com/docs/top-right-bottom-left) - [visibility](https://tailwindcss.com/docs/visibility) - [z-index](https://tailwindcss.com/docs/z-index) ### Flexbox & Grid - [flex-basis](https://tailwindcss.com/docs/flex-basis) - [flex-direction](https://tailwindcss.com/docs/flex-direction) - [flex-wrap](https://tailwindcss.com/docs/flex-wrap) - [flex](https://tailwindcss.com/docs/flex) - [flex-grow](https://tailwindcss.com/docs/flex-grow) - [flex-shrink](https://tailwindcss.com/docs/flex-shrink) - [order](https://tailwindcss.com/docs/order) - [grid-template-columns](https://tailwindcss.com/docs/grid-template-columns) - [grid-column](https://tailwindcss.com/docs/grid-column) - [grid-template-rows](https://tailwindcss.com/docs/grid-template-rows) - [grid-row](https://tailwindcss.com/docs/grid-row) - [grid-auto-flow](https://tailwindcss.com/docs/grid-auto-flow) - [grid-auto-columns](https://tailwindcss.com/docs/grid-auto-columns) - [grid-auto-rows](https://tailwindcss.com/docs/grid-auto-rows) - [gap](https://tailwindcss.com/docs/gap) - [justify-content](https://tailwindcss.com/docs/justify-content) - [justify-items](https://tailwindcss.com/docs/justify-items) - [justify-self](https://tailwindcss.com/docs/justify-self) - [align-content](https://tailwindcss.com/docs/align-content) - [align-items](https://tailwindcss.com/docs/align-items) - [align-self](https://tailwindcss.com/docs/align-self) - [place-content](https://tailwindcss.com/docs/place-content) - [place-items](https://tailwindcss.com/docs/place-items) - [place-self](https://tailwindcss.com/docs/place-self) ### Spacing - [padding](https://tailwindcss.com/docs/padding) - [margin](https://tailwindcss.com/docs/margin) ### Sizing - [width](https://tailwindcss.com/docs/width) - [min-width](https://tailwindcss.com/docs/min-width) - [max-width](https://tailwindcss.com/docs/max-width) - [height](https://tailwindcss.com/docs/height) - [min-height](https://tailwindcss.com/docs/min-height) - [max-height](https://tailwindcss.com/docs/max-height) - [inline-size](https://tailwindcss.com/docs/inline-size) - [min-inline-size](https://tailwindcss.com/docs/min-inline-size) - [max-inline-size](https://tailwindcss.com/docs/max-inline-size) - [block-size](https://tailwindcss.com/docs/block-size) - [min-block-size](https://tailwindcss.com/docs/min-block-size) - [max-block-size](https://tailwindcss.com/docs/max-block-size) ### Typography - [font-family](https://tailwindcss.com/docs/font-family) - [font-size](https://tailwindcss.com/docs/font-size) - [font-smoothing](https://tailwindcss.com/docs/font-smoothing) - [font-style](https://tailwindcss.com/docs/font-style) - [font-weight](https://tailwindcss.com/docs/font-weight) - [font-stretch](https://tailwindcss.com/docs/font-stretch) - [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric) - [font-feature-settings](https://tailwindcss.com/docs/font-feature-settings) - [letter-spacing](https://tailwindcss.com/docs/letter-spacing) - [line-clamp](https://tailwindcss.com/docs/line-clamp) - [line-height](https://tailwindcss.com/docs/line-height) - [list-style-image](https://tailwindcss.com/docs/list-style-image) - [list-style-position](https://tailwindcss.com/docs/list-style-position) - [list-style-type](https://tailwindcss.com/docs/list-style-type) - [text-align](https://tailwindcss.com/docs/text-align) - [color](https://tailwindcss.com/docs/color) - [text-decoration-line](https://tailwindcss.com/docs/text-decoration-line) - [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color) - [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style) - [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness) - [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset) - [text-transform](https://tailwindcss.com/docs/text-transform) - [text-overflow](https://tailwindcss.com/docs/text-overflow) - [text-wrap](https://tailwindcss.com/docs/text-wrap) - [text-indent](https://tailwindcss.com/docs/text-indent) - [vertical-align](https://tailwindcss.com/docs/vertical-align) - [white-space](https://tailwindcss.com/docs/white-space) - [word-break](https://tailwindcss.com/docs/word-break) - [overflow-wrap](https://tailwindcss.com/docs/overflow-wrap) - [hyphens](https://tailwindcss.com/docs/hyphens) - [content](https://tailwindcss.com/docs/content) ### Backgrounds - [background-attachment](https://tailwindcss.com/docs/background-attachment) - [background-clip](https://tailwindcss.com/docs/background-clip) - [background-color](https://tailwindcss.com/docs/background-color) - [background-image](https://tailwindcss.com/docs/background-image) - [background-origin](https://tailwindcss.com/docs/background-origin) - [background-position](https://tailwindcss.com/docs/background-position) - [background-repeat](https://tailwindcss.com/docs/background-repeat) - [background-size](https://tailwindcss.com/docs/background-size) ### Borders - [border-radius](https://tailwindcss.com/docs/border-radius) - [border-width](https://tailwindcss.com/docs/border-width) - [border-color](https://tailwindcss.com/docs/border-color) - [border-style](https://tailwindcss.com/docs/border-style) - [outline-width](https://tailwindcss.com/docs/outline-width) - [outline-color](https://tailwindcss.com/docs/outline-color) - [outline-style](https://tailwindcss.com/docs/outline-style) - [outline-offset](https://tailwindcss.com/docs/outline-offset) ### Effects - [box-shadow](https://tailwindcss.com/docs/box-shadow) - [text-shadow](https://tailwindcss.com/docs/text-shadow) - [opacity](https://tailwindcss.com/docs/opacity) - [mix-blend-mode](https://tailwindcss.com/docs/mix-blend-mode) - [background-blend-mode](https://tailwindcss.com/docs/background-blend-mode) - [mask-clip](https://tailwindcss.com/docs/mask-clip) - [mask-composite](https://tailwindcss.com/docs/mask-composite) - [mask-image](https://tailwindcss.com/docs/mask-image) - [mask-mode](https://tailwindcss.com/docs/mask-mode) - [mask-origin](https://tailwindcss.com/docs/mask-origin) - [mask-position](https://tailwindcss.com/docs/mask-position) - [mask-repeat](https://tailwindcss.com/docs/mask-repeat) - [mask-size](https://tailwindcss.com/docs/mask-size) - [mask-type](https://tailwindcss.com/docs/mask-type) ### Filters - [filter](https://tailwindcss.com/docs/filter) - [blur](https://tailwindcss.com/docs/filter-blur) - [brightness](https://tailwindcss.com/docs/filter-brightness) - [contrast](https://tailwindcss.com/docs/filter-contrast) - [drop-shadow](https://tailwindcss.com/docs/filter-drop-shadow) - [grayscale](https://tailwindcss.com/docs/filter-grayscale) - [hue-rotate](https://tailwindcss.com/docs/filter-hue-rotate) - [invert](https://tailwindcss.com/docs/filter-invert) - [saturate](https://tailwindcss.com/docs/filter-saturate) - [sepia](https://tailwindcss.com/docs/filter-sepia) - [backdrop-filter](https://tailwindcss.com/docs/backdrop-filter) - [blur](https://tailwindcss.com/docs/backdrop-filter-blur) - [brightness](https://tailwindcss.com/docs/backdrop-filter-brightness) - [contrast](https://tailwindcss.com/docs/backdrop-filter-contrast) - [grayscale](https://tailwindcss.com/docs/backdrop-filter-grayscale) - [hue-rotate](https://tailwindcss.com/docs/backdrop-filter-hue-rotate) - [invert](https://tailwindcss.com/docs/backdrop-filter-invert) - [opacity](https://tailwindcss.com/docs/backdrop-filter-opacity) - [saturate](https://tailwindcss.com/docs/backdrop-filter-saturate) - [sepia](https://tailwindcss.com/docs/backdrop-filter-sepia) ### Tables - [border-collapse](https://tailwindcss.com/docs/border-collapse) - [border-spacing](https://tailwindcss.com/docs/border-spacing) - [table-layout](https://tailwindcss.com/docs/table-layout) - [caption-side](https://tailwindcss.com/docs/caption-side) ### Transitions & Animation - [transition-property](https://tailwindcss.com/docs/transition-property) - [transition-behavior](https://tailwindcss.com/docs/transition-behavior) - [transition-duration](https://tailwindcss.com/docs/transition-duration) - [transition-timing-function](https://tailwindcss.com/docs/transition-timing-function) - [transition-delay](https://tailwindcss.com/docs/transition-delay) - [animation](https://tailwindcss.com/docs/animation) ### Transforms - [backface-visibility](https://tailwindcss.com/docs/backface-visibility) - [perspective](https://tailwindcss.com/docs/perspective) - [perspective-origin](https://tailwindcss.com/docs/perspective-origin) - [rotate](https://tailwindcss.com/docs/rotate) - [scale](https://tailwindcss.com/docs/scale) - [skew](https://tailwindcss.com/docs/skew) - [transform](https://tailwindcss.com/docs/transform) - [transform-origin](https://tailwindcss.com/docs/transform-origin) - [transform-style](https://tailwindcss.com/docs/transform-style) - [translate](https://tailwindcss.com/docs/translate) ### Interactivity - [accent-color](https://tailwindcss.com/docs/accent-color) - [appearance](https://tailwindcss.com/docs/appearance) - [caret-color](https://tailwindcss.com/docs/caret-color) - [color-scheme](https://tailwindcss.com/docs/color-scheme) - [cursor](https://tailwindcss.com/docs/cursor) - [field-sizing](https://tailwindcss.com/docs/field-sizing) - [pointer-events](https://tailwindcss.com/docs/pointer-events) - [resize](https://tailwindcss.com/docs/resize) - [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior) - [scroll-margin](https://tailwindcss.com/docs/scroll-margin) - [scroll-padding](https://tailwindcss.com/docs/scroll-padding) - [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align) - [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop) - [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type) - [touch-action](https://tailwindcss.com/docs/touch-action) - [user-select](https://tailwindcss.com/docs/user-select) - [will-change](https://tailwindcss.com/docs/will-change) ### SVG - [fill](https://tailwindcss.com/docs/fill) - [stroke](https://tailwindcss.com/docs/stroke) - [stroke-width](https://tailwindcss.com/docs/stroke-width) ### Accessibility - [forced-color-adjust](https://tailwindcss.com/docs/forced-color-adjust) Core concepts # Detecting classes in source files Understanding and customizing how Tailwind scans your source files. ## [Overview](https://tailwindcss.com/docs/detecting-classes-in-source-files#overview) Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used. This makes sure your CSS is as small as possible, and is also what makes features like [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) possible. ### [How classes are detected](https://tailwindcss.com/docs/detecting-classes-in-source-files#how-classes-are-detected) Tailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way. Instead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names: JSX ``` export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}> {children} </button> );} ``` Then it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about. ### [Dynamic class names](https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names) Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using. Don't construct class names dynamically HTML ``` <div class="text-{{ error ? 'red' : 'green' }}-600"></div> ``` In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full: Always use complete class names HTML ``` <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div> ``` If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes: Don't use props to build class names dynamically JSX ``` function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;} ``` Instead, map props to complete class names that are statically detectable at build-time: Always map props to static class names JSX ``` function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500", red: "bg-red-600 hover:bg-red-500", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;} ``` This has the added benefit of letting you map different prop values to different color shades for example: JSX ``` function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500 text-white", red: "bg-red-500 hover:bg-red-400 text-white", yellow: "bg-yellow-300 hover:bg-yellow-400 text-black", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;} ``` As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. ### [Which files are scanned](https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned) Tailwind will scan every file in your project for class names, except in the following cases: - Files that are in your `.gitignore` file - Files in the `node_modules` directory - Binary files like images, videos, or zip files - CSS files - Common package manager lock files If you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) those sources. ## [Explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) Use `@source` to explicitly register source paths relative to the stylesheet: CSS ``` @import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib"; ``` This is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default. ### [Setting your base path](https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path) Tailwind uses the current working directory as its starting point when scanning for class names by default. To set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS: CSS ``` @import "tailwindcss" source("../src"); ``` This can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project. ### [Ignoring specific paths](https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths) Use `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names: CSS ``` @import "tailwindcss";@source not "../src/components/legacy"; ``` This is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries. ### [Disabling automatic detection](https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection) Use `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly: CSS ``` @import "tailwindcss" source(none);@source "../admin";@source "../shared"; ``` This can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs. ## [Safelisting specific utilities](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities) If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated: CSS ``` @import "tailwindcss";@source inline("underline"); ``` Generated CSS ``` .underline { text-decoration-line: underline;} ``` ### [Safelisting variants](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants) You can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input: CSS ``` @import "tailwindcss";@source inline("{hover:,focus:,}underline"); ``` Generated CSS ``` .underline { text-decoration-line: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration-line: underline; }} ``` ### [Safelisting with ranges](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-with-ranges) The source input is [brace expanded](https://www.gnu.org/software/bash/manual/html_node/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range: CSS ``` @import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}"); ``` Generated CSS ``` .bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... /.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } / ... */ .hover\:bg-red-950:hover { background-color: var(--color-red-950); }} ``` This generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes. ### [Explicitly excluding classes](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes) Use `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files: CSS ``` @import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}"); ``` This will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated. [Adding custom styles](https://tailwindcss.com/docs/adding-custom-styles) [Functions and directives](https://tailwindcss.com/docs/functions-and-directives) ### On this page - [Overview](https://tailwindcss.com/docs/detecting-classes-in-source-files#overview) - [How classes are detected](https://tailwindcss.com/docs/detecting-classes-in-source-files#how-classes-are-detected) - [Dynamic class names](https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names) - [Which files are scanned](https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned) - [Explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) - [Setting your base path](https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path) - [Ignoring specific paths](https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths) - [Disabling automatic detection](https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection) - [Safelisting specific utilities](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities) - [Safelisting variants](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants) - [Safelisting with ranges](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-with-ranges) - [Explicitly excluding classes](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes) [![Refactoring UI](https://tailwindcss.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbook-promo.3012c0f6.png&w=256&q=75)From the creators of Tailwind CSSMake your ideas look awesome, without relying on a designer.“This is the survival kit I wish I had when I started building apps.” Derrick Reimer, SavvyCal](https://www.refactoringui.com/?ref=sidebar) ### Tailwind CSS - [Documentation](https://tailwindcss.com/docs) - [Playground](https://play.tailwindcss.com/) - [Blog](https://tailwindcss.com/blog) - [Showcase](https://tailwindcss.com/showcase) - [Sponsor](https://tailwindcss.com/sponsor) ### Resources - [Refactoring UI](https://www.refactoringui.com/) - [Headless UI](https://headlessui.com/) - [Heroicons](https://heroicons.com/) - [Hero Patterns](https://heropatterns.com/) ### [Tailwind Plus](https://tailwindcss.com/plus?ref=footer) - [UI Blocks](https://tailwindcss.com/plus/ui-blocks?ref=footer) - [Templates](https://tailwindcss.com/plus/templates?ref=footer) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=footer) ### Community - [GitHub](https://github.com/tailwindlabs/tailwindcss) - [Discord](https://tailwindcss.com/sponsor#insiders) - [X](https://x.com/tailwindcss) ### Tailwind CSS - [Documentation](https://tailwindcss.com/docs) - [Playground](https://play.tailwindcss.com/) - [Blog](https://tailwindcss.com/blog) - [Showcase](https://tailwindcss.com/showcase) - [Sponsor](https://tailwindcss.com/sponsor) ### [Tailwind Plus](https://tailwindcss.com/plus?ref=footer) - [UI Blocks](https://tailwindcss.com/plus/ui-blocks?ref=footer) - [Templates](https://tailwindcss.com/plus/templates?ref=footer) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=footer) ### Resources - [Refactoring UI](https://www.refactoringui.com/) - [Headless UI](https://headlessui.com/) - [Heroicons](https://heroicons.com/) - [Hero Patterns](https://heropatterns.com/) ### Community - [GitHub](https://github.com/tailwindlabs/tailwindcss) - [Discord](https://tailwindcss.com/sponsor#insiders) - [X](https://x.com/tailwindcss) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand)
Readable Markdown	Understanding and customizing how Tailwind scans your source files. ## [Overview](https://tailwindcss.com/docs/detecting-classes-in-source-files#overview) Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used. This makes sure your CSS is as small as possible, and is also what makes features like [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) possible. ### [How classes are detected](https://tailwindcss.com/docs/detecting-classes-in-source-files#how-classes-are-detected) Tailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way. Instead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names: JSX ``` export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}> {children} </button> );} ``` Then it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about. ### [Dynamic class names](https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names) Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using. Don't construct class names dynamically HTML ``` <div class="text-{{ error ? 'red' : 'green' }}-600"></div> ``` In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full: Always use complete class names HTML ``` <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div> ``` If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes: Don't use props to build class names dynamically JSX ``` function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;} ``` Instead, map props to complete class names that are statically detectable at build-time: Always map props to static class names JSX ``` function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500", red: "bg-red-600 hover:bg-red-500", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;} ``` This has the added benefit of letting you map different prop values to different color shades for example: JSX ``` function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500 text-white", red: "bg-red-500 hover:bg-red-400 text-white", yellow: "bg-yellow-300 hover:bg-yellow-400 text-black", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;} ``` As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. ### [Which files are scanned](https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned) Tailwind will scan every file in your project for class names, except in the following cases: - Files that are in your `.gitignore` file - Files in the `node_modules` directory - Binary files like images, videos, or zip files - CSS files - Common package manager lock files If you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) those sources. ## [Explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) Use `@source` to explicitly register source paths relative to the stylesheet: CSS ``` @import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib"; ``` This is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default. ### [Setting your base path](https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path) Tailwind uses the current working directory as its starting point when scanning for class names by default. To set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS: CSS ``` @import "tailwindcss" source("../src"); ``` This can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project. ### [Ignoring specific paths](https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths) Use `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names: CSS ``` @import "tailwindcss";@source not "../src/components/legacy"; ``` This is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries. ### [Disabling automatic detection](https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection) Use `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly: CSS ``` @import "tailwindcss" source(none);@source "../admin";@source "../shared"; ``` This can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs. ## [Safelisting specific utilities](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities) If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated: CSS ``` @import "tailwindcss";@source inline("underline"); ``` Generated CSS ``` .underline { text-decoration-line: underline;} ``` ### [Safelisting variants](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants) You can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input: CSS ``` @import "tailwindcss";@source inline("{hover:,focus:,}underline"); ``` Generated CSS ``` .underline { text-decoration-line: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration-line: underline; }} ``` ### [Safelisting with ranges](https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-with-ranges) The source input is [brace expanded](https://www.gnu.org/software/bash/manual/html_node/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range: CSS ``` @import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}"); ``` Generated CSS ``` .bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... /.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } / ... */ .hover\:bg-red-950:hover { background-color: var(--color-red-950); }} ``` This generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes. ### [Explicitly excluding classes](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes) Use `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files: CSS ``` @import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}"); ``` This will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.
Shard	59 (laksa)
Root Hash	16242711095379765659
Unparsed URL	com,tailwindcss!/docs/detecting-classes-in-source-files s443