Tailwind JS

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

🔜 快速上手

直接在 HTML 内引入 JS 文件即可


<script src="https://resources.73zls.com/lib/tailwind/tailwind.4.js"></script>

如果想要支持比较老旧的低版本浏览器需要引入 polyfill：


<script src="https://resources.73zls.com/lib/array-flat-polyfill.js" nomodule></script>
<script src="https://resources.73zls.com/lib/tailwind/tailwind.4.js"></script>

☃️ 定制配置

支持 tailwindcss 配置：参考配置


<script>
  var tailwindConfig = {
    darkMode: 'media',
    // variants: {
    //     extend: {}
    // },
    // "theme": {}
    // rules: [
        // ["card", "py-2 px-4 font-semibold rounded-lg shadow-md"],
    // ],
  }
 </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)

🐣 其他说明

为了确保页面加载时呈现出样式，只需将 z-cloak 属性添加到根元素，并将其显示设置为'none'


<body z-cloak style="display:none" >
    ...
</body>

优化：


<!-- 为了避免分析那些频繁变化的元素，您可以对它们应用 z-ignore 属性 -->
<div z-ignore>
    ...
</div>

<!-- 忽略对元素及其子元素所做的更改 -->
<div z-ignore="children" >
    ...
</div>

<!-- 如果您正在使用 z-ignore="children" ，但仍希望观察某些子元素，请在子元素上使用 z-observe -->
<div m-ignore="children">
    <div>
        ...
    </div>

    <div z-observe>
        ...
    </div>

    <div z-observe="children" >
        ...
    </div>
</div>

优化体验：


// 如果不想支持 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 - 3

中文文档：https://tailwind.docs.73zls.com

官方文档: https://tailwindcss.com/

语法快查：https://docs.73zls.com/cheatsheet/