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 CompilerEngine AstTransformation called by 2

Entity Profile

Dependency Diagram

graph TD
  0a4d3b97_024a_0f55_332f_6b7b1fcd9573["buildMediaQuery()"]
  677923aa_e54a_b77d_277a_4252209aff18["migrateMediaScreen()"]
  677923aa_e54a_b77d_277a_4252209aff18 -->|calls| 0a4d3b97_024a_0f55_332f_6b7b1fcd9573
  cae2462d_b48b_78d8_8df1_2534f7aac297["registerScreensConfig()"]
  cae2462d_b48b_78d8_8df1_2534f7aac297 -->|calls| 0a4d3b97_024a_0f55_332f_6b7b1fcd9573
  style 0a4d3b97_024a_0f55_332f_6b7b1fcd9573 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