tailwindcss() — tailwindcss Function Reference

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

Function typescript Oxide Scanner calls 3

Entity Profile

Oxide→ Scanner→ tailwindcss() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3c9d49e5_6033_f167_6ae4_c95f9c17f790["tailwindcss()"]
  2edc6732_180e_8223_de2c_856c87ce7657["index.ts"]
  3c9d49e5_6033_f167_6ae4_c95f9c17f790 -->|defined in| 2edc6732_180e_8223_de2c_856c87ce7657
  30f052ab_a2da_adb2_63f5_9e0c9b308e70["isPotentialCssRootFile()"]
  3c9d49e5_6033_f167_6ae4_c95f9c17f790 -->|calls| 30f052ab_a2da_adb2_63f5_9e0c9b308e70
  854399a8_4469_b6f5_7175_5d30bfc94972["get()"]
  3c9d49e5_6033_f167_6ae4_c95f9c17f790 -->|calls| 854399a8_4469_b6f5_7175_5d30bfc94972
  68ac0b75_b7fb_24c9_5ba7_a0d956bcaba5["generate()"]
  3c9d49e5_6033_f167_6ae4_c95f9c17f790 -->|calls| 68ac0b75_b7fb_24c9_5ba7_a0d956bcaba5
  style 3c9d49e5_6033_f167_6ae4_c95f9c17f790 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-vite/src/index.ts lines 29–202

export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
  let servers: ViteDevServer[] = []
  let config: ResolvedConfig | null = null
  let rootsByEnv = new DefaultMap<string, Map<string, Root>>((env: string) => new Map())

  let isSSR = false
  let shouldOptimize = true
  let minify = true

  function createRoot(env: Environment | null, id: string) {
    type ResolveFn = (id: string, base: string) => Promise<string | false | undefined>

    let customCssResolver: ResolveFn
    let customJsResolver: ResolveFn

    if (!env) {
      // Older, pre-environment Vite API
      // TODO: Can we drop this??
      let cssResolver = config!.createResolver({
        ...config!.resolve,
        extensions: ['.css'],
        mainFields: ['style'],
        conditions: ['style', 'development|production'],
        tryIndex: false,
        preferRelative: true,
      })

      let jsResolver = config!.createResolver(config!.resolve)

      customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR)
      customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR)
    } else {
      // Newer Vite versions
      let cssResolver = vite.createIdResolver(env.config, {
        ...env.config.resolve,
        extensions: ['.css'],
        mainFields: ['style'],
        conditions: ['style', 'development|production'],
        tryIndex: false,
        preferRelative: true,
      })

      let jsResolver = vite.createIdResolver(env.config, env.config.resolve)

      customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true)
      customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true)
    }

    return new Root(
      id,
      config!.root,
      // Currently, Vite only supports CSS source maps in development and they
      // are off by default. Check to see if we need them or not.
      config?.css.devSourcemap ?? false,
      customCssResolver,
      customJsResolver,
    )
  }

  return [
    {
      // Step 1: Scan source files for candidates
      name: '@tailwindcss/vite:scan',
      enforce: 'pre',

      configureServer(server) {
        servers.push(server)
      },

      async configResolved(_config) {
        config = _config
        isSSR = config.build.ssr !== false && config.build.ssr !== undefined

        // By default we optimize CSS during the build phase but if the user
        // provides explicit options we'll use those instead
        if (opts.optimize !== undefined) {
          shouldOptimize = opts.optimize !== false
        }

        // Minification is also performed when optimizing as long as it's also
        // enabled in Vite