在 React JS 项目中设置 Tailwind CSS-js教程-PHP中文网

在 React JS 项目中设置 Tailwind CSS

Barbara Streisand

发布： 2024-12-16 13:27:18

原创

317 人浏览过

Set Up Tailwind CSS in a React JS Project

如果您还没有 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

登录后复制

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