tailwindLoader() — tailwindcss Function Reference

Architecture documentation for the tailwindLoader() function in index.ts from the tailwindcss codebase.

Function typescript BuildIntegrations PostCSSPlugin calls 1

Entity Profile

BuildIntegrations→ PostCSSPlugin→ tailwindLoader() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ef038d5d_2221_6145_79b9_9bf2df640f3a["tailwindLoader()"]
  b43c8628_fc48_68ca_7913_f540a0f4bedd["index.ts"]
  ef038d5d_2221_6145_79b9_9bf2df640f3a -->|defined in| b43c8628_fc48_68ca_7913_f540a0f4bedd
  09da4ea0_1342_7e43_6bbe_0e38e16043d9["getContextFromCache()"]
  ef038d5d_2221_6145_79b9_9bf2df640f3a -->|calls| 09da4ea0_1342_7e43_6bbe_0e38e16043d9
  style ef038d5d_2221_6145_79b9_9bf2df640f3a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-webpack/src/index.ts lines 57–282

export default async function tailwindLoader(
  this: LoaderContext<LoaderOptions>,
  source: string,
): Promise<void> {
  let callback = this.async()
  let options = this.getOptions() ?? {}
  let inputFile = this.resourcePath
  let base = options.base ?? process.cwd()
  let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
  let isCSSModuleFile = inputFile.endsWith('.module.css')

  using I = new Instrumentation()

  DEBUG && I.start(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)

  // Bail out early if this is guaranteed to be a non-Tailwind CSS file.
  {
    DEBUG && I.start('Quick bail check')
    let canBail = !/@(import|reference|theme|variant|config|plugin|apply|tailwind)\b/.test(source)
    if (canBail) {
      DEBUG && I.end('Quick bail check')
      DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
      callback(null, source)
      return
    }
    DEBUG && I.end('Quick bail check')
  }

  try {
    let context = getContextFromCache(inputFile, options)
    let inputBasePath = path.dirname(path.resolve(inputFile))

    // Whether this is the first build or not
    let isInitialBuild = context.compiler === null

    async function createCompiler() {
      DEBUG && I.start('Setup compiler')
      if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
        clearRequireCache(context.fullRebuildPaths)
      }

      context.fullRebuildPaths = []

      DEBUG && I.start('Create compiler')
      let compiler = await compile(source, {
        from: inputFile,
        base: inputBasePath,
        shouldRewriteUrls: true,
        onDependency: (depPath) => context.fullRebuildPaths.push(depPath),
        // In CSS Module files, we have to disable the `@property` polyfill since these will
        // emit global `*` rules which are considered to be non-pure and will cause builds
        // to fail.
        polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
      })
      DEBUG && I.end('Create compiler')

      DEBUG && I.end('Setup compiler')
      return compiler
    }

    // Setup the compiler if it doesn't exist yet
    context.compiler ??= await createCompiler()

    // Early exit if no Tailwind features are used
    if (context.compiler.features === Features.None) {
      DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
      callback(null, source)
      return
    }

    let rebuildStrategy: 'full' | 'incremental' = 'incremental'

    // Track file modification times to CSS files
    DEBUG && I.start('Register full rebuild paths')
    {
      // Report dependencies for config files, plugins, etc.
      for (let file of context.fullRebuildPaths) {
        this.addDependency(path.resolve(file))
      }

      let files = [...context.fullRebuildPaths, inputFile]