tailwindcss() — tailwindcss Function Reference

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

Function typescript BuildIntegrations VitePlugin calls 3

Entity Profile

BuildIntegrations→ VitePlugin→ tailwindcss() — tailwindcss Function Reference

Dependency Diagram

graph TD
  b3c6ca19_5b31_3c72_53a9_de53e821f992["tailwindcss()"]
  f29c4414_c466_4d28_48df_f0e54acbee4d["index.ts"]
  b3c6ca19_5b31_3c72_53a9_de53e821f992 -->|defined in| f29c4414_c466_4d28_48df_f0e54acbee4d
  15542e45_dd7b_ae11_879c_5d5b509c872d["isPotentialCssRootFile()"]
  b3c6ca19_5b31_3c72_53a9_de53e821f992 -->|calls| 15542e45_dd7b_ae11_879c_5d5b509c872d
  fc21c2c7_b20c_b0f3_b5a6_ef5bdb3d13b1["get()"]
  b3c6ca19_5b31_3c72_53a9_de53e821f992 -->|calls| fc21c2c7_b20c_b0f3_b5a6_ef5bdb3d13b1
  b67e45c0_c12e_4110_8571_4aae09401670["generate()"]
  b3c6ca19_5b31_3c72_53a9_de53e821f992 -->|calls| b67e45c0_c12e_4110_8571_4aae09401670
  style b3c6ca19_5b31_3c72_53a9_de53e821f992 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