Comments (1)
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
}
from pilopress.
Related Issues (20)
- "Help" section inside Pilo'Press plugin menu
- Doc Request: HOT 1
- Header & Footer documentation
- Yoast SEO compatibility to apply yoastmarks in flexible preview
- Add filter to allow CSS enqueue via ACFE
- Add compatibility with `the_content()` function
- Locked content - Display "set Locked content" even when there is a locked content set (multilingual)
- Default / Locked content enhancements (part 2) HOT 1
- ACF 6.0 breaks things HOT 1
- Updating a Pilo'Press layout field group erase TailwindCSS overrided config HOT 1
- Adding filters in `pip_button` shortcode to have more control on the html output
- Title shortcode - Use "search title" when in a `is_search()` condition
- Enhance TailwindCSS classes scan with generated cache files (WP Rocket...)
- Error on style build process HOT 4
- Auto-invalidate cache for Pilo'Press layouts scripts using `filemtime`
- In the layouts screen 'add new' button is hidden HOT 3
- Tailwindcss dont build for admin style HOT 3
- Getting a "Unhandled Promise Rejection: Cannot read properties of undefined (reading 'sameOrigin')" while Pilo'press is activated HOT 3
- Dont compile or load style-admin when CDN is enable HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pilopress.