createCompatConfig() — tailwindcss Function Reference

Architecture documentation for the createCompatConfig() function in create-compat-config.ts from the tailwindcss codebase.

Function typescript Oxide Scanner calls 1 called by 1

Entity Profile

Oxide→ Scanner→ createCompatConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  e596f574_dab6_879c_9b4e_3aa9d2fa75d9["createCompatConfig()"]
  a0ec45fb_d162_d87d_7041_fadd217a3619["create-compat-config.ts"]
  e596f574_dab6_879c_9b4e_3aa9d2fa75d9 -->|defined in| a0ec45fb_d162_d87d_7041_fadd217a3619
  2351a59d_92ba_1342_1dcb_39b34492170e["upgradeToFullPluginSupport()"]
  2351a59d_92ba_1342_1dcb_39b34492170e -->|calls| e596f574_dab6_879c_9b4e_3aa9d2fa75d9
  c6703f6a_b776_5326_6e96_8faaab8a851f["get()"]
  e596f574_dab6_879c_9b4e_3aa9d2fa75d9 -->|calls| c6703f6a_b776_5326_6e96_8faaab8a851f
  style e596f574_dab6_879c_9b4e_3aa9d2fa75d9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/config/create-compat-config.ts lines 5–63

export function createCompatConfig(cssTheme: Theme): UserConfig {
  return {
    theme: {
      ...defaultTheme,

      // In the defaultTheme config, the `colors` key is not a function but a
      // shallow object. We don't want to define the color namespace unless it
      // is in the CSS theme so here we explicitly overwrite the defaultTheme
      // and only allow colors from the CSS theme.
      colors: ({ theme }) => theme('color', {}),

      extend: {
        fontSize: ({ theme }) => ({
          ...theme('text', {}),
        }),

        boxShadow: ({ theme }) => ({
          ...theme('shadow', {}),
        }),

        animation: ({ theme }) => ({
          ...theme('animate', {}),
        }),

        aspectRatio: ({ theme }) => ({
          ...theme('aspect', {}),
        }),

        borderRadius: ({ theme }) => ({
          ...theme('radius', {}),
        }),

        screens: ({ theme }) => ({
          ...theme('breakpoint', {}),
        }),

        letterSpacing: ({ theme }) => ({
          ...theme('tracking', {}),
        }),

        lineHeight: ({ theme }) => ({
          ...theme('leading', {}),
        }),

        transitionDuration: {
          DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
        },

        transitionTimingFunction: {
          DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
        },

        maxWidth: ({ theme }) => ({
          ...theme('container', {}),
        }),
      },
    },
  }
}