feat: support tailwind css (#1605)

Author: chilingling

designer-demo/engine.config.js

@@ -3,5 +3,7 @@ export default {
   theme: 'light',
   material: ['/mock/bundle.json'],
   scripts: [],
-  styles: []
+  styles: [],
+  // 是否开启 TailWindCSS 特性
+  enableTailwindCSS: true
 }

designer-demo/src/preview.js

@@ -10,6 +10,7 @@
  *
  */
 import { defineEntry } from '@opentiny/tiny-engine-meta-register'
+import engineConfig from '../engine.config'
 import 'virtual:svg-icons-register'
 
 async function startApp() {
@@ -23,9 +24,7 @@ async function startApp() {
   const registry = {
     [META_SERVICE.Http]: HttpService,
     'engine.config': {
-      id: 'engine.config',
-      theme: 'light',
-      material: ['/mock/bundle.json']
+      ...engineConfig
     }
   }
 

docs/extension-capabilities-overview/new-registry.md

@@ -271,6 +271,47 @@ export default {
 更多高级特性，请参考 [注册表高级配置](./new-registry-advanced.md)。
 
 
+## Tailwind CSS 支持
+
+TinyEngine 自 v2.9 起支持在注册表中通过 `engine.config.enableTailwindCSS` 开关启用 Tailwind CSS（默认开启）。
+
+### 开关配置
+
+```javascript
+// registry.js
+export default {
+  'engine.config': {
+    // ...其他配置
+    enableTailwindCSS: true // 开启（默认即为 true）；设为 false 可关闭
+  }
+}
+```
+
+### 启用后的行为
+
+- 预览态：自动按需加载 `@tailwindcss/browser`，使画布/预览中可直接使用 Tailwind 原子类。
+- 出码生成：生成的应用将自动完成以下配置（基于 Tailwind CSS v4 零配置方案）：
+  - 在依赖中添加 `tailwindcss`，并在开发依赖中添加 `@tailwindcss/vite`；
+  - 在 Vite 配置中注册 `tailwindcss()` 插件；
+  - 生成 `src/style.css`，内容包含 `@import "tailwindcss";`；
+  - 在 `src/main.js` 自动引入 `./style.css`。
+
+以上步骤由引擎/出码器自动完成，无需手动干预。
+
+### 关闭 Tailwind
+
+当配置为 `enableTailwindCSS: false` 时：
+
+- 预览态不会加载 `@tailwindcss/browser`；
+- 出码时不会注入与 Tailwind 相关的依赖、Vite 插件及样式文件导入。
+
+### 注意事项
+
+- 预览依赖解析：内置 import-map 已包含 `@tailwindcss/browser` 映射；如使用自定义 CDN/离线环境，请确保该映射可用。
+- 自定义样式：可在生成的 `src/style.css` 中追加自定义样式，或在项目中新增样式文件后自行引入。
+- 运行时渲染：如果您自定义了运行时渲染引擎，请确保在运行时渲染中增加对 Tailwind CSS 的支持。
+
+
 ## Vite 配置要求
 
 **重要说明⚠️**：为了使注册表的 tree-shaking 功能正常工作，您需要在 `vite.config.js` 中配置 `registryPath` 参数，指向您的注册表文件路径。

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -76,9 +76,9 @@ export default {
           return
         }
 
-        const { importMap, importStyles } = getImportMapData(deps)
+        const { importMap, importStyles, importScripts } = getImportMapData(deps)
 
-        canvasSrcDoc.value = initCanvas(importMap, importStyles).html
+        canvasSrcDoc.value = initCanvas(importMap, importStyles, importScripts).html
       }
     })
 

packages/canvas/DesignCanvas/src/importMap.ts

@@ -94,9 +94,13 @@ export function getImportMapData(canvasDeps = { scripts: [], styles: [] }) {
   }
 
   const importStyles = [...blockRequire.importStyles, ...canvasDeps.styles]
+  const customEnableTailWindCSS = getMergeMeta('engine.config')?.enableTailwindCSS
+  const tailwindURL = getImportUrl('@tailwindcss/browser')
+  const importScripts = customEnableTailWindCSS && tailwindURL ? [tailwindURL] : []
 
   return {
     importMap,
-    importStyles
+    importStyles,
+    importScripts
   }
 }

packages/canvas/canvas.html

@@ -78,75 +78,6 @@
         animation-delay: 2s;
       }
       html,
-      body,
-      object,
-      iframe,
-      p,
-      blockquote,
-      pre,
-      abbr,
-      address,
-      cite,
-      code,
-      del,
-      dfn,
-      em,
-      img,
-      ins,
-      kbd,
-      q,
-      samp,
-      small,
-      strong,
-      sub,
-      sup,
-      var,
-      b,
-      i,
-      dl,
-      dt,
-      dd,
-      ol,
-      ul,
-      li,
-      fieldset,
-      form,
-      label,
-      legend,
-      table,
-      caption,
-      tbody,
-      tfoot,
-      thead,
-      tr,
-      th,
-      td,
-      article,
-      aside,
-      canvas,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section,
-      summary,
-      time,
-      mark,
-      audio,
-      video {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        outline: 0;
-        font-size: 100%;
-        background: transparent;
-        user-select: none;
-      }
-      html,
       body {
         width: 100%;
         height: 100%;

packages/canvas/init-canvas/canvas.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--%IMPORT_MAP%-->
     <!--%IMPORT_STYLE%-->
+    <!--%IMPORT_SCRIPT%-->
     <style type="text/css">
       .loading-warp {
         display: flex;
@@ -80,77 +81,6 @@
         animation-delay: 2s;
       }
       html,
-      body,
-      div,
-      span,
-      object,
-      iframe,
-      p,
-      blockquote,
-      pre,
-      abbr,
-      address,
-      cite,
-      code,
-      del,
-      dfn,
-      em,
-      img,
-      ins,
-      kbd,
-      q,
-      samp,
-      small,
-      strong,
-      sub,
-      sup,
-      var,
-      b,
-      i,
-      dl,
-      dt,
-      dd,
-      ol,
-      ul,
-      li,
-      fieldset,
-      form,
-      label,
-      legend,
-      table,
-      caption,
-      tbody,
-      tfoot,
-      thead,
-      tr,
-      th,
-      td,
-      article,
-      aside,
-      canvas,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section,
-      summary,
-      time,
-      mark,
-      audio,
-      video {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        outline: 0;
-        font-size: 100%;
-        background: transparent;
-        user-select: none;
-      }
-      html,
       body {
         width: 100%;
         height: 100%;

packages/canvas/init-canvas/init-canvas.ts

@@ -1,14 +1,15 @@
 import canvasScript from './canvas?url&build=canvas'
 import canvasHtml from './canvas.html?raw'
 
-export function initCanvas(importMap = {}, importStyleUrls = []) {
+export function initCanvas(importMap = {}, importStyleUrls = [], importScripts = []) {
   return {
     html: canvasHtml
       .replace('<!--%IMPORT_MAP%-->', `<script type="importmap">${JSON.stringify(importMap, null, 2)}</script>`)
       .replace(
         '<!--%IMPORT_STYLE%-->',
         importStyleUrls.map((styleUrl) => `<link rel="stylesheet" crossorigin="" href="${styleUrl}">`).join('\n')
       )
+      .replace('<!--%IMPORT_SCRIPT%-->', importScripts.map((script) => `<script src="${script}"></script>`).join('\n'))
       .replace('<!--%MAIN_SCRIPT%-->', () => {
         if (import.meta.env.MODE === 'development') {
           return `<script type="module" src="${canvasScript}"></script>`

packages/common/composable/generateCode/index.ts

@@ -1,29 +1,46 @@
-import {
-  generateApp,
-  parseRequiredBlocks,
-  genSFCWithDefaultPlugin,
-  type IAppSchema
-} from '@opentiny/tiny-engine-dsl-vue'
+import { generateApp, type IAppSchema } from '@opentiny/tiny-engine-dsl-vue'
+import * as dslVue from '@opentiny/tiny-engine-dsl-vue'
+import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import defaultPrettierConfig from '../../js/config-files/prettierrc'
 
 // 应用出码默认配置
 const defaultOptions = {
   pluginConfig: {
+    template: {},
+    block: {},
+    page: {},
+    dataSource: {},
+    dependencies: {},
+    globalState: {},
+    i18n: {},
+    router: {},
+    utils: {},
     formatCode: {
       // 默认格式化配置
       ...defaultPrettierConfig
-    }
+    },
+    parseSchema: {}
   }
 }
 
 // 应用出码
 const generateAppCode = async (appSchema: IAppSchema, options = {}) => {
-  const instance = generateApp({ ...defaultOptions, ...options })
+  const enableTailwindCSS = getMergeMeta('engine.config')?.enableTailwindCSS
+  const instance = generateApp({
+    ...defaultOptions,
+    pluginConfig: {
+      ...defaultOptions.pluginConfig,
+      template: { ...defaultOptions.pluginConfig.template, enableTailwindCSS }
+    },
+    ...options
+  })
 
   return instance.generate(appSchema)
 }
 
 // 页面出码
+const { parseRequiredBlocks, genSFCWithDefaultPlugin } = dslVue as any
+
 const generatePageCode = (...args: any[]) => {
   return genSFCWithDefaultPlugin(...args)
 }
@@ -53,10 +70,14 @@ const getAllNestedBlocksSchema = async (pageSchema: any, fetchBlockSchemaApi: an
   const schemaList = await Promise.allSettled(promiseList)
   const extraList: any[] = []
 
-  schemaList.forEach((item: { value: any[]; status: string }) => {
-    const blockItem = item.value?.[0]
+  schemaList.forEach((item) => {
+    if (item.status !== 'fulfilled') {
+      return
+    }
+
+    const blockItem = (item.value as any[])?.[0]
 
-    if (item.status !== 'fulfilled' || !blockItem) {
+    if (!blockItem) {
       return
     }
 

packages/common/js/import-map.json

@@ -17,7 +17,8 @@
     "@opentiny/vue-common": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-common.mjs",
     "@opentiny/vue-locale": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-locale.mjs",
     "@opentiny/vue-renderless/": "${VITE_CDN_DOMAIN}/@opentiny/vue-renderless${versionDelimiter}~3.20${fileDelimiter}/",
-    "echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js"
+    "echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js",
+    "@tailwindcss/browser": "${VITE_CDN_DOMAIN}/@tailwindcss/browser${versionDelimiter}^4${fileDelimiter}/dist/index.global.js"
   },
   "importStyles": {
     "@opentiny/vue-theme": "${VITE_CDN_DOMAIN}/@opentiny/vue-theme${versionDelimiter}~3.20${fileDelimiter}/index.css"