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 OxideEngine Scanner called by 2

Entity Profile

Dependency Diagram

graph TD
  f0ae2c26_da7d_2117_70b3_216a8890f916["buildMediaQuery()"]
  09dea224_4143_d043_b336_121f3fdb8f12["screens-config.ts"]
  f0ae2c26_da7d_2117_70b3_216a8890f916 -->|defined in| 09dea224_4143_d043_b336_121f3fdb8f12
  5d89fc57_f2e5_f08a_f4da_b44d366475e4["migrateMediaScreen()"]
  5d89fc57_f2e5_f08a_f4da_b44d366475e4 -->|calls| f0ae2c26_da7d_2117_70b3_216a8890f916
  0b047051_1aac_6f5b_66f3_9f154a4cba84["registerScreensConfig()"]
  0b047051_1aac_6f5b_66f3_9f154a4cba84 -->|calls| f0ae2c26_da7d_2117_70b3_216a8890f916
  style f0ae2c26_da7d_2117_70b3_216a8890f916 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