Skip to content

Tailwind Integration Architecture

WindBeneathYourWings edited this page Apr 10, 2022 · 11 revisions

In this file.

https://github.com/tailwindlabs/tailwindcss/blob/master/src/cli.js

Starting at line 784 is the beginning of the watchers.

The watching is managed by this library.

https://github.com/paulmillr/chokidar

watcher.on('change', async (file) => {
      if (contextDependencies.has(file)) {
        env.DEBUG && console.time('Resolve config')
        context = null
        config = refreshConfig(configPath)
        env.DEBUG && console.timeEnd('Resolve config')

        env.DEBUG && console.time('Watch new files')
        let globs = extractFileGlobs(config)
        watcher.add(configDependencies)
        watcher.add(globs)
        env.DEBUG && console.timeEnd('Watch new files')

        chain = chain.then(async () => {
          changedContent.push(...getChangedContent(config))
          await rebuild(config)
        })
      } else {
        chain = chain.then(async () => {
          changedContent.push({
            content: fs.readFileSync(path.resolve(file), 'utf8'),
            extension: path.extname(file).slice(1),
          })

          await rebuild(config)
        })
      }
    })

   watcher.on('add', async (file) => {
      chain = chain.then(async () => {
        changedContent.push({
          content: fs.readFileSync(path.resolve(file), 'utf8'),
          extension: path.extname(file).slice(1),
        })

        await rebuild(config)
      })
    })

    chain = chain.then(() => {
      changedContent.push(...getChangedContent(config))
      return rebuild(config)
    })
  }

When a file is added or changed the watcher triggers a chain execution.

I suspect the chain execution is responsible for altering the css rules that are included in the stylesheet.

Clone this wiki locally