用 vscode 写 react 组件时，tailwind 怎么显示 css 提示？

要在 Visual Studio Code (VSCode) 中编写 React 组件并使用 Tailwind CSS 显示 CSS 提示，你需要按照以下步骤操作：

1. 安装 Tailwind CSS 和它的 VSCode 插件。
2. 在项目中安装 tailwindcss/postcss7 和 autoprefixer。
3. 配置 VSCode 以使用 Tailwind CSS 插件。
4. 创建一个新的 React 组件并在其中使用 Tailwind CSS 类。

下面是详细的步骤和示例代码：

1. 安装 Tailwind CSS 和它的 VSCode 插件

首先，确保你已经安装了 Node.js 和 npm。然后，在项目根目录下运行以下命令来安装 Tailwind CSS 和它的 VSCode 插件：

npm install tailwindcss postcss autoprefixer
npm install -D tailwindcss-vscode

2. 在项目中安装 tailwindcss/postcss7 和 autoprefixer

在你的项目根目录下的 package.json 文件中，添加以下依赖项：

{
  "devDependencies": {
    "tailwindcss": "^2.2.15",
    "autoprefixer": "^10.0.2"
  }
}

然后运行 npm install 以安装这些依赖项。

3. 配置 VSCode 以使用 Tailwind CSS 插件

打开 VSCode，点击左侧边栏的扩展图标，搜索 "Tailwind CSS"，找到 "Tailwind CSS" 插件并安装。

接下来，打开你的项目的 tailwind.config.js 文件（如果没有，请创建一个），并添加以下内容：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

保存文件并重启 VSCode。

4. 创建一个新的 React 组件并在其中使用 Tailwind CSS 类

现在，你可以在你的 React 组件中使用 Tailwind CSS 类了。例如，创建一个名为 MyComponent.js 的新文件，并添加以下内容：

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

const MyComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4">
      This is a sample React component using Tailwind CSS.
    </div>
  );
};

export default MyComponent;

在这个例子中，我们使用了 bg-blue-500 和 text-white 这两个 Tailwind CSS 类。你可以根据需要替换为其他类。

现在，当你在 VSCode 中编写 React 组件时，你应该能看到 Tailwind CSS 的 CSS 提示。