@bookklik/senangstart-css 0.1.8 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (350) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2346 -1955
  3. package/dist/senangstart-css.min.js +143 -1479
  4. package/docs/.vitepress/config.js +9 -4
  5. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  6. package/docs/guide/responsive.md +25 -0
  7. package/docs/index.md +7 -1
  8. package/docs/ms/guide/responsive.md +25 -0
  9. package/docs/ms/index.md +7 -1
  10. package/docs/ms/reference/breakpoints.md +23 -0
  11. package/docs/ms/reference/layout/align-content.md +57 -4
  12. package/docs/ms/reference/layout/align-items.md +81 -4
  13. package/docs/ms/reference/layout/align-self.md +25 -4
  14. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  15. package/docs/ms/reference/layout/border-collapse.md +81 -4
  16. package/docs/ms/reference/layout/border-spacing.md +43 -8
  17. package/docs/ms/reference/layout/box-sizing.md +21 -4
  18. package/docs/ms/reference/layout/caption-side.md +69 -4
  19. package/docs/ms/reference/layout/columns.md +21 -4
  20. package/docs/ms/reference/layout/container.md +21 -4
  21. package/docs/ms/reference/layout/display.md +39 -7
  22. package/docs/ms/reference/layout/flex-basis.md +29 -8
  23. package/docs/ms/reference/layout/flex-direction.md +81 -4
  24. package/docs/ms/reference/layout/flex-items.md +51 -4
  25. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  26. package/docs/ms/reference/layout/flex.md +54 -7
  27. package/docs/ms/reference/layout/float-clear.md +23 -4
  28. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  29. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  30. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  31. package/docs/ms/reference/layout/grid-columns.md +61 -4
  32. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  33. package/docs/ms/reference/layout/grid-rows.md +31 -4
  34. package/docs/ms/reference/layout/inset.md +56 -7
  35. package/docs/ms/reference/layout/isolation.md +21 -4
  36. package/docs/ms/reference/layout/justify-content.md +81 -4
  37. package/docs/ms/reference/layout/justify-items.md +25 -4
  38. package/docs/ms/reference/layout/justify-self.md +25 -4
  39. package/docs/ms/reference/layout/object-fit.md +57 -4
  40. package/docs/ms/reference/layout/object-position.md +29 -8
  41. package/docs/ms/reference/layout/order.md +53 -4
  42. package/docs/ms/reference/layout/overflow.md +45 -4
  43. package/docs/ms/reference/layout/overscroll.md +21 -4
  44. package/docs/ms/reference/layout/place-content.md +23 -4
  45. package/docs/ms/reference/layout/place-items.md +25 -4
  46. package/docs/ms/reference/layout/place-self.md +25 -4
  47. package/docs/ms/reference/layout/position.md +47 -4
  48. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  49. package/docs/ms/reference/layout/table-layout.md +69 -4
  50. package/docs/ms/reference/layout/visibility.md +25 -4
  51. package/docs/ms/reference/layout/z-index.md +27 -4
  52. package/docs/ms/reference/space/gap.md +71 -7
  53. package/docs/ms/reference/space/height.md +61 -7
  54. package/docs/ms/reference/space/margin.md +61 -7
  55. package/docs/ms/reference/space/padding.md +65 -7
  56. package/docs/ms/reference/space/width.md +61 -7
  57. package/docs/ms/reference/visual/accent-color.md +29 -8
  58. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  59. package/docs/ms/reference/visual/animation-delay.md +27 -8
  60. package/docs/ms/reference/visual/animation-direction.md +25 -4
  61. package/docs/ms/reference/visual/animation-duration.md +27 -8
  62. package/docs/ms/reference/visual/animation-fill.md +49 -4
  63. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  64. package/docs/ms/reference/visual/animation-play.md +23 -4
  65. package/docs/ms/reference/visual/appearance.md +23 -4
  66. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  69. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  70. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  71. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  72. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  74. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  75. package/docs/ms/reference/visual/background-attachment.md +23 -4
  76. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  77. package/docs/ms/reference/visual/background-clip.md +21 -4
  78. package/docs/ms/reference/visual/background-color.md +33 -8
  79. package/docs/ms/reference/visual/background-image.md +27 -8
  80. package/docs/ms/reference/visual/background-origin.md +25 -4
  81. package/docs/ms/reference/visual/background-position.md +29 -8
  82. package/docs/ms/reference/visual/background-repeat.md +25 -4
  83. package/docs/ms/reference/visual/background-size.md +29 -8
  84. package/docs/ms/reference/visual/blend-modes.md +23 -4
  85. package/docs/ms/reference/visual/border-radius.md +36 -4
  86. package/docs/ms/reference/visual/border-style.md +25 -4
  87. package/docs/ms/reference/visual/border-width.md +29 -8
  88. package/docs/ms/reference/visual/border.md +56 -7
  89. package/docs/ms/reference/visual/box-shadow.md +34 -4
  90. package/docs/ms/reference/visual/caret-color.md +25 -8
  91. package/docs/ms/reference/visual/color-scheme.md +23 -4
  92. package/docs/ms/reference/visual/cursor.md +25 -4
  93. package/docs/ms/reference/visual/field-sizing.md +23 -4
  94. package/docs/ms/reference/visual/fill.md +29 -8
  95. package/docs/ms/reference/visual/filter-blur.md +29 -8
  96. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  97. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  98. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  99. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  100. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  101. package/docs/ms/reference/visual/filter-invert.md +27 -8
  102. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  103. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  104. package/docs/ms/reference/visual/font-family.md +25 -4
  105. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  106. package/docs/ms/reference/visual/font-style.md +23 -4
  107. package/docs/ms/reference/visual/font-variant-numeric.md +25 -4
  108. package/docs/ms/reference/visual/font-weight.md +35 -4
  109. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  110. package/docs/ms/reference/visual/hyphens.md +25 -4
  111. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  112. package/docs/ms/reference/visual/line-clamp.md +29 -8
  113. package/docs/ms/reference/visual/line-height.md +29 -8
  114. package/docs/ms/reference/visual/list-style.md +25 -4
  115. package/docs/ms/reference/visual/mask.md +29 -8
  116. package/docs/ms/reference/visual/opacity.md +27 -4
  117. package/docs/ms/reference/visual/outline.md +25 -8
  118. package/docs/ms/reference/visual/pointer-events.md +23 -4
  119. package/docs/ms/reference/visual/resize.md +27 -4
  120. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  121. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  122. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  123. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  124. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  125. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  126. package/docs/ms/reference/visual/state-prefixes.md +23 -4
  127. package/docs/ms/reference/visual/stroke-width.md +29 -8
  128. package/docs/ms/reference/visual/stroke.md +27 -8
  129. package/docs/ms/reference/visual/text-alignment.md +25 -4
  130. package/docs/ms/reference/visual/text-color.md +31 -8
  131. package/docs/ms/reference/visual/text-decoration.md +25 -4
  132. package/docs/ms/reference/visual/text-indent.md +29 -8
  133. package/docs/ms/reference/visual/text-overflow.md +23 -4
  134. package/docs/ms/reference/visual/text-shadow.md +31 -8
  135. package/docs/ms/reference/visual/text-size.md +84 -32
  136. package/docs/ms/reference/visual/text-transform.md +25 -4
  137. package/docs/ms/reference/visual/text-wrap.md +25 -4
  138. package/docs/ms/reference/visual/touch-action.md +25 -4
  139. package/docs/ms/reference/visual/transform-backface.md +45 -6
  140. package/docs/ms/reference/visual/transform-origin.md +27 -8
  141. package/docs/ms/reference/visual/transform-perspective-origin.md +61 -10
  142. package/docs/ms/reference/visual/transform-perspective.md +61 -10
  143. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  144. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  145. package/docs/ms/reference/visual/transform-scale.md +29 -8
  146. package/docs/ms/reference/visual/transform-skew.md +29 -8
  147. package/docs/ms/reference/visual/transform-style.md +47 -8
  148. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  149. package/docs/ms/reference/visual/transform-translate.md +60 -13
  150. package/docs/ms/reference/visual/transition-delay.md +27 -8
  151. package/docs/ms/reference/visual/transition-duration.md +27 -8
  152. package/docs/ms/reference/visual/transition-property.md +21 -4
  153. package/docs/ms/reference/visual/transition-timing.md +29 -8
  154. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  155. package/docs/ms/reference/visual/user-select.md +23 -4
  156. package/docs/ms/reference/visual/vertical-align.md +27 -4
  157. package/docs/ms/reference/visual/whitespace.md +25 -4
  158. package/docs/ms/reference/visual/will-change.md +23 -4
  159. package/docs/ms/reference/visual/word-break.md +25 -4
  160. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  161. package/docs/public/assets/ss-logo.svg +83 -0
  162. package/docs/reference/breakpoints.md +23 -0
  163. package/docs/reference/layout/align-content.md +57 -4
  164. package/docs/reference/layout/align-items.md +81 -4
  165. package/docs/reference/layout/align-self.md +25 -4
  166. package/docs/reference/layout/aspect-ratio.md +27 -8
  167. package/docs/reference/layout/border-collapse.md +81 -4
  168. package/docs/reference/layout/border-spacing.md +43 -8
  169. package/docs/reference/layout/box-sizing.md +21 -4
  170. package/docs/reference/layout/caption-side.md +69 -4
  171. package/docs/reference/layout/columns.md +21 -4
  172. package/docs/reference/layout/container.md +21 -4
  173. package/docs/reference/layout/display.md +39 -7
  174. package/docs/reference/layout/flex-basis.md +29 -8
  175. package/docs/reference/layout/flex-direction.md +81 -4
  176. package/docs/reference/layout/flex-items.md +51 -4
  177. package/docs/reference/layout/flex-wrap.md +55 -4
  178. package/docs/reference/layout/flex.md +54 -7
  179. package/docs/reference/layout/float-clear.md +23 -4
  180. package/docs/reference/layout/grid-auto-flow.md +57 -4
  181. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  182. package/docs/reference/layout/grid-column-span.md +59 -4
  183. package/docs/reference/layout/grid-columns.md +61 -4
  184. package/docs/reference/layout/grid-row-span.md +29 -4
  185. package/docs/reference/layout/grid-rows.md +31 -4
  186. package/docs/reference/layout/inset.md +56 -7
  187. package/docs/reference/layout/isolation.md +21 -4
  188. package/docs/reference/layout/justify-content.md +81 -4
  189. package/docs/reference/layout/justify-items.md +25 -4
  190. package/docs/reference/layout/justify-self.md +25 -4
  191. package/docs/reference/layout/object-fit.md +57 -4
  192. package/docs/reference/layout/object-position.md +29 -8
  193. package/docs/reference/layout/order.md +53 -4
  194. package/docs/reference/layout/overflow.md +45 -4
  195. package/docs/reference/layout/overscroll.md +21 -4
  196. package/docs/reference/layout/place-content.md +23 -4
  197. package/docs/reference/layout/place-items.md +25 -4
  198. package/docs/reference/layout/place-self.md +25 -4
  199. package/docs/reference/layout/position.md +47 -4
  200. package/docs/reference/layout/shorthand-alignment.md +47 -4
  201. package/docs/reference/layout/table-layout.md +69 -4
  202. package/docs/reference/layout/visibility.md +25 -4
  203. package/docs/reference/layout/z-index.md +27 -4
  204. package/docs/reference/space/gap.md +71 -7
  205. package/docs/reference/space/height.md +61 -7
  206. package/docs/reference/space/margin.md +61 -7
  207. package/docs/reference/space/padding.md +65 -7
  208. package/docs/reference/space/width.md +61 -7
  209. package/docs/reference/visual/accent-color.md +29 -8
  210. package/docs/reference/visual/animation-builtin.md +29 -8
  211. package/docs/reference/visual/animation-delay.md +27 -8
  212. package/docs/reference/visual/animation-direction.md +25 -4
  213. package/docs/reference/visual/animation-duration.md +27 -8
  214. package/docs/reference/visual/animation-fill.md +49 -4
  215. package/docs/reference/visual/animation-iteration.md +23 -4
  216. package/docs/reference/visual/animation-play.md +23 -4
  217. package/docs/reference/visual/appearance.md +23 -4
  218. package/docs/reference/visual/backdrop-blur.md +29 -8
  219. package/docs/reference/visual/backdrop-brightness.md +29 -8
  220. package/docs/reference/visual/backdrop-contrast.md +29 -8
  221. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  222. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  223. package/docs/reference/visual/backdrop-invert.md +27 -8
  224. package/docs/reference/visual/backdrop-opacity.md +29 -8
  225. package/docs/reference/visual/backdrop-saturate.md +29 -8
  226. package/docs/reference/visual/backdrop-sepia.md +27 -8
  227. package/docs/reference/visual/background-attachment.md +23 -4
  228. package/docs/reference/visual/background-blend-mode.md +25 -4
  229. package/docs/reference/visual/background-clip.md +21 -4
  230. package/docs/reference/visual/background-color.md +33 -8
  231. package/docs/reference/visual/background-image.md +27 -8
  232. package/docs/reference/visual/background-origin.md +25 -4
  233. package/docs/reference/visual/background-position.md +29 -8
  234. package/docs/reference/visual/background-repeat.md +25 -4
  235. package/docs/reference/visual/background-size.md +29 -8
  236. package/docs/reference/visual/blend-modes.md +23 -4
  237. package/docs/reference/visual/border-radius.md +36 -4
  238. package/docs/reference/visual/border-style.md +25 -4
  239. package/docs/reference/visual/border-width.md +29 -8
  240. package/docs/reference/visual/border.md +56 -7
  241. package/docs/reference/visual/box-shadow.md +34 -4
  242. package/docs/reference/visual/caret-color.md +25 -8
  243. package/docs/reference/visual/color-scheme.md +23 -4
  244. package/docs/reference/visual/cursor.md +25 -4
  245. package/docs/reference/visual/field-sizing.md +23 -4
  246. package/docs/reference/visual/fill.md +29 -8
  247. package/docs/reference/visual/filter-blur.md +29 -8
  248. package/docs/reference/visual/filter-brightness.md +29 -8
  249. package/docs/reference/visual/filter-contrast.md +29 -8
  250. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  251. package/docs/reference/visual/filter-grayscale.md +29 -8
  252. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  253. package/docs/reference/visual/filter-invert.md +27 -8
  254. package/docs/reference/visual/filter-saturate.md +29 -8
  255. package/docs/reference/visual/filter-sepia.md +29 -8
  256. package/docs/reference/visual/font-family.md +25 -4
  257. package/docs/reference/visual/font-smoothing.md +23 -4
  258. package/docs/reference/visual/font-style.md +23 -4
  259. package/docs/reference/visual/font-variant-numeric.md +25 -4
  260. package/docs/reference/visual/font-weight.md +35 -4
  261. package/docs/reference/visual/forced-color-adjust.md +23 -4
  262. package/docs/reference/visual/hyphens.md +25 -4
  263. package/docs/reference/visual/letter-spacing.md +29 -8
  264. package/docs/reference/visual/line-clamp.md +29 -8
  265. package/docs/reference/visual/line-height.md +29 -8
  266. package/docs/reference/visual/list-style.md +25 -4
  267. package/docs/reference/visual/mask.md +29 -8
  268. package/docs/reference/visual/opacity.md +27 -4
  269. package/docs/reference/visual/outline.md +25 -8
  270. package/docs/reference/visual/pointer-events.md +23 -4
  271. package/docs/reference/visual/resize.md +27 -4
  272. package/docs/reference/visual/scroll-behavior.md +23 -4
  273. package/docs/reference/visual/scroll-margin.md +25 -8
  274. package/docs/reference/visual/scroll-padding.md +25 -8
  275. package/docs/reference/visual/scroll-snap-align.md +25 -4
  276. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  277. package/docs/reference/visual/scroll-snap-type.md +25 -4
  278. package/docs/reference/visual/state-prefixes.md +23 -4
  279. package/docs/reference/visual/stroke-width.md +29 -8
  280. package/docs/reference/visual/stroke.md +27 -8
  281. package/docs/reference/visual/text-alignment.md +25 -4
  282. package/docs/reference/visual/text-color.md +31 -8
  283. package/docs/reference/visual/text-decoration.md +25 -4
  284. package/docs/reference/visual/text-indent.md +29 -8
  285. package/docs/reference/visual/text-overflow.md +23 -4
  286. package/docs/reference/visual/text-shadow.md +31 -8
  287. package/docs/reference/visual/text-size.md +84 -32
  288. package/docs/reference/visual/text-transform.md +25 -4
  289. package/docs/reference/visual/text-wrap.md +25 -4
  290. package/docs/reference/visual/touch-action.md +25 -4
  291. package/docs/reference/visual/transform-backface.md +45 -6
  292. package/docs/reference/visual/transform-origin.md +27 -8
  293. package/docs/reference/visual/transform-perspective-origin.md +61 -10
  294. package/docs/reference/visual/transform-perspective.md +61 -10
  295. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  296. package/docs/reference/visual/transform-rotate.md +29 -8
  297. package/docs/reference/visual/transform-scale.md +29 -8
  298. package/docs/reference/visual/transform-skew.md +29 -8
  299. package/docs/reference/visual/transform-style.md +47 -8
  300. package/docs/reference/visual/transform-translate-z.md +90 -0
  301. package/docs/reference/visual/transform-translate.md +60 -13
  302. package/docs/reference/visual/transition-delay.md +27 -8
  303. package/docs/reference/visual/transition-duration.md +27 -8
  304. package/docs/reference/visual/transition-property.md +21 -4
  305. package/docs/reference/visual/transition-timing.md +29 -8
  306. package/docs/reference/visual/typography-keywords.md +27 -4
  307. package/docs/reference/visual/user-select.md +23 -4
  308. package/docs/reference/visual/vertical-align.md +27 -4
  309. package/docs/reference/visual/whitespace.md +25 -4
  310. package/docs/reference/visual/will-change.md +23 -4
  311. package/docs/reference/visual/word-break.md +25 -4
  312. package/docs/syntax-reference.json +2009 -1972
  313. package/package.json +3 -2
  314. package/playground/index.html +37 -38
  315. package/playground/jit-tw-mix-test.html +238 -0
  316. package/playground/sample_code.txt +23 -0
  317. package/playground/tw-convertor.html +696 -0
  318. package/scripts/build-dist.js +34 -29
  319. package/scripts/bundle-jit.js +45 -0
  320. package/scripts/convert-tailwind.js +759 -0
  321. package/scripts/generate-docs.js +74 -23
  322. package/src/cdn/jit.js +364 -109
  323. package/src/cli/commands/build.js +14 -6
  324. package/src/cli/commands/dev.js +28 -10
  325. package/src/compiler/generators/css.js +211 -30
  326. package/src/compiler/parser.js +23 -10
  327. package/src/compiler/tokenizer.js +19 -137
  328. package/src/config/defaults.js +76 -25
  329. package/src/core/constants.js +427 -0
  330. package/src/core/tokenizer-core.js +233 -0
  331. package/src/definitions/layout-alignment.js +210 -0
  332. package/src/definitions/layout-flex.js +155 -0
  333. package/src/definitions/layout-grid.js +134 -0
  334. package/src/definitions/layout-positioning.js +64 -0
  335. package/src/definitions/layout-table.js +129 -0
  336. package/src/definitions/layout-utilities.js +164 -0
  337. package/src/definitions/space.js +172 -0
  338. package/src/definitions/visual-backgrounds.js +231 -0
  339. package/src/definitions/visual-borders.js +66 -0
  340. package/src/definitions/visual-filters.js +111 -0
  341. package/src/definitions/visual-interactivity.js +159 -0
  342. package/src/definitions/visual-svg.js +41 -0
  343. package/src/definitions/visual-transform3d.js +255 -15
  344. package/src/definitions/visual-transforms.js +92 -6
  345. package/src/definitions/visual-transitions.js +158 -0
  346. package/src/definitions/visual-typography.js +223 -0
  347. package/src/definitions/visual.js +321 -1
  348. package/tests/integration/compiler.test.js +63 -2
  349. package/tests/unit/convert-tailwind.test.js +324 -0
  350. package/tests/unit/security.test.js +206 -0
package/playground/tw-convertor.html ADDED
@@ -0,0 +1,696 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Tailwind to SenangStart CSS Converter</title>
7
+ <!-- Tailwind CSS for the Tailwind preview -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- SenangStart CSS for the converted preview -->
10
+ <script src="../dist/senangstart-css.min.js"></script>
11
+ <style>
12
+ body {
13
+ font-family: system-ui, -apple-system, sans-serif;
14
+ margin: 0;
15
+ min-height: 100vh;
16
+ }
17
+ .converter-container {
18
+ display: grid;
19
+ grid-template-columns: 1fr 1fr;
20
+ gap: 24px;
21
+ padding: 24px;
22
+ margin: 0 auto;
23
+ }
24
+ .panel {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 16px;
28
+ }
29
+ .panel-header {
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ padding: 12px 16px;
34
+ border-radius: 8px 8px 0 0;
35
+ color: white;
36
+ font-weight: 600;
37
+ }
38
+ .panel-header.tailwind {
39
+ background: linear-gradient(135deg, #38bdf8, #0ea5e9);
40
+ }
41
+ .panel-header.senangstart {
42
+ background: linear-gradient(135deg, #8b5cf6, #6d28d9);
43
+ }
44
+ .code-input {
45
+ width: 100%;
46
+ height: 200px;
47
+ padding: 16px;
48
+ border: 2px solid #e5e7eb;
49
+ border-radius: 8px;
50
+ font-family: ui-monospace, monospace;
51
+ font-size: 14px;
52
+ line-height: 1.5;
53
+ resize: vertical;
54
+ background: #fafafa;
55
+ }
56
+ .code-input:focus {
57
+ outline: none;
58
+ border-color: #8b5cf6;
59
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
60
+ }
61
+ .preview-container {
62
+ border: 2px solid #e5e7eb;
63
+ border-radius: 8px;
64
+ min-height: 200px;
65
+ background: white;
66
+ }
67
+ .preview-header {
68
+ padding: 8px 16px;
69
+ background: #f9fafb;
70
+ border-bottom: 1px solid #e5e7eb;
71
+ font-size: 12px;
72
+ font-weight: 500;
73
+ color: #6b7280;
74
+ text-transform: uppercase;
75
+ letter-spacing: 0.05em;
76
+ }
77
+ .preview-content {
78
+ padding: 16px;
79
+ min-height: 150px;
80
+ }
81
+ .header {
82
+ text-align: center;
83
+ padding: 32px 24px;
84
+ background: linear-gradient(
85
+ 135deg,
86
+ #0ea5e9 0%,
87
+ #8b5cf6 50%,
88
+ #6d28d9 100%
89
+ );
90
+ color: white;
91
+ }
92
+ .header h1 {
93
+ margin: 0 0 8px 0;
94
+ font-size: 28px;
95
+ }
96
+ .header p {
97
+ margin: 0;
98
+ opacity: 0.9;
99
+ }
100
+ .copy-btn {
101
+ padding: 6px 12px;
102
+ background: rgba(255, 255, 255, 0.2);
103
+ border: 1px solid rgba(255, 255, 255, 0.3);
104
+ border-radius: 6px;
105
+ color: white;
106
+ font-size: 12px;
107
+ cursor: pointer;
108
+ transition: all 0.2s;
109
+ }
110
+ .copy-btn:hover {
111
+ background: rgba(255, 255, 255, 0.3);
112
+ }
113
+ .options {
114
+ display: flex;
115
+ gap: 16px;
116
+ padding: 16px 24px;
117
+ background: #f9fafb;
118
+ border-bottom: 1px solid #e5e7eb;
119
+ justify-content: center;
120
+ align-items: center;
121
+ }
122
+ .option-label {
123
+ display: flex;
124
+ align-items: center;
125
+ gap: 8px;
126
+ font-size: 14px;
127
+ color: #374151;
128
+ cursor: pointer;
129
+ }
130
+ .status {
131
+ text-align: center;
132
+ padding: 8px;
133
+ font-size: 13px;
134
+ color: #6b7280;
135
+ }
136
+ .status.success {
137
+ color: #10b981;
138
+ }
139
+ @media (max-width: 900px) {
140
+ .converter-container {
141
+ grid-template-columns: 1fr;
142
+ }
143
+ }
144
+ </style>
145
+ </head>
146
+ <body>
147
+ <div class="header">
148
+ <h1>Tailwind → SenangStart CSS Converter</h1>
149
+ <p>
150
+ Paste Tailwind CSS code on the left, see the converted SenangStart CSS
151
+ on the right
152
+ </p>
153
+ </div>
154
+
155
+ <div class="options">
156
+ <label class="option-label">
157
+ <input type="checkbox" id="exactMode" />
158
+ <span>Exact Mode (use tw- prefix for numeric scales)</span>
159
+ </label>
160
+ <label class="option-label">
161
+ <input type="checkbox" id="livePreview" checked />
162
+ <span>Live Preview</span>
163
+ </label>
164
+ </div>
165
+
166
+ <div class="converter-container">
167
+ <!-- Tailwind Panel -->
168
+ <div class="panel">
169
+ <div class="panel-header tailwind">
170
+ <span>Tailwind CSS</span>
171
+ <button class="copy-btn" onclick="copyInput()">Copy</button>
172
+ </div>
173
+ <textarea
174
+ id="tailwindInput"
175
+ class="code-input"
176
+ placeholder="Paste your Tailwind HTML here..."
177
+ ></textarea>
178
+ <div class="preview-container">
179
+ <div class="preview-header">Tailwind Preview</div>
180
+ <div class="preview-content" id="tailwindPreview"></div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- SenangStart Panel -->
185
+ <div class="panel">
186
+ <div class="panel-header senangstart">
187
+ <span>SenangStart CSS</span>
188
+ <button class="copy-btn" onclick="copyOutput()">Copy</button>
189
+ </div>
190
+ <textarea
191
+ id="senangstartOutput"
192
+ class="code-input"
193
+ placeholder="Converted SenangStart CSS will appear here..."
194
+ readonly
195
+ ></textarea>
196
+ <div class="preview-container">
197
+ <div class="preview-header">SenangStart Preview</div>
198
+ <div class="preview-content" id="senangstartPreview"></div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="status" id="status"></div>
204
+
205
+ <script>
206
+ // ============================
207
+ // BROWSER-COMPATIBLE CONVERTER
208
+ // ============================
209
+
210
+ const spacingScale = {
211
+ 0: "none",
212
+ px: "[1px]",
213
+ 0.5: "tiny",
214
+ 1: "tiny",
215
+ 1.5: "tiny",
216
+ 2: "tiny",
217
+ 2.5: "small",
218
+ 3: "small",
219
+ 3.5: "small",
220
+ 4: "small",
221
+ 5: "medium",
222
+ 6: "medium",
223
+ 7: "medium",
224
+ 8: "big",
225
+ 9: "big",
226
+ 10: "big",
227
+ 11: "big",
228
+ 12: "giant",
229
+ 14: "giant",
230
+ 16: "giant",
231
+ 20: "vast",
232
+ 24: "vast",
233
+ 28: "vast",
234
+ 32: "vast",
235
+ 36: "vast",
236
+ 40: "vast",
237
+ 44: "vast",
238
+ 48: "vast",
239
+ 52: "vast",
240
+ 56: "vast",
241
+ 60: "vast",
242
+ 64: "vast",
243
+ 72: "vast",
244
+ 80: "vast",
245
+ 96: "vast",
246
+ full: "[100%]",
247
+ screen: "[100vw]",
248
+ auto: "auto",
249
+ };
250
+
251
+ const radiusScale = {
252
+ none: "none",
253
+ sm: "small",
254
+ "": "small",
255
+ md: "medium",
256
+ lg: "medium",
257
+ xl: "big",
258
+ "2xl": "big",
259
+ "3xl": "big",
260
+ full: "round",
261
+ };
262
+ const shadowScale = {
263
+ sm: "small",
264
+ "": "small",
265
+ md: "medium",
266
+ lg: "big",
267
+ xl: "giant",
268
+ "2xl": "giant",
269
+ none: "none",
270
+ };
271
+ const fontSizeScale = {
272
+ xs: "mini", // 0.75rem
273
+ sm: "small", // 0.875rem
274
+ base: "base", // 1rem
275
+ lg: "large", // 1.125rem
276
+ xl: "big", // 1.25rem
277
+ "2xl": "huge", // 1.5rem
278
+ "3xl": "grand", // 1.875rem
279
+ "4xl": "giant", // 2.25rem
280
+ "5xl": "mount", // 3rem
281
+ "6xl": "mega", // 3.75rem
282
+ "7xl": "giga", // 4.5rem
283
+ "8xl": "tera", // 6rem
284
+ "9xl": "hero", // 8rem
285
+ };
286
+
287
+ const layoutMappings = {
288
+ container: "container",
289
+ flex: "flex",
290
+ "inline-flex": "inline-flex",
291
+ grid: "grid",
292
+ "inline-grid": "inline-grid",
293
+ block: "block",
294
+ "inline-block": "inline",
295
+ hidden: "hidden",
296
+ "flex-row": "row",
297
+ "flex-col": "col",
298
+ "flex-row-reverse": "row-reverse",
299
+ "flex-col-reverse": "col-reverse",
300
+ "flex-wrap": "wrap",
301
+ "flex-nowrap": "nowrap",
302
+ "flex-wrap-reverse": "wrap-reverse",
303
+ "flex-grow": "grow",
304
+ "flex-grow-0": "grow-0",
305
+ grow: "grow",
306
+ "grow-0": "grow-0",
307
+ "flex-shrink": "shrink",
308
+ "flex-shrink-0": "shrink-0",
309
+ shrink: "shrink",
310
+ "shrink-0": "shrink-0",
311
+ "flex-1": "flex:1",
312
+ "flex-auto": "flex:auto",
313
+ "flex-initial": "flex:initial",
314
+ "flex-none": "flex:none",
315
+ "justify-start": "justify:start",
316
+ "justify-end": "justify:end",
317
+ "justify-center": "justify:center",
318
+ "justify-between": "justify:between",
319
+ "justify-around": "justify:around",
320
+ "justify-evenly": "justify:evenly",
321
+ "items-start": "items:start",
322
+ "items-end": "items:end",
323
+ "items-center": "items:center",
324
+ "items-baseline": "items:baseline",
325
+ "items-stretch": "items:stretch",
326
+ "self-auto": "self:auto",
327
+ "self-start": "self:start",
328
+ "self-end": "self:end",
329
+ "self-center": "self:center",
330
+ "self-stretch": "self:stretch",
331
+ relative: "relative",
332
+ absolute: "absolute",
333
+ fixed: "fixed",
334
+ sticky: "sticky",
335
+ static: "static",
336
+ "overflow-auto": "overflow:auto",
337
+ "overflow-hidden": "overflow:hidden",
338
+ "overflow-visible": "overflow:visible",
339
+ "overflow-scroll": "overflow:scroll",
340
+ "object-contain": "object:contain",
341
+ "object-cover": "object:cover",
342
+ "object-fill": "object:fill",
343
+ "object-none": "object:none",
344
+ "object-scale-down": "object:scale-down",
345
+ };
346
+
347
+ const visualKeywords = {
348
+ italic: "italic",
349
+ "not-italic": "not-italic",
350
+ antialiased: "antialiased",
351
+ uppercase: "uppercase",
352
+ lowercase: "lowercase",
353
+ capitalize: "capitalize",
354
+ "normal-case": "normal-case",
355
+ underline: "underline",
356
+ "line-through": "line-through",
357
+ "no-underline": "no-underline",
358
+ truncate: "truncate",
359
+ "cursor-pointer": "cursor:pointer",
360
+ "cursor-default": "cursor:default",
361
+ "cursor-not-allowed": "cursor:not-allowed",
362
+ "select-none": "select:none",
363
+ "select-text": "select:text",
364
+ "select-all": "select:all",
365
+ };
366
+
367
+ function getSpacing(value, exact) {
368
+ if (exact) {
369
+ if (["full", "screen", "auto"].includes(value))
370
+ return spacingScale[value] || `[${value}]`;
371
+ return `tw-${value}`;
372
+ }
373
+ return spacingScale[value] || `[${value}]`;
374
+ }
375
+
376
+ function convertClass(twClass, exact) {
377
+ // Handle prefixes (hover:, sm:, md:, etc.)
378
+ const prefixMatch = twClass.match(
379
+ /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|active:|disabled:|dark:)(.+)$/
380
+ );
381
+ let prefix = "",
382
+ baseClass = twClass;
383
+ if (prefixMatch) {
384
+ const rawPrefix = prefixMatch[1].slice(0, -1); // remove colon
385
+ if (['sm', 'md', 'lg', 'xl', '2xl'].includes(rawPrefix)) {
386
+ prefix = `tw-${rawPrefix}:`;
387
+ } else {
388
+ prefix = prefixMatch[1];
389
+ }
390
+ baseClass = prefixMatch[2];
391
+ }
392
+
393
+ // Layout mappings
394
+ if (layoutMappings[baseClass])
395
+ return { cat: "layout", val: prefix + layoutMappings[baseClass] };
396
+
397
+ // Visual keywords
398
+ if (visualKeywords[baseClass])
399
+ return { cat: "visual", val: prefix + visualKeywords[baseClass] };
400
+
401
+ // Text color
402
+ const textColorMatch = baseClass.match(
403
+ /^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
404
+ );
405
+ if (textColorMatch)
406
+ return { cat: "visual", val: prefix + "text:" + textColorMatch[1] };
407
+
408
+ // Text alignment
409
+ if (
410
+ ["text-left", "text-center", "text-right", "text-justify"].includes(
411
+ baseClass
412
+ )
413
+ )
414
+ return {
415
+ cat: "visual",
416
+ val: prefix + "text:" + baseClass.replace("text-", ""),
417
+ };
418
+
419
+ // Text size
420
+ const textSizeMatch = baseClass.match(
421
+ /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
422
+ );
423
+ if (textSizeMatch) {
424
+ const size = exact
425
+ ? `tw-${textSizeMatch[1]}`
426
+ : fontSizeScale[textSizeMatch[1]] || textSizeMatch[1];
427
+ return { cat: "visual", val: prefix + "text-size:" + size };
428
+ }
429
+
430
+ // Background color
431
+ const bgMatch = baseClass.match(
432
+ /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
433
+ );
434
+ if (bgMatch) return { cat: "visual", val: prefix + "bg:" + bgMatch[1] };
435
+
436
+ // Border color
437
+ const borderColorMatch = baseClass.match(
438
+ /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
439
+ );
440
+ if (borderColorMatch)
441
+ return {
442
+ cat: "visual",
443
+ val: prefix + "border:" + borderColorMatch[1],
444
+ };
445
+
446
+ // Padding
447
+ const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
448
+ if (paddingMatch) {
449
+ const side = paddingMatch[1] ? "-" + paddingMatch[1] : "";
450
+ return {
451
+ cat: "space",
452
+ val: prefix + "p" + side + ":" + getSpacing(paddingMatch[2], exact),
453
+ };
454
+ }
455
+
456
+ // Margin
457
+ const marginMatch = baseClass.match(
458
+ /^-?m([trblxy])?-(\d+\.?\d*|px|auto|full|screen)$/
459
+ );
460
+ if (marginMatch) {
461
+ const isNeg = baseClass.startsWith("-");
462
+ const side = marginMatch[1] ? "-" + marginMatch[1] : "";
463
+ let val = getSpacing(marginMatch[2], exact);
464
+ if (isNeg) val = "[-" + val + "]";
465
+ return { cat: "space", val: prefix + "m" + side + ":" + val };
466
+ }
467
+
468
+ // Gap
469
+ const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
470
+ if (gapMatch) {
471
+ const axis = gapMatch[1] ? "-" + gapMatch[1] : "";
472
+ return {
473
+ cat: "space",
474
+ val: prefix + "g" + axis + ":" + getSpacing(gapMatch[2], exact),
475
+ };
476
+ }
477
+
478
+ // Width/Height with special values
479
+ const widthMatch = baseClass.match(/^(min-w|max-w|w)-(.+)$/);
480
+ if (widthMatch) {
481
+ const prop = widthMatch[1];
482
+ const rawVal = widthMatch[2];
483
+ // Special width values
484
+ const specialWidthVals = { 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]', 'prose': '[65ch]' };
485
+ const val = specialWidthVals[rawVal] || getSpacing(rawVal, exact);
486
+ return { cat: "space", val: prefix + prop + ":" + val };
487
+ }
488
+ const heightMatch = baseClass.match(/^(min-h|max-h|h)-(.+)$/);
489
+ if (heightMatch) {
490
+ const prop = heightMatch[1];
491
+ const rawVal = heightMatch[2];
492
+ const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]' };
493
+ const val = specialHeightVals[rawVal] || getSpacing(rawVal, exact);
494
+ return { cat: "space", val: prefix + prop + ":" + val };
495
+ }
496
+
497
+ // Border radius
498
+ const roundedMatch = baseClass.match(/^rounded(?:-(.+))?$/);
499
+ if (roundedMatch) {
500
+ const size = roundedMatch[1] || "";
501
+ const scale = exact
502
+ ? size === ""
503
+ ? "tw-DEFAULT"
504
+ : `tw-${size}`
505
+ : radiusScale[size] || "medium";
506
+ return { cat: "visual", val: prefix + "rounded:" + scale };
507
+ }
508
+
509
+ // Shadow
510
+ const shadowMatch = baseClass.match(/^shadow(?:-(.+))?$/);
511
+ if (shadowMatch) {
512
+ const size = shadowMatch[1] || "";
513
+ const scale = exact
514
+ ? size === ""
515
+ ? "tw-DEFAULT"
516
+ : `tw-${size}`
517
+ : shadowScale[size] || "medium";
518
+ return { cat: "visual", val: prefix + "shadow:" + scale };
519
+ }
520
+
521
+ // Font weight
522
+ const fontWeightMatch = baseClass.match(
523
+ /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/
524
+ );
525
+ if (fontWeightMatch)
526
+ return { cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] };
527
+
528
+ // Border width
529
+ const borderWidthMatch = baseClass.match(
530
+ /^border(?:-([trblxy]))?(?:-(\d+))?$/
531
+ );
532
+ if (
533
+ borderWidthMatch &&
534
+ (borderWidthMatch[2] ||
535
+ (!borderWidthMatch[1] && baseClass === "border"))
536
+ ) {
537
+ const side = borderWidthMatch[1]
538
+ ? "-" + borderWidthMatch[1] + "-w"
539
+ : "-w";
540
+ const width = borderWidthMatch[2] || "1";
541
+ return {
542
+ cat: "visual",
543
+ val: prefix + "border" + side + ":[" + width + "px]",
544
+ };
545
+ }
546
+
547
+ // Order
548
+ const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
549
+ if (orderMatch) {
550
+ return { cat: "layout", val: prefix + "order:" + orderMatch[1] };
551
+ }
552
+
553
+ // Grid columns
554
+ const gridColsMatch = baseClass.match(/^grid-cols-(\d+|none)$/);
555
+ if (gridColsMatch) {
556
+ return { cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] };
557
+ }
558
+
559
+ // Column span
560
+ const colSpanMatch = baseClass.match(/^col-span-(\d+|full)$/);
561
+ if (colSpanMatch) {
562
+ return { cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] };
563
+ }
564
+
565
+ // Grid rows
566
+ const gridRowsMatch = baseClass.match(/^grid-rows-(\d+|none)$/);
567
+ if (gridRowsMatch) {
568
+ return { cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] };
569
+ }
570
+
571
+ // Row span
572
+ const rowSpanMatch = baseClass.match(/^row-span-(\d+|full)$/);
573
+ if (rowSpanMatch) {
574
+ return { cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] };
575
+ }
576
+
577
+ // Opacity
578
+ const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
579
+ if (opacityMatch) {
580
+ return { cat: "visual", val: prefix + "opacity:" + opacityMatch[1] };
581
+ }
582
+
583
+ return null;
584
+ }
585
+
586
+ function convertClasses(classString, exact) {
587
+ const classes = classString
588
+ .trim()
589
+ .split(/\s+/)
590
+ .filter((c) => c);
591
+ const layout = [],
592
+ space = [],
593
+ visual = [],
594
+ unknown = [];
595
+
596
+ for (const cls of classes) {
597
+ const result = convertClass(cls, exact);
598
+ if (result) {
599
+ if (result.cat === "layout") layout.push(result.val);
600
+ else if (result.cat === "space") space.push(result.val);
601
+ else if (result.cat === "visual") visual.push(result.val);
602
+ } else {
603
+ unknown.push(cls);
604
+ }
605
+ }
606
+
607
+ return { layout, space, visual, unknown };
608
+ }
609
+
610
+ function convertHTML(html, exact) {
611
+ return html.replace(
612
+ /class=(["'])([^"']+)\1/g,
613
+ (match, quote, classValue) => {
614
+ const { layout, space, visual, unknown } = convertClasses(
615
+ classValue,
616
+ exact
617
+ );
618
+ const attrs = [];
619
+ if (layout.length) attrs.push(`layout="${layout.join(" ")}"`);
620
+ if (space.length) attrs.push(`space="${space.join(" ")}"`);
621
+ if (visual.length) attrs.push(`visual="${visual.join(" ")}"`);
622
+ if (unknown.length) attrs.push(`class="${unknown.join(" ")}"`);
623
+ return attrs.join(" ") || 'class=""';
624
+ }
625
+ );
626
+ }
627
+
628
+ // ============================
629
+ // UI LOGIC
630
+ // ============================
631
+
632
+ const tailwindInput = document.getElementById("tailwindInput");
633
+ const senangstartOutput = document.getElementById("senangstartOutput");
634
+ const tailwindPreview = document.getElementById("tailwindPreview");
635
+ const senangstartPreview = document.getElementById("senangstartPreview");
636
+ const exactMode = document.getElementById("exactMode");
637
+ const livePreview = document.getElementById("livePreview");
638
+ const status = document.getElementById("status");
639
+ let debounceTimer;
640
+
641
+ function convert() {
642
+ const input = tailwindInput.value.trim();
643
+ if (!input) {
644
+ senangstartOutput.value = "";
645
+ tailwindPreview.innerHTML = "";
646
+ senangstartPreview.innerHTML = "";
647
+ status.textContent = "";
648
+ return;
649
+ }
650
+
651
+ const converted = convertHTML(input, exactMode.checked);
652
+ senangstartOutput.value = converted;
653
+
654
+ if (livePreview.checked) {
655
+ tailwindPreview.innerHTML = input;
656
+ senangstartPreview.innerHTML = converted;
657
+ // Trigger SenangStart rescan
658
+ if (window.SenangStart && window.SenangStart.scanAndGenerate) {
659
+ window.SenangStart.scanAndGenerate();
660
+ }
661
+ }
662
+
663
+ status.textContent = "Converted successfully!";
664
+ status.className = "status success";
665
+ }
666
+
667
+ function debouncedConvert() {
668
+ clearTimeout(debounceTimer);
669
+ debounceTimer = setTimeout(convert, 300);
670
+ }
671
+ tailwindInput.addEventListener("input", debouncedConvert);
672
+ exactMode.addEventListener("change", convert);
673
+ livePreview.addEventListener("change", convert);
674
+
675
+ window.copyInput = () => {
676
+ navigator.clipboard.writeText(tailwindInput.value);
677
+ status.textContent = "Tailwind code copied!";
678
+ status.className = "status success";
679
+ };
680
+ window.copyOutput = () => {
681
+ navigator.clipboard.writeText(senangstartOutput.value);
682
+ status.textContent = "SenangStart code copied!";
683
+ status.className = "status success";
684
+ };
685
+
686
+ // Load example
687
+ tailwindInput.value = `<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-lg">
688
+ <h2 class="text-xl font-bold">Hello World</h2>
689
+ <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-blue-100">
690
+ Click me
691
+ </button>
692
+ </div>`;
693
+ convert();
694
+ </script>
695
+ </body>
696
+ </html>