🚠

Tailwind JS

tailwind Js 是 tailwindcss 的运行时版本,适合在脱离 NodeJS 不使用任何构建工具的时候使用。
 

🔜 快速上手

直接在 HTML 内引入 JS 文件即可
<script src="https://resources.73zls.com/lib/tailwind/tailwind.umd.js"></script> <!-- 不考虑低版本浏览器 --> <script src="https://resources.73zls.com/lib/tailwind/tailwind.iife.js"></script>
 
如果想要支持 IE11 需要引入 polyfill:
<script src="https://resources.73zls.com/lib/weakmap-polyfill.js" nomodule></script> <script src="https://resources.73zls.com/lib/tailwind/tailwind.umd.js"></script>

☃️ 定制配置

支持 tailwindcss 配置:参考配置
<script> var tailwindConfig = { darkMode: 'media', mode: 'silent', // variants: { // extend: {} // }, // "theme": {} } </script>
 

🦝 分组简写

<!-- 普通 --> <button class="w-full sm:w-auto text-lg uppercase text-gray-100 bg-purple-800 hover:bg-purple-700 focus:bg-purple-700 focus-visible:ring-4 ring-purple-400 px-6 py-2 rounded-full transition-colors duration-300"> Btn </button> <!-- 简写 --> <button class="w(full sm:auto) text(lg uppercase gray-100) bg-purple(800 700(hover:& focus:&)) ring(purple-400 focus-visible:4)) px-6 py-2 rounded-full transition-colors duration-300"> Btn </button>
更多示例
w(1/2 sm:1/3 lg:1/6) p-2 // => w-1/2 sm:w-1/3 lg:w-1/6 p-2 sm:(border(2 black opacity-50 hover:dashed)) // => sm:border-2 sm:border-black sm:border-opacity-50 sm:hover:border-dashed bg-red-500 shadow-xs sm:bg-red-600 sm:shadow-sm md:bg-red-700 md:shadow lg:bg-red-800 lg:shadow-xl // => bg-red-500 shadow-xs sm:(bg-red-600 shadow-md) md:(bg-red-700 shadow) lg:(bg-red-800 shadow-xl)

🐣 其他说明

优化体验:
// 如果不想支持 IE 可以引入提示用户更新浏览器的提示库 /*@cc_on document.write("<script src='https://resources.73zls.com/lib/browser-tip.js'><\/script>") @*/
 
在线运行环境:https://docs.73zls.com/tailwind/play.html
 
当前支持版本: 1.9 - 2.1(最新)
 
中文文档:https://tailwind.docs.73zls.com
语法快查:https://docs.73zls.com/cheatsheet/