Twigwind's Object Model

Twigwind's object model is designed to provide a flexible and efficient way to manage and debug styles in your projects.

How it is structured

The object model consists of several key components:

• Name: A unique identifier for the style.
• Properties: representing the compiled style attributes (e.g., color, size).
• Variants: Different versions of the style for various contexts (e.g., hover, dark).

Example Object Model

{
  ".bg-red-500": ["background-color: #f56565", []],
  ".text-lg": ["font-size: 1.125rem", []],
  ".hover\\:bg-blue-500:hover": ["background-color: #4299e1", ["hover"]],
  ".dark .text-white": ["color: #ffffff", ["dark"]],
  "@media (min-width: 768px) { .md\\:p-4 }": ["padding: 1rem", ["media-768px"]]
}
    

The most common use cases for the object model include:

• Inspecting the generated CSS for a specific class.
• Identifying unused styles in your project.
• Debugging style conflicts and overrides.

Accessing the Object Model

In browser runtime version (only for development), you can access the object model in your JavaScript code as follows:

model = Twigwind.Object_Model

While in build mode, the object model is not accessible but can be saved into a json file by adding the --s flag.

twigwind build --s