Keystion

Nuxt + Tailwind + SafeArea

前端3 年前

前置条件 ​

需要先设置修改一下 nuxt.config.js 文件，添加 viewport 配置：

js
// nuxt.config.js
/**
 * 更多配置请参考
 * https://nuxt.com/docs/api/configuration/nuxt-config
 */
export default {
  // ...
  head: {
    meta: [
      { name: "viewport", content: "width=device-width, initial-scale=1" }, // 根据自己的需求修改
    ],
  },
};

更多关于 viewport 的内容可以参考 MDN。

创建自定义插件 ​

在项目根目录下创建 tailwind-plugin-safe-area.js 文件，内容如下：

js
// tailwind-plugin-safe-area.js

module.exports = function ({ addUtilities }) {
  const newUtilities = {
    ".safe-top": {
      paddingTop: "constant(safe-area-inset-top)",
      paddingTop: "env(safe-area-inset-top)",
    },
    ".safe-left": {
      paddingLeft: "constant(safe-area-inset-left)",
      paddingLeft: "env(safe-area-inset-left)",
    },
    ".safe-right": {
      paddingRight: "constant(safe-area-inset-right)",
      paddingRight: "env(safe-area-inset-right)",
    },
    ".safe-bottom": {
      paddingBottom: "constant(safe-area-inset-bottom)",
      paddingBottom: "env(safe-area-inset-bottom)",
    },
  };

  addUtilities(newUtilities);
};

配置 Tailwind ​

tailwind.config.js ​

在 tailwind.config.js 中添加插件配置：

js
// tailwind.config.js

module.exports = {
  // ...
  plugins: [
    require("./tailwind-plugin-safe-area.js"),
  ],
};

tailwind.css ​

css
/* tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities; // 这一行是需要的，如果没有则不生效

使用 ​

在需要使用的地方添加类名即可：

html
<div class="safe-top safe-left safe-right safe-bottom">
        <div class="bg-red-500">SafeArea</div>
</div>

验证是否生效 ​

tailwind

参考 ​

#Nuxt#Tailwind
订阅
webclown.net/文章/Nuxt + Tailwind + SafeArea