返回

为小程序加入 Tailwind/Windi 原味 CSS，享尽 JIT 编译速度！

前端

随着小程序开发的火热进行，前端开发者们对于 CSS 框架的呼声也越来越高。Tailwind/Windi CSS 作为当今最流行的 CSS 框架之一，凭借着其极强的自定义性和模块化设计，深受广大开发者的青睐。但由于小程序的特殊性，Tailwind/Windi CSS 一直无法完美兼容。不过，现在有了 JIT 编译模式，一切问题都迎刃而解了！

什么是 JIT 编译模式？JIT 即 Just-In-Time 的缩写，意为即时编译。在 JIT 编译模式下，Tailwind/Windi CSS 会在运行时将 CSS 代码编译成小程序可以直接识别的样式，从而解决兼容性问题。

如何将 Tailwind/Windi CSS 应用到小程序？

  1. 安装依赖

首先，你需要在小程序项目中安装 Tailwind/Windi CSS 的依赖。

npm install tailwindcss@jit windi@jit
  1. 配置 PostCSS

然后，你需要在小程序的配置文件中配置 PostCSS，以便能够使用 Tailwind/Windi CSS 的插件。

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};
  1. 配置 Tailwind/Windi CSS

接下来，你需要配置 Tailwind/Windi CSS。你可以创建一个 tailwind.config.js 文件，并在其中配置 Tailwind/Windi CSS 的选项。

module.exports = {
  // ...
};
  1. 使用 Tailwind/Windi CSS

现在，你就可以在小程序中使用 Tailwind/Windi CSS 了。你可以在小程序的样式文件中直接使用 Tailwind/Windi CSS 的类名。

.container {
  @apply mx-auto px-4;
}
  1. 开启 JIT 编译模式

最后，你需要开启 JIT 编译模式。你可以通过在小程序的配置文件中添加如下代码来开启 JIT 编译模式。

module.exports = {
  // ...
  enableJIT: true,
};

这样，你就成功地将 Tailwind/Windi CSS 应用到你的小程序中了，并且享受到了 JIT 编译模式带来的极速编译速度。

Tailwind/Windi CSS 与 JIT 编译模式的结合，让小程序开发变得更加高效和有趣。如果你还没有尝试过这种组合，那么现在就赶紧行动起来吧！