Enhancement: Enqueue Tailwind CDN (for easier development)

[DamChtlv]

Thought of this a few days ago, there should be a "Enqueue TailwindCSS CDN" toggle when "TailwindCSS version" is set to 3.X.X

This way, you don't have to compile everytime, just compile at the end of the project to generate the prod assets & that's all ✨

CDN instructions to enqueue it : https://tailwindcss.com/docs/installation/play-cdn

Presentation idea:

[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
}