diff --git a/README.md b/README.md
index ef7feb5..67d4972 100644
--- a/README.md
+++ b/README.md
@@ -47,10 +47,21 @@ REDUX 會自動解析並載入 `set_extensions` 的路徑參數，所以不需
}
```
+#### 4. 使用 TailwindCSS 來開發
+
+如果你的 `WP_DEBUG` 為 `true`，那麼整個 wp-toolkit 會引入 tailwind CDN ，只需要加上前綴 `tw-` 就可以使用 tailwind 的 class
+
+> 如果不使用前綴， tailwind 會與 WordPress 後台的 CSS 衝突
+
+在此套件根目錄使用以下指令來打包 tailwind CSS
+
+`npx tailwindcss -i ./inc/redux_custom_fields/bundle.css -o ./inc/redux_custom_fields/bundle-min.css --minify`
+
## 已經有的欄位
現有欄位可以參考 [REDUX 官網](https://devs.redux.io/core-fields/)
-- [number](https://github.com/j7-dev/wp-toolkit/tree/master/inc/redux_custom_fields/number)
\ No newline at end of file
+- [number](https://github.com/j7-dev/wp-toolkit/tree/master/inc/redux_custom_fields/number)
+
diff --git a/inc/index.php b/inc/index.php
index a1d2756..8298a50 100644
--- a/inc/index.php
+++ b/inc/index.php
@@ -18,25 +18,23 @@ function __construct()
\add_action('redux/construct', [$this, 'load_extensions']);
- // if in dev mode, add tailwindcss to admin and frontend
- if (Utils::is_dev()) {
- \add_action('wp_enqueue_scripts', [$this, 'add_static_assets']);
- \add_action('wp_head', [$this, 'add_tailwind_config'], 1000);
- \add_filter('body_class', function ($classes) {
- if (in_array('tailwindcss', $classes) === false) {
- $classes[] = 'tailwindcss';
- }
- return $classes;
- });
- \add_action('admin_enqueue_scripts', [$this, 'add_static_assets']);
- \add_action('admin_head', [$this, 'add_tailwind_config'], 1000);
- \add_filter('admin_body_class', function ($classes) {
- if (strpos($classes, 'tailwindcss') === false) {
- $classes .= ' tailwindcss ';
- }
- return $classes;
- });
- }
+
+ // \add_action('wp_enqueue_scripts', [$this, 'add_static_assets']);
+ // \add_action('wp_head', [$this, 'add_tailwind_config'], 1000);
+ // \add_filter('body_class', function ($classes) {
+ // if (in_array('tailwindcss', $classes) === false) {
+ // $classes[] = 'tailwindcss';
+ // }
+ // return $classes;
+ // });
+ \add_action('admin_enqueue_scripts', [$this, 'add_static_assets']);
+ \add_action('admin_head', [$this, 'add_tailwind_config'], 1000);
+ \add_filter('admin_body_class', function ($classes) {
+ if (strpos($classes, 'tailwindcss') === false) {
+ $classes .= ' tailwindcss ';
+ }
+ return $classes;
+ });
}
public function load_extensions($redux_object): void
@@ -63,11 +61,16 @@ public function load_extensions($redux_object): void
public function add_static_assets($hook): void
{
- \wp_enqueue_script('tailwindcss', 'https://cdn.tailwindcss.com', array(), '3.4.0');
+ if (!WP_DEBUG) {
+ \wp_enqueue_style('tailwindcss', Utils::get_plugin_url() . '/inc/redux_custom_fields/bundle-min.css', array(), Utils::get_plugin_ver());
+ } else {
+ \wp_enqueue_script('tailwindcss', 'https://cdn.tailwindcss.com', array(), '3.4.0');
+ }
}
public function add_tailwind_config(): void
{
+ if (!WP_DEBUG) return;
// WP 後台會與 tailwind css 衝突，所以要加上 prefix
?>