Logo

菜单

发布于 2026-01-06 6 阅读
0

几分钟内快速上手 React + TypeScript + Tailwind + 类名

几分钟内快速上手 React + TypeScript + Tailwind + 类名

在本期快速入门教程中，我们将使用create-react-appTailwind 启动一个项目，并了解如何使用基于状态的样式快速启动并运行classnames。

安装

首先，我们需要使用 TypeScript 创建 React 应用create-react-app。

其次，我们将安装今天所需的其他软件包。

# Create the app
npx create-react-app hello-tailwind --template typescript
# Change into our new app
cd hello-tailwind
# Using Yarn
yarn add tailwindcss classnames @types/classnames
Enter fullscreen mode Exit fullscreen mode

正在更新 package.json

这部分内容从Dave Cedia 的帖子中汲取灵感，并进行了现代化的更新。

让我们更新脚本，使其包含以下内容：

{
  "scripts": {
    "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind"
  }
}
Enter fullscreen mode Exit fullscreen mode

prestart脚本prebuild会在任何start其他build脚本运行之前运行。我们指示它构建index.css文件并将其输出到src/tailwind.output.css。

添加 Tailwind 导入

更新src/index.css后应如下所示：

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
Enter fullscreen mode Exit fullscreen mode

然后，我们需要更新index.tsx文件，将导入语句从更改index.css为tailwind.output.css：

import React from "react"
import ReactDOM from "react-dom"
import "./tailwind.output.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()
Enter fullscreen mode Exit fullscreen mode

现在我们准备出发了！

尝试使用 App.tsx

运行程序yarn start以启动并运行我们的应用程序。

启动完成后，让我们将App.tsx文件更新为如下所示：

import React from "react"

function App() {
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className="p-3 rounded-sm bg-blue-500 hover:bg-blue-700"
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

运行该应用程序后，我们应该会看到以下内容：

基础应用程序

基础应用程序

这些类名来自Tailwind 文档。文档非常易于使用！搜索您的 CSS 属性并从那里应用它们。

此外，如果您是 VSCode 用户，还可以查看他们的VSCode 扩展程序，该程序可以帮助您自动完成类名！

根据逻辑更新 App.tsx 文件

现在我们可以添加基于逻辑的useState切换功能，在不同的状态之间切换。

更新App.tsx后显示以下内容：

import React from "react"
// import cx from 'classnames';

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false)
  console.log("toggle", toggle)

  const buttonClasses = toggle
    ? "bg-red-500 hover:bg-red-500"
    : "bg-blue-500 hover:bg-blue-500"
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={`p-3 rounded-sm ${buttonClasses}`}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

现在运行该应用程序后，如果我们点击按钮，就会看到背景变成红色！

切换应用程序状态

切换应用程序状态

使用类名

对于更复杂的逻辑，我们可以使用classnames 包来帮助我们定义要应用哪些类名。

import React from "react"
import cx from "classnames"

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false)

  const buttonClasses = cx({
    "bg-blue-500 hover:bg-blue-700": !toggle,
    "bg-red-500 hover:bg-red-500": toggle,
  })
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={`p-3 rounded-sm ${buttonClasses}`}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

虽然这个例子很简单，但当你需要根据 props 定义变体时，它就显得非常重要了。我们可以将 `{{ props }}` 替换toggle为诸如`{{ props status === 'error'}}` 之类的逻辑，以反映应用程序中不同的可能性。

结论

这是一篇简短的晨间咖啡博文，内容是关于如何快速上手 Tailwind，而不涉及具体细节。

Tailwind 享有盛誉，名不虚传——我强烈建议您利用这个平台来体验它还提供的其他功能。

资源和延伸阅读

  1. VSCode 扩展
  2. 顺风 - 安装
  3. 顺风 - Flex
  4. Tailwind - 文本颜色
  5. 顺风 - 背景色
  6. Tailwind - 边界半径
  7. 顺风 - 填充
  8. 与 CRA 的顺风——戴夫·塞迪亚
  9. 类名 - GitHub

图片来源：Mael BALLAND

原文发布于我的博客。关注我的推特账号@dennisokeeffe92，获取更多精彩内容。

文章来源：https://dev.to/okeeffed/getting-started-with-react-typescript-tailwind-classnames-in-minutes-1j4l
下一代 ORM：Prisma Pr...
OverVue v2，一款面向 V...