Enhancement: Enqueue Tailwind CDN (for easier development)

[DamChtlv]

Enhancement: Enqueue Tailwind CDN (for easier development)

[DamChtlv]

Working proof of concept for the front-end:

// Load TailwindCSS CDN
add_action( 'wp_enqueue_scripts', 'load_tailwind_cdn', 30 );
function load_tailwind_cdn() {
    
    // Load TailwindCSS CDN only once
    if ( wp_script_is( 'tailwind-cdn' ) ) {
        return;
    }

    // Unload Pilo'Press compiled Tailwind style
    wp_register_style( 'style-pilopress', '' );

    // Load TailwindCSS CDN
    $tailwind_version = '3.2.6';
    wp_enqueue_script( 'tailwind-cdn', "https://cdn.tailwindcss.com/$tailwind_version", array(), $tailwind_version, false );

    // Load Pilo'Press Tailwind config on front
    $tailwind_config = pip_get_tailwind_config();
    if ( $tailwind_config ) {

        // Replace data to match Tailwind CDN config
        $tailwind_config = str_replace( 'module.exports', 'tailwind.config', $tailwind_config );
        wp_add_inline_script( 'tailwind-cdn', $tailwind_config );

    }
}

// Load Pilo'Press custom style for the CDN
add_action( 'wp_head', 'tailwind_cdn_config' );
function tailwind_cdn_config() {

    // Load Pilo'Press Tailwind style on front
    $tailwind_css = pip_get_tailwind_css() . pip_get_layouts_css();
    if ( !$tailwind_css ) {
        return;
    }

    // Remove @import statements to prevent useless requests
    $tailwind_css = str_replace( '@import "tailwindcss/base";', '', $tailwind_css );
    $tailwind_css = str_replace( '@import "tailwindcss/components";', '', $tailwind_css );
    $tailwind_css = str_replace( '@import "tailwindcss/utilities";', '', $tailwind_css );

    // Load Pilo'Press custom Tailwind CSS in "components" Tailwind hook to prevent priority css issues
    ?><style type="text/tailwindcss">
        @layer components {
            <?php echo $tailwind_css; ?>
        }
    </style>
    <?php
}