使用 Typescript + Tailwind 支持创建 React 应用

介绍

你好！在这里，我将尝试解释如何使用 Typescript 和 Tailwind 设置 React 应用程序。

使用 Typescript 创建 React 应用

这部分非常简单，只需在 create-react-app 命令中添加 template 选项即可。
“app” 可以替换为其他名称。

安装完成后，只需通过简单的 cd 进入目录即可。

npx create-react-app app --template typescript

cd app

添加 Tailwind

最后我们需要添加 Tailwind。首先我们需要安装所需的模块

npm install -D tailwindcss postcss autoprefixer 

接下来我们需要创建配置文件，这可以通过以下命令轻松完成：

npx tailwindcss init -p

接下来打开创建的“tailwind.config.js”文件并将以下内容添加到“内容”中：

content: [
    './src/**/*.{js,jsx,ts,tsx}',
],

接下来我们需要将 Tailwind 指令添加到“src/index.css”文件中，在文件顶部添加以下内容：

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

检查是否有效

现在我们已经设置好了 Typescript 和 Tailwind，我们需要检查它是否正常工作。
打开“src/App.tsx”并将其更改为以下内容：

import React from 'react';
import './App.css';

function App() {
  return (
    <h1 className="text-3xl font-bold underline text-red-600">
      Simple React Typescript Tailwind Sample
    </h1>
  );  
}

export default App;

完成，现在让我们启动应用程序。

npm start

浏览器应该会自动打开并显示首页。如果一切正常，标题应该会变成粗体、带下划线且红色。😀

此示例的源代码可以在这里找到：
https://github.com/ethand91/react-typescript-tailwind

喜欢我的作品吗？我发布各种主题的帖子，如果你想了解更多，请点赞并关注我。
我也喜欢咖啡。