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

Entity Profile

Dependency Diagram

graph TD
  300098db_da22_646a_4d44_56445c11253e["buildMediaQuery()"]
  a41317b6_1c92_4766_72af_192487644a26["migrateMediaScreen()"]
  a41317b6_1c92_4766_72af_192487644a26 -->|calls| 300098db_da22_646a_4d44_56445c11253e
  ad8b6949_6736_d448_c51c_07f6658ef959["registerScreensConfig()"]
  ad8b6949_6736_d448_c51c_07f6658ef959 -->|calls| 300098db_da22_646a_4d44_56445c11253e
  style 300098db_da22_646a_4d44_56445c11253e 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

Called By

Source

Frequently Asked Questions

What does buildMediaQuery() do?
buildMediaQuery() is a function in the tailwindcss codebase.
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