tailwindcss Architecture Docs
Home / File/ ui.spec.ts — tailwindcss Source File

ui.spec.ts — tailwindcss Source File

Architecture documentation for ui.spec.ts, a typescript file in the tailwindcss codebase. 2 imports, 0 dependents.

File typescript Oxide PreProcessors 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  0a5bb16b_cfc3_c742_c17e_cb59a2cadf4e["ui.spec.ts"]
  a1a98976_4d8c_bd03_8b57_38b8ac9cb9ab["test"]
  0a5bb16b_cfc3_c742_c17e_cb59a2cadf4e --> a1a98976_4d8c_bd03_8b57_38b8ac9cb9ab
  b75e8457_6610_e7ce_eeaf_9a1dd10fc510["promises"]
  0a5bb16b_cfc3_c742_c17e_cb59a2cadf4e --> b75e8457_6610_e7ce_eeaf_9a1dd10fc510
  style 0a5bb16b_cfc3_c742_c17e_cb59a2cadf4e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test, type Page } from '@playwright/test'
import { readFile } from 'node:fs/promises'

const html = String.raw

let server: Awaited<ReturnType<typeof createServer>>

test.beforeAll(async ({}, info) => {
  server = await createServer()
})

test('basic', async ({ page }) => {
  await server.render({
    page,
    body: html`<div data-test class="w-32 h-32 bg-red"></div>`,
  })

  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)')
})

test('observer', async ({ page }) => {
  await server.render({
    page,
    body: html`<div data-test class="w-32 h-32 bg-red"></div>`,
  })

  await page.evaluate(() => {
    document.querySelector('[data-test]')!.classList.replace('bg-red', 'bg-blue')
  })

  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)')
})

test('custom css', async ({ page }) => {
  await server.render({
    page,
    head: html`
      <style data-css type="text/tailwindcss">
        .foo {
          @apply bg-red;
        }
      </style>
    `,
    body: html`<div data-test class="w-32 h-32 foo"></div>`,
  })

  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)')

  await page.evaluate(() => {
    document.querySelector('[data-css]')!.textContent = `
      .foo {
        @apply bg-blue;
      }
    `
  })

  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)')
})

test('changes to `@theme`', async ({ page }) => {
// ... (112 more lines)

Domain

Subdomains

Functions

Types

Dependencies

  • promises
  • test

Source

Frequently Asked Questions

What does ui.spec.ts do?
ui.spec.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, PreProcessors subdomain.
What functions are defined in ui.spec.ts?
ui.spec.ts defines 1 function(s): createServer.
What does ui.spec.ts depend on?
ui.spec.ts imports 2 module(s): promises, test.
Where is ui.spec.ts in the architecture?
ui.spec.ts is located at packages/@tailwindcss-browser/tests/ui.spec.ts (domain: Oxide, subdomain: PreProcessors, directory: packages/@tailwindcss-browser/tests).

Analyze Your Own Codebase

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

Try Supermodel Free