在 React 中设置 Tailwind - 最快捷的方法！🚀 大家好 👋

2025-06-07

在 React 中设置 Tailwind - 最快捷的方法！🚀

大家好👋

大家好👋

我是 Savio。我是一名年轻的开发者，立志成为一名成功的 Web 开发者。我喜欢用 React 构建 Web 应用。我已经证明了自己在前端技术方面的卓越能力。

今天，我将向你展示在 React 应用中设置 Tailwind CSS 的最简单、最快捷的方法。跟我来！一起写出精彩的代码吧！

为什么选择 Tailwind CSS？

顺风.png

Tailwind 的设计注重组件友好性。它可以更轻松地将网站元素拆分成更小的组件，避免使用对象或多余的 CSS 类来污染代码库。此外，每个类都内联在组件中，使其更易于阅读和理解。

创建你的 React 项目

首先，让我们创建一个 React 项目。只需使用以下命令即可创建一个 React 应用⚛️。

npx create-react-app your_react_project_name
Enter fullscreen mode Exit fullscreen mode

设置 Tailwind CSS

现在，让我们检查如何在我们刚刚创建的 React 应用程序上设置 Tailwind CSS。

安装 NPM 包

我们需要一些 NPM 软件包来设置 Tailwind。这些是 npm 软件包：

  • PostCSS：使用 JavaScript 转换 CSS 的工具
  • Autoprefixer： PostCSS 插件用于解析 CSS 并使用来自 Can I Use 的值将供应商前缀添加到 CSS 规则。
  • Tailwindcss：一个包含类的实用优先 CSS 框架

因此，让我们安装所有这些，将命令粘贴到终端⬇️中。

npm install tailwindcss postcss autoprefixer postcss-cli -D
Enter fullscreen mode Exit fullscreen mode

创建tailwind.css

安装 NPM 包后，让我们创建一个名为stylesinsidesrc/文件夹的文件夹。新建一个tailwind.css和。以下是⬇️output.css的文件夹结构src

src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js
Enter fullscreen mode Exit fullscreen mode

因此，将以下内容粘贴到tailwind.css。

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

留空output.css。tailwindcss 会处理此事。

创建配置文件

现在，让我们创建配置文件。首先，让我们在 tailwind css 上生成默认配置文件。粘贴代码⬇️，就可以开始了！

npx tailwindcss init --full
Enter fullscreen mode Exit fullscreen mode

此命令生成一个tailwind.config.js包含所有默认配置的文件。现在，我们还需要生成另外两个文件。

使用以下命令创建tailwindcss-config.js并配置文件。postcss.config.js

npx tailwindcss init tailwindcss-config.js -p
Enter fullscreen mode Exit fullscreen mode

现在，我们不要触碰文件，我们可以跳到最后一部分！

编辑package.json

到了最后一部分，非常简单，我们只需watch:css在 中添加一个新命令即可package.json。我已经设置好了，每次启动应用时都会自动调用。所以，接下来是scripts的部分package.json。

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
  },
Enter fullscreen mode Exit fullscreen mode

现在，如果我们运行，npm start就能看到我们的output.cssget 文件充满了 tailwindcss 的样式。这意味着，一切都完全正确了。🎉

测试 Tailwind CSS

现在，是时候测试了。要使用 的样式tailwind，我们必须将其导入output.css到我们的 中app.js。

import './styles/output.css'
Enter fullscreen mode Exit fullscreen mode

好了，就这样！一切准备就绪！我们来添加一些顺风风格吧。

请随意使用以下代码来测试您的应用程序。

import "./styles/output.css";

function App() {
  return (
    <div className="bg-gray-900 p-20 h-screen flex justify-center items-start flex-col">
      <h1 className="text-5xl text-white">Hello Tailwind 👋</h1>
      <p className="text-gray-400 mt-5 text-lg">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
        consequuntur odio aut nobis ab quis? Reiciendis doloremque ut quo fugiat
        eveniet tempora, atque alias earum ullam inventore itaque sapiente iste?
      </p>
      <button class="p-4 bg-green-600 rounded-lg font-bold text-white mt-5 hover:bg-gray-600">
        Hello Friends 🚀
      </button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

那么，让我们npm start检查一下它是否有效！

截图(2).png

太棒了🎉 就这样，我们在浏览器中看到了好看的应用。我们只用了一小行代码就搞定了。就这些！希望速度很快！🚀

我已经部署好了！来个演示版吧🚀 create-react-app-tailwind.vercel.app

我在GitHub上创建了一个初始仓库- saviomartin/create-react-app-tailwind。如果你真的不想做这些，直接克隆这个仓库并启动应用就好了。一切就绪！

为代码库加星标！🌟 saviomartin/create-react-app-tailwind

👀 总结

好了，就到这里。希望你喜欢这篇文章。欢迎分享你的反馈。我的推特账号是@saviomartin7。快来关注我吧！

在 Github 上关注我@saviomartin，不要错过我的精彩项目！💯

希望你学会了使用 Unsplash API 并创建了一个图片搜索应用，现在就开始构建精彩的应用吧！非常感谢你的反馈！🙌

祝您度过美好的一天！

🌎 让我们联系

🙌 支持

我的项目由咖啡☕推动，给我买一杯吧！

文章来源：https://dev.to/saviomartin/set-up-tailwind-in-react-the-fastest-way-2a4d
Devto 翻译
PREV
WASI - 带有 Wasmtime 的 WebAssembly 系统接口
NEXT
如何创建基于 Web 的终端