create-fesd-app 1.0.0-bate.96 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.0-bate.96",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,9 +22,12 @@
     ".gitignore"
   ],
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.10",
     "@xwadex/fesd": "0.0.15",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
+    "clsx": "^2.1.1",
     "colorthief": "^2.4.0",
     "commander": "^12.1.0",
     "flatpickr": "^4.6.13",
@@ -35,6 +38,8 @@
     "overlayscrollbars": "^2.7.3",
     "swiperv11": "npm:swiper@11.1.3",
     "swiperv8": "npm:swiper@8.4.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.10",
     "terser": "^5.30.4",
     "tua-body-scroll-lock": "1.4.0",
     "validator": "^13.11.0",

package/src/assets/css/layouts/article4/_article4_2.0.sass

@@ -602,10 +602,10 @@
         margin-bottom: #{$img-cover-TB-gap - (-$cover-TB-gap + $img-cover-TB-gap)}
     ._imgCover
       position: relative
-      margin: 0 #{-$swiper-cover-LR-gap / 2}
+      margin: 0 #{-$swiper-cover-LR-gap * 0.5}
       ._cover
         margin-bottom: 0
-        padding: 0 #{$swiper-cover-LR-gap / 2}
+        padding: 0 #{$swiper-cover-LR-gap * 0.5}
       .swiper-button-cover
         &:before
           display: block

package/src/assets/css/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/assets/js/apps/index/page.js

@@ -21,7 +21,7 @@ import {
 // flatpickr
 import { Mandarin } from "flatpickr/dist/l10n/zh.js"
 // swiper
-import { SwiperVer11 } from "@/plugins";
+import { SwiperVer11, cn } from "@/plugins";
 import { bannerConfig } from "@/configs"
 
 // swiper
@@ -38,7 +38,7 @@ swiperHandler.banner = function () {
       isVideo(swiper);
     },
   };
-  const banner = new SwiperV11('.swiper', bannerEvents );
+  const banner = new SwiperV11('.swiper', bannerEvents);
 };
 
 swiperHandler.all = function () {
@@ -163,6 +163,8 @@ const test = () => {
 methods.toBackend({ test });
 
 $(async () => {
+
+  console.log(cn("px-3 px-5 px-6"));
   // common Init
   common.inits()
   // plugins Init

package/src/assets/js/plugins/index.js

@@ -1,4 +1,5 @@
 export * as SwiperVer8 from "./swiperV8.plugin"
 export * as SwiperVer11 from "./swiperV11.plugin"
 export { default as gsap } from "./gsap.plugin"
-export * from "./lazyLoad.plugin"
+export * from "./lazyLoad.plugin"
+export * from "./tailwind.plugin"

package/src/assets/js/plugins/tailwind.plugin.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+    return twMerge(clsx(...inputs));
+}

package/src/layouts/_template.pug

@@ -19,6 +19,7 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
     // 共用樣式
     link(rel="stylesheet", href="/assets/fonts/icomoon/style.css")
     link(rel="stylesheet", href="/src/assets/css/style.sass")
+    link(rel="stylesheet", href="/src/assets/css/tailwind.css")
     // 個別頁面 CSS
     block stylesheet
     // 主頁面 CSS

package/vite.config.js

@@ -6,6 +6,7 @@ import pug from '@vituum/vite-plugin-pug';
 import { defineConfig } from 'vite'
 import inject from '@rollup/plugin-inject';
 import viteCompression from 'vite-plugin-compression';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   esbuild: {
@@ -21,6 +22,7 @@ export default defineConfig({
     },
   },
   plugins: [
+    tailwindcss(),
     vituum(),
     pug(),
     pages({