使用 Tailwind CSS、Next.js、Ionic Framework 和 Capacitor 构建移动应用程序

2025-06-09

使用 Tailwind CSS、Next.js、Ionic Framework 和 Capacitor 构建移动应用程序

用于构建响应式 Web 应用程序的非常流行的堆栈是Vercel的Tailwind CSS和Next.js。

Tailwind 是一个实用优先的 CSS 框架，在许多情况下，它取代了编写自定义类名甚至任何 CSS 的需要，通过小型 CSS 构建块和灵活的设计基础，可以轻松设计响应式 Web 应用程序。

Next.js 是一个用于构建高性能 React 应用程序的 React 框架，也是在 Web 上构建生产 React 应用程序的领先环境之一。

随着这些技术的发展，它们越来越多地被结合用于 Web 应用开发（事实上，Next.js 正在编写官方 Tailwind 集成的 RFC）。这促使许多项目用户询问它们是否也可以用于构建移动应用。

事实证明，他们可以！当与Ionic Framework和Capacitor配合使用时，它们非常适合跨平台移动开发。

当我开始使用这些技术时，我意识到每种技术都非常适合组合移动堆栈，并且我希望为其他有兴趣使用这些技术构建真正的 iOS 和 Android 应用程序的人奠定坚实的起步基础。

如果您对所有项目名称以及它们如何协同工作感到困惑，不用担心，我会逐一分解每个项目所涉及的技术栈的各个部分，并提供一些视觉效果和代码示例，演示所有项目如何协同工作。最后，我将分享一个入门项目，其中已安装并运行了这些技术，可以作为您下一个应用的基础。

堆栈可视化

Capacitor Tailwind Next.js Ionic 应用程序中的层图

上面是使用 Next.js 构建的 React 应用程序的实时屏幕截图，该应用程序使用 Ionic Framework 和 Tailwind 来获得 UI 体验，并使用 Capacitor 将该应用程序原生部署到 iOS 并提供对该应用程序使用的任何原生 API 的访问。

这里有很多项目协同工作，以提供完整的体验。为了直观地展示，我尝试在上图中叠加不同的图层，并展示它们与每个项目的对应关系。

我们可以看到，Capacitor 关注的是应用程序的整个应用程序和设备层，Next.js 关注的是我们的代码和 UI 正在运行的整个 Web/React 应用程序，然后 Ionic 处理“平台 UI”，包括导航工具栏（包括系统标题和工具栏按钮）以及底部选项卡。

最后，使用 Tailwind 来设置样式并自定义每个页面的内容，大部分特定于应用程序的样式都会在这里进行。

移动 UI 和本机运行时

如果您使用 Web 技术构建的经验主要是针对桌面或响应式网站，那么您可能不熟悉以移动设备为中心的库 Ionic Framework 和 Capacitor。

Ionic 框架是一个跨平台、专注于移动端的 Web UI 库。它提供了约 100 个组件，这些组件实现了 iOS 和 Android 平台的 UI 标准，例如工具栏、导航/过渡、标签页、对话框窗口等等。最大的亮点在于，这些组件可以在 Web 上运行，并且可以在 React、Angular、Vue 等框架或纯 HTML/CSS/JS 中使用。

Ionic Framework 非常受欢迎，为应用商店中超过 15% 的应用提供支持。

过去，Ionic 框架通常会与 Cordova 之类的项目配对，后者提供了原生的 iOS 和 Android 构建和运行时功能。然而，大多数新的 Ionic 框架应用都使用 Capacitor 来处理这部分堆栈。

Capacitor是由 Ionic Framework 背后的团队构建的一个项目，专注于以Web 为中心的移动应用程序的原生方面。

Capacitor 提供了一个插件层和运行时，可以在 iOS、Android、桌面和 Web 上原生运行 Web 应用程序，并提供对设备 API 和功能的完全访问（包括通过编写额外的原生 Swift/Java 代码来扩展 Web 环境）。

因此，任何流行的 Web 技术和库都可以用于通过 Capacitor 构建移动应用程序，然后使用相同的代码将相同的应用程序部署到 Web 和桌面。

更棒的是，Capacitor在 2020 年 JS 现状调查中，在热门移动和桌面工具中满意度排名第二！如果您上一次使用 Cordova 进行移动开发，我们相信您会发现 Capacitor 带来了巨大的改进。

Next.js + Tailwind CSS + Ionic Framework + Capacitor Starter 简介

现在您已经了解了这些技术如何协同工作，使 Web 开发人员可以轻松构建移动应用程序，让我们来看一个真实的演示和启动项目（GitHub repo）：

Next.js Tailwind 离子电容器启动器

让我们看一下主 Feed 页面（如上图所示），以了解所使用的不同技术如何协同工作的示例：



import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonButton,
  IonIcon,
  IonContent,
} from '@ionic/react';
import { useState } from 'react';
import { notificationsOutline } from 'ionicons/icons';
import Notifications from './Notifications';

import Card from '../ui/Card';
import { getHomeItems } from '../../store/selectors';
import Store from '../../store';

const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
  <Card className="my-4 mx-auto">
    <div>
      <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
    </div>
    <div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
      <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">
        {type}
      </h4>
      <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">
        {title}
      </h2>
      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">
        {text}
      </p>
      <div className="flex items-center space-x-4">
        <img src={authorAvatar} className="rounded-full w-10 h-10" />
        <h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">
          {author}
        </h3>
      </div>
    </div>
  </Card>
);

const Feed = () => {
  const homeItems = Store.useState(getHomeItems);
  const [showNotifications, setShowNotifications] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Feed</IonTitle>
          <IonButtons slot="end">
            <IonButton onClick={() => setShowNotifications(true)}>
              <IonIcon icon={notificationsOutline} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding" fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Feed</IonTitle>
          </IonToolbar>
        </IonHeader>
        <Notifications
          open={showNotifications}
          onDidDismiss={() => setShowNotifications(false)}
        />
        {homeItems.map((i, index) => (
          <FeedCard {...i} key={index} />
        ))}
      </IonContent>
    </IonPage>
  );
};

export default Feed;
Enter fullscreen mode Exit fullscreen mode

如我们所见，我们使用 Ionic Framework 控件（、、、IonPage等）作为页面结构（这些控件实现了 iOS 和 Android 平台特定的样式和导航/过渡行为） ，然后我们使用 Tailwind 作为我们自定义设计所在的页面内容（往往在）。IonHeaderIonContentIonToolbarIonContent

如果我们查看另一个只是简单列表的页面，我们会发现我们根本没有使用 Tailwind，因为用户期望该页面是标准的 iOS / Android 列表和切换按钮（此处为代码）：

设置页面示例

因此，我们倾向于在包含大量自定义设计和资源的页面上更多地使用 Tailwind。这是设计使然。通常，在构建原生移动应用时，我们希望尽可能地遵循平台惯例，尤其是在体验和性能敏感的元素（例如列表、工具栏、选项卡和表单输入）方面。然而，对于Feed拥有高度自定义 UI 体验的页面，我们最终会从 Tailwind 中获益良多。

因此，一般来说，考虑何时更多地依赖 Ionic Framework 以及何时依赖 Tailwind 的方法是，当您的 UI 体验将大量使用典型的移动 UI 元素（更喜欢 Ionic 组件）或何时它将更加定制（更喜欢 Tailwind）时。

最后，本入门指南还附带一些关于文件夹结构和状态管理的小建议。对于状态管理，我们使用了pullstate库，这是一个简单但功能强大的状态管理库，带有基于 hooks 的 API（我在这里写了更多关于它的内容）。如果想使用其他库，可以轻松移除它。

部署到 iOS 和 Android

使用 Capacitor 及其本地 CLI 工具，可以轻松将该应用部署到 iOS 和 Android。运行后npm install，您将可以npx cap使用以下命令，从而实现原生开发工作流程：

要添加 iOS 或 Android 本机项目：



npx cap add ios
npx cap add android
Enter fullscreen mode Exit fullscreen mode

然后，构建 Next.js 应用程序，将其导出并将其复制到本机项目：



npm run build
npm run export
npx cap copy
Enter fullscreen mode Exit fullscreen mode

每次构建输出发生变化时都需要执行此命令。不过，您可以在开发过程中启用 LiveReload（README更多信息请参阅）。

然后，您可以启动 Xcode 和/或 Android Studio 来构建和运行本机项目：




npx cap open ios

npx cap open android
Enter fullscreen mode Exit fullscreen mode




后续步骤Next steps

如果您有兴趣使用 Next.js 或 Tailwind 等热门 Web 开发项目构建移动应用，希望本入门指南能为您使用 Web 技术构建下一个应用提供灵感和坚实的基础。值得一提的是，同样的方法也可以用于其他 UI 库（例如 Material、Bootstrap 或您自己的库！）。

准备就绪后，深入研究启动项目，按照Capacitor和Ionic Framework文档进行构建！

鏂囩珷鏉ユ簮锛�https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij
Devto 翻译
PREV
Web 开发人员构建移动应用程序的最简单方法
NEXT
Ionic React 公告