tailwindcss Architecture Docs
Home / Function/ buildMediaQuery() — tailwindcss Function Reference

buildMediaQuery() — tailwindcss Function Reference

Architecture documentation for the buildMediaQuery() function in screens-config.ts from the tailwindcss codebase.

Function typescript Oxide Extractor called by 2

Entity Profile

Dependency Diagram

graph TD
  640cb206_2935_70ce_1d58_e048d8f26773["buildMediaQuery()"]
  4911d260_2582_cf22_b77d_7882022f79a4["screens-config.ts"]
  640cb206_2935_70ce_1d58_e048d8f26773 -->|defined in| 4911d260_2582_cf22_b77d_7882022f79a4
  d291baa7_da55_af11_0910_57476f99d01c["migrateMediaScreen()"]
  d291baa7_da55_af11_0910_57476f99d01c -->|calls| 640cb206_2935_70ce_1d58_e048d8f26773
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162["registerScreensConfig()"]
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162 -->|calls| 640cb206_2935_70ce_1d58_e048d8f26773
  style 640cb206_2935_70ce_1d58_e048d8f26773 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/screens-config.ts lines 80–123

export function buildMediaQuery(values: unknown) {
  type ScreenDescriptor = {
    min?: string
    max?: string
    raw?: string
  }

  let list: unknown[] = Array.isArray(values) ? values : [values]
  return list
    .map((value): ScreenDescriptor | null => {
      if (typeof value === 'string') {
        return { min: value }
      }

      if (value && typeof value === 'object') {
        return value
      }

      return null
    })
    .map((screen) => {
      if (screen === null) return null

      if ('raw' in screen) {
        return screen.raw
      }

      let query = ''

      if (screen.max !== undefined) {
        query += `${screen.max} >= `
      }

      query += 'width'

      if (screen.min !== undefined) {
        query += ` >= ${screen.min}`
      }

      return `(${query})`
    })
    .filter(Boolean)
    .join(', ')
}

Domain

Subdomains

Defined In

Called By

Source

Frequently Asked Questions

What does buildMediaQuery() do?
buildMediaQuery() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/compat/screens-config.ts.
Where is buildMediaQuery() defined?
buildMediaQuery() is defined in packages/tailwindcss/src/compat/screens-config.ts at line 80.
What calls buildMediaQuery()?
buildMediaQuery() is called by 2 function(s): migrateMediaScreen, registerScreensConfig.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free