Tailwind CSS 已成为设计应用程序的非常流行的选项。它使用预先配置了良好默认值的原子实用程序类，以便轻松上手。Remix 是一个 JavaScript 框架，旨在使创建可用于生产的应用程序比以往更加容易。它使用 React 作为 UI 层。将Remix和Tailwind CSS结合使用是一种非常强大的选项，可以快速构建您的应用程序。要在新的 Remix 应用程序中开始使用 Tailwind CSS，我们将运行以下命令来创建 Remix 应用程序或直接跳到Tailwind 设置。如果您更喜欢视频内容，还有一个视频教程。
设置 Remix
运行命令启动CLI。
npx create-remix@latest
为您的项目命名并选择“仅基础”。
将教程代码部署到 Netlify
这是我之前制作的演示网站！如果您想立 即开始使用，您可以在 GitHub 上 fork 本教程的代码存储库，并在几秒钟内将网站部署到您自己的 Netlify 帐户。单击下面的“部署到 Netlify”按钮，然后试用一下！
部署至 Netlify 按钮
自行构建
或者，如果您想从头开始构建代码，您可以按照以 日本whatsapp数据 下指南创建一个新的 Next.js 项目，添加一个新的静态路由，并使用中间件重写 The Edge 上的响应的 HTML。
先决条件
在开始之前，请检查您是否已拥有完成本教程所需的工具。
让我们创建一个新的 Next.js 应用。转到您的终端，并运行以下命令，替换YOUR_PROJECT_NAME您选择的名称。
接下来，为了让魔法发生，我们需要包@netlify/next。在终端中运行以下命令，它将把包作为依赖项安装在项目的 package.json 文件中。
接下来，在您选择的 IDE 中打开项目。
Next.js 提供基于文件的路由。将 JavaScript 或 TypeScript 文件添加到pages目录中会创建一个新的浏览器路由，其名称与文件相同。在 pages 目录中创建一个名为 的新文件static.js，并添加以下代码。
返回终端，通过运行以下命令使用 Netlify CLI 启动开发服务器。
netlify dev
浏览器选项卡将自动在上打开。在浏览器中导航至，即可看到新的静态页面。
带有文本“静态页面”的浏览器窗口屏幕截图
我们将在构建时使用一些基础数据预生成此页面，然后再使用 Next.js 高级中间件对其进行转换。通过导出 getStaticProps从页面文件调用的函数，Next.js 将在构建时使用 返回的数据预渲染此页面 getStaticProps()。
将以下代码添加到static.js，并将 prop 传递message到Page函数中。