container-config.test.ts — tailwindcss Source File

Architecture documentation for container-config.test.ts, a typescript file in the tailwindcss codebase. 2 imports, 0 dependents.

File typescript 2 imports

Entity Profile

Dependency Diagram

graph LR
  dcdb1257_7f08_49d0_5672_6588d8aade17["container-config.test.ts"]
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  dcdb1257_7f08_49d0_5672_6588d8aade17 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  defe3085_cb6b_a1e5_b72d_c90fcb3dd3f2[".."]
  dcdb1257_7f08_49d0_5672_6588d8aade17 --> defe3085_cb6b_a1e5_b72d_c90fcb3dd3f2
  style dcdb1257_7f08_49d0_5672_6588d8aade17 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test } from 'vitest'
import { compile } from '..'

const css = String.raw

test('creates a custom utility to extend the built-in container', async () => {
  let input = css`
    @theme default {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
      --breakpoint-xl: 80rem;
      --breakpoint-2xl: 96rem;
    }
    @config "./config.js";
    @tailwind utilities;
  `

  let compiler = await compile(input, {
    loadModule: async () => ({
      module: {
        theme: {
          container: {
            center: true,
            padding: '2rem',
          },
        },
      },
      base: '/root',
      path: '',
    }),
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
    ".container {
      width: 100%;
      @media (width >= 40rem) {
        max-width: 40rem;
      }
      @media (width >= 48rem) {
        max-width: 48rem;
      }
      @media (width >= 64rem) {
        max-width: 64rem;
      }
      @media (width >= 80rem) {
        max-width: 80rem;
      }
      @media (width >= 96rem) {
        max-width: 96rem;
      }
    }
    .container {
      margin-inline: auto;
      padding-inline: 2rem;
    }
    "
  `)
})

// ... (490 more lines)

Dependencies

..
vitest

Source

View on GitHub

Frequently Asked Questions

What does container-config.test.ts do?

container-config.test.ts is a source file in the tailwindcss codebase, written in typescript.

What does container-config.test.ts depend on?

container-config.test.ts imports 2 module(s): .., vitest.

Where is container-config.test.ts in the architecture?

container-config.test.ts is located at packages/tailwindcss/src/compat/container-config.test.ts (directory: packages/tailwindcss/src/compat).

Analyze Your Own Codebase

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

Try Supermodel Free