### Install Dependencies

Source: https://github.com/wind-press/wind.press/blob/main/README.md

Installs project dependencies using pnpm after enabling corepack. This is a crucial first step for setting up the development environment.

```bash
corepack enable
pnpm install
```

--------------------------------

### Start Development Server

Source: https://github.com/wind-press/wind.press/blob/main/README.md

Starts the development server for the WindPress project. This command allows for live reloading and testing during development.

```bash
pnpm dev
```

--------------------------------

### Copy Environment File

Source: https://github.com/wind-press/wind.press/blob/main/README.md

Copies the example environment file to a new file named .env. This file is used to configure environment-specific settings for the application.

```bash
cp .env.example .env
```

--------------------------------

### Default main.css Tailwind CSS Setup

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/1.file-main-css.md

This snippet shows the default content of the `main.css` file when using Tailwind CSS version `3.x`. It includes the essential directives for Tailwind to process your styles.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### a!windpress/integration/loader:scan_integrations.before_scan - Action Hook - PHP

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/3.action-hooks.md

This action hook is triggered before the integration scanner starts. It utilizes the Symfony Finder component and allows modification of the Finder instance before the scan begins. The hook receives the Finder instance as a parameter.

```php
add_action('a!windpress/integration/loader:scan_integrations.before_scan', function($finder) {
    // Add custom directories to the finder instance
    $finder->in('/path/to/custom/directory');
});
```

--------------------------------

### Theme Color Variables Example

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

The `@theme` directive defines CSS variables that influence Tailwind's utility classes. This example shows how to set custom primary, secondary, and text colors, which can be generated in the final output when `theme(static)` is used.

```css
@theme {
    --color-*: initial;

    --color-primary: #3490dc;
    --color-secondary: #ffed4a;

    --color-text: #333;
}
```

--------------------------------

### Custom Buttons Styles Example

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

A placeholder for custom button styles. This file can contain specific CSS rules to override or extend default button appearances, contributing to the project's unique design system.

```css
/* Custom button styles */
```

--------------------------------

### Custom Avatar Styles Example

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

This snippet demonstrates defining custom CSS rules for an `.avatar` class, utilizing theme variables like `--avatar-size` and `--spacing-4` for dynamic styling. It shows how to create reusable components with theme-aware properties.

```css
.avatar {
    width: var(--avatar-size, 100px);
    height: var(--avatar-size, 100px);
    padding: var(--spacing-4, 1rem);
    border-radius: var(--avatar-radius, var(--radius-lg, 0.5rem));
}
```

--------------------------------

### Add daisyUI Plugin to main.css (PostCSS)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/1.templates-blocks/daisyui.md

This code snippet shows how to add the daisyUI plugin to your WindPress project's main.css file. It requires a PostCSS setup and enables the use of daisyUI's pre-designed components and utility classes.

```postcss
/* ... */

@plugin "daisyui"; /* or via jsDelivr CDN: "https://esm.run/daisyui" */

/* ... */
```

--------------------------------

### Get Symfony PropertyAccessor with Config::propertyAccessor (PHP)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Provides a singleton instance of the Symfony PropertyAccessor component. This component is used for accessing and manipulating object properties and array elements using a string notation, simplifying data access within the application.

```php
$accessor = Config::propertyAccessor();
```

--------------------------------

### Configure main.css for _wt Theme Integration

Source: https://github.com/wind-press/wind.press/blob/main/content/blog/2.underscore-wt.md

This CSS code snippet is used to configure the `main.css` file within the _wt WordPress theme. It sets up CSS layers and imports Tailwind CSS styles via the WindPress plugin, enabling Tailwind CSS functionality within the theme without a separate build process.

```css
@layer theme, base, components, utilities;

@import './@_wt/tailwind.css';
```

--------------------------------

### Importing CSS Files into main.css

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/1.file-main-css.md

Demonstrates how to import other CSS files into your `main.css`. This includes importing local files using relative paths, external files via CDN URLs, and npm packages which are resolved through esm.sh.

```css
/* this is Simple File System */
@import './theme.css';
@import './custom/avatar.css';
@import './custom/buttons.css';

/* this is CDN URL */
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

/* this is npm package */
@import 'daisyui'; /* this will be loaded from https://esm.sh/daisyui/index.css */
@import 'open-props/buttons.min.css'; /* this will be loaded from https://esm.sh/open-props/buttons.min.css */
```

```css
@theme {
    --color-*: initial;

    --color-primary: #3490dc;
    --color-secondary: #ffed4a;

    --color-text: #333;
}
```

```css
.avatar {
    width: var(--avatar-size, 100px);
    height: var(--avatar-size, 100px);
    padding: var(--spacing-4, 1rem);
    border-radius: var(--avatar-radius, var(--radius-lg, 0.5rem));
}
```

```css
/* Custom button styles */
```

--------------------------------

### Build for Production

Source: https://github.com/wind-press/wind.press/blob/main/README.md

Builds the Nuxt application for production deployment. This command generates optimized static assets for hosting.

```bash
pnpm generate
```

--------------------------------

### Enable Header Cache (PHP)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/2.filter-hooks.md

This filter hook determines whether the frontend header should load from cache or the Compiler. It takes a boolean parameter, defaulting to false. The example shows how to enable header caching.

```php
add_filter('f!windpress/core/runtime:append_header.cache_enabled', function(bool $cache_enabled) {
    // Enable caching for the header on the frontend.
    return true;
});
```

--------------------------------

### Update functions.php for _wt Theme

Source: https://github.com/wind-press/wind.press/blob/main/content/blog/2.underscore-wt.md

Modifies the functions.php file to remove or comment out unnecessary editor style enqueues for the _wt theme, simplifying asset loading.

```php
// Enqueue editor styles.
// add_editor_style( 'style-editor.css' );
// add_editor_style( 'style-editor-extra.css' );
```

--------------------------------

### Scan Specific Theme Files with Glob

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

Example of scanning specific file types (php, html, twig, js) from a custom theme within wp-content. It utilizes glob patterns for efficient file matching.

```css
@source "wp-content:themes/my-theme/**/*.{php,html,twig,js}"
```

--------------------------------

### Config Utility Functions

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Provides methods for managing configuration settings using dot notation for nested keys. Includes functions to set values, check for key existence, and retrieve configuration values with default fallbacks.

```php
/**
 * Sets a value on an array or object using dot notation.
 *
 * @param mixed &$target The target array or object.
 * @param string|array $key The key or path to set.
 * @param mixed $value The value to set.
 * @param bool $overwrite Whether to overwrite existing values. Default is true.
 * @return mixed The modified target.
 */
Config::data_set(mixed &$target, string|array $key, mixed $value, bool $overwrite = true): mixed

/**
 * Determines if the given key exists in the provided array or ArrayAccess object.
 *
 * @param \ArrayAccess|array $array The array or ArrayAccess object.
 * @param string|int $key The key to check.
 * @return bool Whether the key exists.
 */
Config::array_exists(\ArrayAccess|array $array, string|int $key): bool

/**
 * Gets a value at the end of the property path of the WindPress' config.
 *
 * @param string $path The property path to read.
 * @param mixed $defaultValue The value to return if the property path does not exist.
 * @return mixed The value at the end of the property path or the default value.
 */
Config::get(string $path, mixed $defaultValue): mixed

/**
 * Sets a value at the end of the property path of the WindPress' config.
 *
 * @param string $path The property path to modify.
 * @param mixed $value The value to set at the end of the property path.
 *
 * @throws InvalidArgumentException If the property path is invalid.
 * @throws AccessException If a property/index does not exist or is not public.
 * @throws UnexpectedTypeException If a value within the path is neither object nor array.
 */
Config::set(string $path, mixed $value): void
```

--------------------------------

### Importing JS Packages with `import` Syntax

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/2.file-tailwind-config-js.md

Shows how to import JavaScript packages directly from a URL using the ES6 `import` syntax, often used with CDNs like esm.sh for Tailwind CSS plugins.

```javascript
import debounce from 'https://esm.sh/lodash@4.17.21/debounce';
import twTypoPlugin from 'https://esm.sh/@tailwindcss/typography';

export default {
    theme: {
        extend: {},
    },
    plugins: [
        twTypoPlugin,
    ],
    corePlugins: {
        preflight: false,
    }
}
```

--------------------------------

### Modify Tailwind CSS Version (PHP)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/2.filter-hooks.md

This filter hook allows modification of the Tailwind CSS version used in WindPress. It accepts an integer representing the version, with a default of 4. The provided example demonstrates changing the version to 3.

```php
add_filter('f!windpress/core/runtime:tailwindcss_version', function(int $version) {
    // Change the Tailwind CSS version to a custom version.
    return 3;
});
```

--------------------------------

### WindPress File System Structure

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/1.concepts/1.simple-file-system.md

Illustrates the directory structure for the Simple File System in WindPress, showing where project files are stored. This structure is used for managing CSS and JavaScript files within the `/wp-content/uploads/windpress/data` directory.

```bash
wp-content/
└─ uploads/
   └─ windpress/
      └─ data/
         ├── main.css
         ├── tailwind.config.js 
         ├──  ...
         └── some-folder/
             ├── some-file.css
             ├── some-file.js
             └── ...
```

--------------------------------

### Exclude Admin from Header Cache (PHP)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/2.filter-hooks.md

This filter hook controls whether administrators are excluded from loading the frontend header cache. It accepts a boolean parameter, defaulting to false. The example demonstrates excluding administrators from cache loading.

```php
add_filter('f!windpress/core/runtime:append_header.exclude_admin', function(bool $exclude_admin) {
    // Exclude the user with `administrator` role from loading the cache on the frontend.
    return true;
});
```

--------------------------------

### Importing Tailwind CSS Plugins

Source: https://github.com/wind-press/wind.press/blob/main/content/blog/3.goodbye-winden.md

Demonstrates how to import Tailwind CSS plugins like `@tailwindcss/forms` or `@tailwindcss/typography` into your `tailwind.config.js` file. WindPress automatically handles loading these packages via the `esm.sh` CDN.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.php",
    "./template-parts/**/*.php",
    "./*.html",
    "./*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    // Add other Tailwind CSS plugins here
  ]
}
```

--------------------------------

### Load WindPress Libraries in header.php

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/2.custom-integrations/99.custom-theme.md

This PHP snippet is intended for the `header.php` file of a custom WordPress theme. It conditionally loads WindPress libraries, either from a CSS cache if available and admin is excluded, or via the Play CDN. This ensures Tailwind CSS is correctly initialized for the theme.

```php
<?php

$is_cache_enabled = apply_filters('f!windpress/core/runtime:append_header.cache_enabled', \WindPress\WindPress\Utils\Config::get('performance.cache.enabled', false));
$is_exclude_admin = apply_filters('f!windpress/core/runtime:append_header.exclude_admin', \WindPress\WindPress\Utils\Config::get('performance.cache.exclude_admin', false) && current_user_can('manage_options'));

$runtime = \WindPress\WindPress\Core\Runtime::get_instance();

$runtime->print_windpress_metadata();

if (!$is_exclude_admin && $is_cache_enabled && $runtime->is_cache_exists()) {
    $runtime->enqueue_css_cache();
} else {
    $runtime->enqueue_play_cdn();
}

```

--------------------------------

### WindPress Plugin Integration

Source: https://github.com/wind-press/wind.press/blob/main/content/blog/1.hello-windpress.md

This documentation outlines the core functionality of the WindPress plugin for integrating Tailwind CSS into WordPress. It highlights the ease of use, lack of build steps, and compatibility with various WordPress environments and page builders.

```APIDOC
WindPress Plugin:
  Purpose: Integrate Tailwind CSS with WordPress without build tools.
  Key Features:
    - No build steps required.
    - No configuration files needed.
    - No extra setup involved.
    - Works with any WordPress environment.
    - Designed for compatibility with popular WordPress page builders (e.g., Gutenberg, Elementor, Oxygen, Bricks, Breakdance, GeneratePress, Builderius, Kadence).
  Installation:
    - Install like any other WordPress plugin.
  Usage:
    - Activate the plugin.
    - Start using Tailwind CSS classes directly in your WordPress content or theme.
  Benefits:
    - Simplifies Tailwind CSS adoption in WordPress.
    - Accessible for users without modern frontend development experience.
    - Ideal for shared hosting environments.
  Limitations:
    - Primarily for development and integration purposes; Play CDN is not for production.
```

--------------------------------

### Importing JS Packages with `require` Syntax

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/2.file-tailwind-config-js.md

Illustrates using the `require()` syntax to include JavaScript packages, such as Tailwind CSS plugins, from npm. WindPress transforms this into dynamic `import` statements.

```javascript
export default {
    theme: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/forms'),
    ],
    corePlugins: {
        preflight: false,
    }
}
```

--------------------------------

### Switching Tailwind CSS Versions in WindPress

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/1.tailwind-version.md

This guide explains how to switch between Tailwind CSS versions 3.x and 4.x within the WindPress admin interface. It details the steps required to select the desired version and update the project's main CSS file accordingly.

```APIDOC
WindPress Tailwind CSS Version Switching:

Functionality: Allows users to select and apply either Tailwind CSS v3.x or v4.x within the WindPress admin panel.

Steps:
1. Navigate to WindPress admin screen.
2. Go to Settings → General.
3. Locate the 'Tailwind CSS Version' section.
4. Select the desired version (3.x or 4.x).
5. Click 'Save' to apply the version change.
6. Switch to the `main.css` file editor.
7. Update the `main.css` file content to be compatible with the selected Tailwind CSS version.
8. Save the changes in the `main.css` file.

Notes:
- The default active version on a fresh installation is 4.x.
- Version 3.x and 4.x have different configuration approaches, necessitating `main.css` updates.
- Refer to the official Tailwind CSS upgrade guide for detailed differences between versions.
- The `main.css` file can be reset to its default state if needed.
```

--------------------------------

### Notice Utility Functions

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Manages the display and addition of notices within the application, particularly for WordPress admin interfaces. Supports adding single or multiple notices with different statuses and optional unique keys.

```php
/**
 * Retrieves the list of notices.
 *
 * @param ?bool $purge Whether to clear the notices after retrieving them. Default is true.
 * @return array The list of notices.
 */
Notice::get_lists(?bool $purge = true): array

/**
 * Callback for the `admin_notices` action. Prints the notices in the WordPress admin page.
 */
Notice::admin_notices(): void

/**
 * Adds a single notice.
 *
 * @param string $status The status of the notice ('error', 'success', 'warning', 'info').
 * @param string $message The message to display.
 * @param ?string $key An optional key to identify the notice.
 * @param bool $unique Whether to ensure the notice is unique. Default is false.
 */
Notice::add(string $status, string $message, ?string $key = null, bool $unique = false): void

/**
 * Adds multiple notices in bulk.
 *
 * @param string $status The status of the notices ('error', 'success', 'warning', 'info').
 * @param string|array $messages A single message or an array of messages to add.
 */
Notice::adds(string $status, string|array $messages): void

/**
 * Adds a success notice.
 *
 * @param string $message The success message.
 * @param ?string $key An optional key to identify the notice.
 * @param bool $unique Whether to ensure the notice is unique. Default is false.
 */
Notice::success(string $message, ?string $key = null, bool $unique = false): void
```

--------------------------------

### Enabling Preflight Styles

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

Preflight styles normalize browser defaults for a consistent look. To enable them in `main.css`, uncomment the `@import 'tailwindcss/preflight.css'` line. This is disabled by default to avoid conflicts with existing project styles.

```css
@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base); /* [!code ++] */
@import 'tailwindcss/utilities.css' layer(utilities);
```

--------------------------------

### Switch daisyUI Theme with data-theme Attribute (HTML)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/1.templates-blocks/daisyui.md

This HTML snippet demonstrates how to apply a daisyUI theme to your entire website. By adding the 'data-theme' attribute to the root HTML element, you can easily switch between daisyUI's built-in themes or custom themes.

```html
<html data-theme="cupcake">
    <!-- ... -->
</html>
```

--------------------------------

### Implement PHP Scanner Callback for Theme Content

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/2.custom-integrations/99.custom-theme.md

This PHP function `scanner_cb_my_theme_provider` acts as a callback for a scanner process, collecting content from custom theme files. It utilizes Symfony Finder to locate files with specified extensions (PHP, JS, HTML) within the active theme and its parent theme, returning an array of file names and their contents.

```php
<?php

function scanner_cb_my_theme_provider(): array {
    // The file with this extension will be scanned, you can add more extensions if needed
    $file_extensions = [
        'php',
        'js',
        'html',
    ];

    $contents = [];
    $finder = new \WindPressDeps\Symfony\Component\Finder\Finder();

    // The current active theme
    $wpTheme = wp_get_theme();
    $themeDir = $wpTheme->get_stylesheet_directory();

    // Check if the current theme is a child theme and get the parent theme directory
    $has_parent = $wpTheme->parent() ? true : false;
    $parentThemeDir = $has_parent ? $wpTheme->parent()->get_stylesheet_directory() : null;

    // Scan the theme directory according to the file extensions
    foreach ($file_extensions as $extension) {
        $finder->files()->in($themeDir)->name('*.' . $extension);
        if ($has_parent) {
            $finder->files()->in($parentThemeDir)->name('*.' . $extension);
        }
    }

    // Get the file contents and send to the compiler
    foreach ($finder as $file) {
        $contents[] = [
            'name' => $file->getRelativePathname(),
            'content' => $file->getContents(),
        ];
    }

    return $contents;
}

```

--------------------------------

### a!windpress/core/runtime:enqueue_play_cdn.before - Action Hook - PHP

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/3.action-hooks.md

This action hook is triggered before the Play CDN is enqueued on the frontend. It allows you to perform additional actions or checks before the Play CDN is loaded. This hook takes no parameters.

```php
add_action('a!windpress/core/runtime:enqueue_play_cdn.before', function() {
    // Perform actions before the Play CDN is loaded
    error_log('Preparing to load Play CDN...');
});
```

--------------------------------

### Importing Local, CDN, and NPM CSS Files

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

WindPress allows importing CSS files using relative paths for local files, direct URLs for CDNs, or package names for resolution via esm.sh. This enables modular CSS management and integration of third-party styles.

```css
/* this is Simple File System */
@import './theme/color.css';
@import './custom/avatar.css';
@import './custom/buttons.css';

/* this is CDN URL */
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

/* this is npm package */
@import 'daisyui@beta'; /* this will be loaded from https://esm.sh/daisyui@beta/index.css */
@import 'open-props/buttons.min.css'; /* this will be loaded from https://esm.sh/open-props/buttons.min.css */
```

--------------------------------

### Import Preline UI Variants CSS in main.css

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/1.templates-blocks/prelineui.md

Imports the Preline UI CSS variants into your main CSS file. This step is crucial for applying Preline UI's styling and component variations. It requires the `preline/variants.css` file to be accessible.

```PostCSS
/* ... */

@import "preline/variants.css";

@plugin "@tailwindcss/forms";

/* ... */
```

--------------------------------

### Add Informational Notice in PHP

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Adds an informational notice. It takes a message, an optional key, and a flag for uniqueness. This is used to provide users with helpful information or status updates.

```php
Notice::info('This is an informational message.');
```

--------------------------------

### Transformed `require` to `import` for JS Packages

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/2.file-tailwind-config-js.md

This snippet shows the internal transformation of the `require()` syntax into dynamic `import()` calls, as processed by WindPress when using npm packages via esm.sh.

```javascript
export default {
    theme: {
        extend: {},
    },
    plugins: [
        (await import('https://esm.sh/@tailwindcss/typography')).default,
        (await import('https://esm.sh/@tailwindcss/forms')).default,
    ],
    corePlugins: {
        preflight: false,
    }
}
```

--------------------------------

### Add Warning Notice in PHP

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Adds a warning notice to the system. It accepts a message, an optional key for identification, and a boolean to ensure uniqueness. The notice is typically displayed to the user to alert them of potential issues.

```php
Notice::warning('This action may have unintended consequences.');
```

--------------------------------

### Redirect with Common::redirect (PHP)

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/1.functions.md

Handles redirection to a specified location. If HTTP headers have already been sent, it falls back to using a meta refresh tag for redirection. The function supports specifying the redirect target, whether to use safe redirection methods, the HTTP status code, and custom headers.

```php
Common::redirect('https://example.com', true);
```

--------------------------------

### Scanning Additional Sources with @source Directive

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

Explains how to use the @source directive to scan additional files or packages for CSS styles. Supports adding sources via direct file URLs or by referencing packages from CDNs like jsDelivr, including glob patterns for file paths.

```CSS
/* Add source from a file URL */
@source "https://esm.sh/flowbite/dist/flowbite.min.js?raw";

/* Add source from jsDelivr CDN, supporting glob patterns */
@source "jsdelivr:preline@2.7.0/dist/*.js";
```

--------------------------------

### Register Custom Theme Scanner Provider in functions.php

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/2.custom-integrations/99.custom-theme.md

This PHP code snippet should be added to your custom theme's `functions.php` file. It registers a new provider for WindPress's cache compilation process, enabling a custom scanner for your theme's design payload. The scanner is identified by 'my_theme' and uses a specified callback function for data retrieval.

```php
<?php

/**
 * @param array $providers The collection of providers that will be used to scan the design payload
 * @return array
 */
function register_my_theme_provider(array $providers): array {
    $providers[] = [
        'id' => 'my_theme', // The id of this custom provider. It should be unique across all providers
        'name' => 'My Theme Scanner',
        'description' => 'Scans the current active theme and child theme',
        'callback' => 'scanner_cb_my_theme_provider', // The function that will be called to get the data. Please see the next step for the implementation
        'enabled' => \WindPress\WindPress\Utils\Config::get(sprintf(
            'integration.%s.enabled',
            'my_theme' // The id of this custom provider
        ), true),
    ];

    return $providers;
}
add_filter('f!windpress/core/cache:compile.providers', 'register_my_theme_provider');

```

--------------------------------

### Define wp-content Source Path

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/3.tw-4/1.file-main-css.md

Specifies the basic pattern to add source files from the wp-content directory. The `file_path` supports glob patterns for flexible file selection.

```css
@source "wp-content:[file_path]"
```

--------------------------------

### Include Preline UI JavaScript via CDN in main.css

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/4.examples/1.templates-blocks/prelineui.md

Includes the Preline UI JavaScript file from a CDN directly within your main CSS file using a `@source` directive. This method is an alternative way to load the script, often used for quick integration. Ensure the CDN link is valid and accessible.

```PostCSS
/* ... */

@source "https://esm.sh/preline/dist/preline.js?raw";

/* ... */
```

--------------------------------

### a!windpress/core/runtime:enqueue_css_cache.before - Action Hook - PHP

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/3.api/3.action-hooks.md

This action hook is triggered before the CSS cache is enqueued on the frontend. It allows you to enqueue additional CSS files or styles before the WindPress CSS cache is loaded. This hook takes no parameters.

```php
add_action('a!windpress/core/runtime:enqueue_css_cache.before', function() {
    // Enqueue a custom CSS file
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom-style.css');
});
```

--------------------------------

### Enabling/Disabling Tailwind Preflight Styles

Source: https://github.com/wind-press/wind.press/blob/main/content/docs/2.guide/2.configuration/2.tw-3/2.file-tailwind-config-js.md

Demonstrates how to control the 'preflight' styles in `tailwind.config.js`. Setting `corePlugins.preflight` to `false` disables them, while omitting the line enables them by default.

```javascript
export default {
    theme: {
        extend: {},
    },
    plugins: [],
    corePlugins: {
        preflight: false, // omit this line to enable the Preflight // [!code --]
    }
}
```