React + Tailwind

介绍

安装 Tailwind

结论

介绍

Tailwind 已被证明是一个非常实用的 CSS 框架。它类似于 Bootstrap，但更加灵活且可定制性更强。在 React 框架的选择上，还有其他一些选项，但 Tailwind 对我来说就是最合适的。所以今天我想分享一个在 React 中轻松配置 Tailwind 的方法！

安装 Tailwind

第一步：依赖关系

首先，假设你已经安装了 Node.js，你需要做的就是npm install tailwindcss将其保存为项目的依赖项。

步骤 2：tailwind.css

tailwind.css在你的文件下创建一个文件src/。然后，将以下内容添加到该文件中：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 3：脚本

接下来，我们需要启用 Tailwind CSS，以便在应用程序运行时将 CSS 编译到一个新文件中。为此，我们需要运行一些预构建脚本。请进入您的配置文件package.json并更新脚本，内容如下：

"scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

tailwind.output.css当我们运行应用程序时，最终会创建一个新文件。

第四步：使其易于访问

现在我们只需要让tailwind.output.css它对整个应用程序可用。前往该index.js文件，并将这行代码放置在文件顶部的任意位置：

import './tailwind.output.css';

就是这么简单！你已经准备好在 React 应用中使用 Tailwind 了。只需运行以下命令即可启动它npm start！

结论

作为一个并非专业设计师的人，我发现即使在更高级的应用程序/库中，Tailwind 也能很好地发挥作用。设计本身就是一门学问，很容易在深入研究应用程序的底层逻辑之前，就沉迷于用户界面设计而忽略其他方面。最好先简化设计，确保所有功能都能正常运行，然后再考虑美观。

希望你们喜欢这个快速设置教程！
周二快乐！🎉