在 React JS 项目中设置 Tailwind CSS

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

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

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

npm install -D tailwindcss postcss autoprefixer

然后初始化 Tailwind CSS：

npx tailwindcss init

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

1. 配置 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: [],
};

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

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

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

import './index.css';

1. 启动开发服务器 运行你的 React 应用程序来查看 Tailwind CSS 的实际效果：

npm start

以上是在 React JS 项目中设置 Tailwind CSS的详细内容。更多信息请关注PHP中文网其他相关文章！