Day 29 - 一秒使用 Tailwind

一般来说，要使用 Tailwind，不管套件也好，Tailwind CLI 也好，除了 Tailwind CSS 的 CDN 之外，都会使用 npm 来安装，虽然威尔猪已经讲得很简单的 试试 Tailwind CLI，不过可能有些同学还是觉得太麻烦，毕竟还是需要安装，而且 Tailwind CSS CDN 有不少缺点威尔猪也提过，其中的两大劣势，就是无法无法客制化 Tailwind 的预设主题及使用 @apply、@layer、@variants 之类的指令，那如果只是想简单练习不想弄得这麽「搞刚」，又想要可以客制化，该怎麽办？威尔猪这边提供 2 种方法：

至於这篇产出的原因，威尔猪明天详谈。

一、 Tailwind Play ★★★★★

第 1 种就是透过 Tailwind 官方的 Tailwind Play，这个的好处是可以即时预览，所见即所得，而且所有档案都帮我们分开 (HTML、CSS、Config)，基本架构也都帮我们写好了，直接删掉 HTML 里的内容就可以开始撰写 Tailwind，并且支持萤幕切分模式还有 2 种尺寸调整，操作模式基本跟 VS Code 一样，也有 Emmet，还有 Tailwind 的提示码，完成後也可以点击分享，Tailwind Play 会自动帮你产生一组网址，复制网址连结就可以分享到我们想分享的地方。

不过一但点击分享，未来有修改的话，还是必须再次产生一组网址，原来的网址就会只会保留修改前的档案，如果要做个小练习或单一页面，这是个很棒的选择。整体来说，威尔猪打五颗星。

二、 Tailwind JIT CDN ★★★★☆

第 2 种就是使用 Tailwind JIT CDN，完全开源，我们可以在 GitHub 上找到它，使用方式也非常简单，不需要任何额外的构建工具或设置，只需将以下 CDN URL 贴到 HTML 的代码中就可以开始使用了，非常类似於现有的 Tailwind CSS CDN。

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

看倌们也许会问威尔猪，这样跟 Tailwind CSS CDN 有啥不一样，No No No，Tailwind JIT CDN 最大的优势是可以客制化，也可以使用 Post CSS 来建置元件，连 Plugins 也可以用。很神奇吧，国外真的神人太多，那到底该如何使用呢？和 Tailwind JIT CDN 一样，直接贴到 HTML 的代码中就可以开始使用了，不过记得要写上 type="..."。

Post CSS

<style type="postcss">
  .bg-blue {
    @apply bg-blue-500;
  }

  .btn-secondary {
    @apply border bg-gray-300 p-4
  }
</style>

tailwind.config.js

<script type="tailwind-config">
{
  theme: {
    extend: {
      colors: {
        'dark-blue': '#0A214C',
        'dark-indigo': '#3D42F5',
      }
    }
  }
}
</script>

Plugins

<script type="module">
  import tailwindcssTypography from 'https://cdn.skypack.dev/@tailwindcss/typography';
  import tailwindcssForms from 'https://cdn.skypack.dev/@tailwindcss/forms';
  import tailwindcssAspectRatio from 'https://cdn.skypack.dev/@tailwindcss/aspect-ratio';
  import tailwindcssLineClamp from 'https://cdn.skypack.dev/@tailwindcss/line-clamp';

  window.tailwindConfig = {
    plugins: [
      tailwindcssTypography,
      tailwindcssForms,
      tailwindcssAspectRatio,
      tailwindcssLineClamp,
    ]
  };

  window.tailwindCSS.refresh();
</script>

<script type="tailwind-config">
  window.tailwindConfig
</script>

好处是可以快速用自己熟悉的编辑器来撰写，还可以客制化，可是还是有些方式无法支援，方便度也没有 Tailwind Play 来得好，写法也和官方提供略有不同，威尔猪推荐指数四颗星，有兴趣的同学可以到 Beyond Code Blog 研究研究。不过这方法目前需写在同一只档案，威尔猪不知道有什麽方式可以拆分，如果有知道的看倌们也欢迎分享。

以上就是今天的内容，咱们明天见。