generate() — tailwindcss Function Reference
Architecture documentation for the generate() function in index.ts from the tailwindcss codebase.
Entity Profile
Dependency Diagram
graph TD bbdbdab4_b968_3686_d725_e087e212da83["generate()"] ef2a9265_c989_089c_410f_2c97c736a312["tailwindcss()"] ef2a9265_c989_089c_410f_2c97c736a312 -->|calls| bbdbdab4_b968_3686_d725_e087e212da83 796ed0e7_5f51_25b9_1260_557d405e71dd["requiresBuild()"] bbdbdab4_b968_3686_d725_e087e212da83 -->|calls| 796ed0e7_5f51_25b9_1260_557d405e71dd 4f2c9d58_bb1e_25c9_7b71_2cf6a0b74e48["addBuildDependency()"] bbdbdab4_b968_3686_d725_e087e212da83 -->|calls| 4f2c9d58_bb1e_25c9_7b71_2cf6a0b74e48 995b3210_0524_7896_eac9_3396e406a1f3["idToPath()"] bbdbdab4_b968_3686_d725_e087e212da83 -->|calls| 995b3210_0524_7896_eac9_3396e406a1f3 style bbdbdab4_b968_3686_d725_e087e212da83 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
packages/@tailwindcss-vite/src/index.ts lines 276–430
public async generate(
content: string,
_addWatchFile: (file: string) => void,
I: Instrumentation,
): Promise<
| {
code: string
map: string | undefined
}
| false
> {
let inputPath = idToPath(this.id)
function addWatchFile(file: string) {
// Don't watch the input file since it's already a dependency and causes
// issues with some setups (e.g. Qwik).
if (file === inputPath) {
return
}
// Scanning `.svg` file containing a `#` or `?` in the path will
// crash Vite. We work around this for now by ignoring updates to them.
//
// https://github.com/tailwindlabs/tailwindcss/issues/16877
if (/[\#\?].*\.svg$/.test(file)) {
return
}
_addWatchFile(file)
}
let requiresBuildPromise = this.requiresBuild()
let inputBase = path.dirname(path.resolve(inputPath))
if (!this.compiler || !this.scanner || (await requiresBuildPromise)) {
clearRequireCache(Array.from(this.buildDependencies.keys()))
this.buildDependencies.clear()
this.addBuildDependency(idToPath(inputPath))
DEBUG && I.start('Setup compiler')
let addBuildDependenciesPromises: Promise<void>[] = []
this.compiler = await compile(content, {
from: this.enableSourceMaps ? this.id : undefined,
base: inputBase,
shouldRewriteUrls: true,
onDependency: (path) => {
addWatchFile(path)
addBuildDependenciesPromises.push(this.addBuildDependency(path))
},
customCssResolver: this.customCssResolver,
customJsResolver: this.customJsResolver,
})
await Promise.all(addBuildDependenciesPromises)
DEBUG && I.end('Setup compiler')
DEBUG && I.start('Setup scanner')
let sources = (() => {
// Disable auto source detection
if (this.compiler.root === 'none') {
return []
}
// No root specified, auto-detect based on the `**/*` pattern
if (this.compiler.root === null) {
return [{ base: this.base, pattern: '**/*', negated: false }]
}
// Use the specified root
return [{ ...this.compiler.root, negated: false }]
})().concat(this.compiler.sources)
this.scanner = new Scanner({ sources })
DEBUG && I.end('Setup scanner')
} else {
for (let buildDependency of this.buildDependencies.keys()) {
addWatchFile(buildDependency)
}
}
if (
!(
this.compiler.features &
(Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
)
) {
return false
}
if (this.compiler.features & Features.Utilities) {
// This should not be here, but right now the Vite plugin is setup where we
// setup a new scanner and compiler every time we request the CSS file
// (regardless whether it actually changed or not).
DEBUG && I.start('Scan for candidates')
for (let candidate of this.scanner.scan()) {
this.candidates.add(candidate)
}
DEBUG && I.end('Scan for candidates')
}
if (this.compiler.features & Features.Utilities) {
DEBUG && I.start('Register dependency messages')
// Watch individual files found via custom `@source` paths
for (let file of this.scanner.files) {
addWatchFile(file)
}
// Watch globs found via custom `@source` paths
for (let glob of this.scanner.globs) {
if (glob.pattern[0] === '!') continue
let relative = path.relative(this.base, glob.base)
if (relative[0] !== '.') {
relative = './' + relative
}
// Ensure relative is a posix style path since we will merge it with the
// glob.
relative = normalizePath(relative)
addWatchFile(path.posix.join(relative, glob.pattern))
let root = this.compiler.root
if (root !== 'none' && root !== null) {
let basePath = normalizePath(path.resolve(root.base, root.pattern))
let isDir = await fs.stat(basePath).then(
(stats) => stats.isDirectory(),
() => false,
)
if (!isDir) {
throw new Error(
`The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
)
}
}
}
DEBUG && I.end('Register dependency messages')
}
DEBUG && I.start('Build CSS')
let code = this.compiler.build([...this.candidates])
DEBUG && I.end('Build CSS')
DEBUG && I.start('Build Source Map')
let map = this.enableSourceMaps ? toSourceMap(this.compiler.buildSourceMap()).raw : undefined
DEBUG && I.end('Build Source Map')
return {
code,
map,
}
}
Domain
Subdomains
Called By
Source
Frequently Asked Questions
What does generate() do?
generate() is a function in the tailwindcss codebase.
What does generate() call?
generate() calls 3 function(s): addBuildDependency, idToPath, requiresBuild.
What calls generate()?
generate() is called by 1 function(s): tailwindcss.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free