在 React JS 项目中设置 Tailwind CSS

如果你还没有 React 应用程序，请创建一个：

npx create-react-app my-app
cd my-app

安装 Tailwind CSS 运行以下命令来安装 Tailwind CSS 及其依赖项：

npm install -D tailwindcss postcss autoprefixer

然后初始化 Tailwind CSS：

npx tailwindcss init

这将在你的项目中创建一个 tailwind.config.js 文件。

配置 Tailwind 编辑 tailwind.config.js 文件以配置内容路径。将内容键替换为以下内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Scan these files for Tailwind classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

将 Tailwind 指令添加到 CSS 在 src 文件夹中，找到或创建一个名为 index.css 的文件。添加以下 Tailwind 指令：

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

在 React 中导入 CSS 确保 index.css 已导入到你的项目中。在 src/index.js 文件中，你应该有：

import './index.css';

启动开发服务器运行你的 React 应用程序以查看 Tailwind CSS 的实际运行：

npm start

CLIS.CC

在 React JS 项目中设置 Tailwind CSS