如何在 React 中使用 Tailwind CSS 来配置 Create React App？ [关闭]

Posted 2023-03-07

【中文标题】如何在 React 中使用 Tailwind CSS 来配置 Create React App？ [关闭]

【英文标题】：How to use Tailwind CSS in React to configure Create React App? [closed]

【发布时间】：2021-09-06 15:23:44

【问题描述】：

我对使用 tailwindcss 和 react 应用程序很陌生。我已经按照 tailwindcss 的指南进行了操作，但效果并不好，而且还提供了很多越野车。如果有人有想法使用顺风启动项目并做出反应，请分享您的经验。

谢谢！

【参考方案1】：

这是个好问题。根据我的经验，我已经开始使用 React 样板项目。 首先，打开你的终端并输入以下命令来创建一个新项目。

#using NPX
npx create-react-app tailwindreact-app

#using NPM
npm init react-app tailwindreact-app

#using yarn 
yarn create react-app tailwindreact-app

create-react-app 是官方的 React 构建工具，用于搭建新的 React 项目。

转到您的app 目录

cd tailwindreact-app

接下来，安装 Tailwind 及其依赖项

#using npm
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

#using Yarn
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D 

Create React App还不支持PostCSS 8，所以需要安装兼容Tailwind CSS v2的PostCSS7版本

接下来，我们需要安装CRACO来配置Tailwindcss

#using npm
npm install @craco/craco

#using Yarn
yarn add @craco/craco

首先，手动或使用以下命令在基本目录中创建 CRACO 配置文件：

touch craco.config.js

接下来，将 tailwindcss 和 autoprefixer 作为 PostCSS 插件添加到您的 CRACO 配置文件中：

// craco.config.js
module.exports = 
  style: 
    postcss: 
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    ,
  ,

将您的应用配置为使用craco 来运行开发和构建脚本。

打开您的package.json 文件并将scripts 的内容替换为：

  "scripts": 
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  

创建默认配置脚手架：

npx tailwindcss init

此命令在项目的基本目录中创建一个tailwind.config.js。该文件包含 Tailwind 的所有默认配置。我们还可以添加一个可选的 --full 标志来生成具有 Tailwind 附带的所有默认值的配置文件。

在您的 CSS 中包含 Tailwind

在您的src 文件夹中创建一个名为styles 的文件夹。这是存储所有样式的地方。

在该文件夹中，创建一个tailwind.css 和一个index.css 文件。

index.css 文件是我们将导入 Tailwind 的基本样式和配置的地方。 tailwind.css 将包含 index.css 的编译输出。

Tailwind CSS 组件、实用程序和基本样式

将以下内容添加到您的 index.css 文件中。

//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

``@tailwind 是一个尾风指令，用于注入默认的base styles、components、utilities 和自定义配置。

@tailwind base **注入 Tailwind 的基本样式，它是 Normalize.css 和一些附加基本样式的组合。

@tailwind components 注入由您的 tailwind 配置文件中定义的插件注册的任何组件（小的可重用样式，如按钮、表单元素等）类。

在组件导入下方是您可以添加任何自定义组件类的地方 - 您希望在默认实用程序之前加载的内容，以便实用程序仍然可以覆盖它们。

这是一个例子：

.btn  ... 
.form-input  ... 

@tailwind utilities 注入 Tailwind 的所有实用程序类（包括默认和您的实用程序），它们是根据您的配置文件生成的。

在实用程序导入下方，您可以添加需要的任何自定义实用程序，这些实用程序不是 Tailwind 开箱即用的。

例子：

.bg-pattern-graph-paper  ... 
.skew-45  ... 

Tailwind 在构建时交换所有这些指令，并用生成的 CSS 替换它们。

配置您的应用以构建您的 CSS 文件 要将您的应用配置为在每次运行 npm start 或 yarn start 命令时使用 CRACO 构建样式，请打开您的 package.json 文件并将 scripts 的内容替换为：

 "scripts": 
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  ,

要将您的 CSS 导入应用，请打开您的 index.js 文件并导入您的 Tailwind 样式：

import './styles/tailwind.css';

删除项目根目录中的index.css 和app.css 文件，并分别删除Index.js 和App.js 文件中对应的导入语句。

您的index.js 文件应类似于以下内容：

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/tailwind.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

就是这样。 我希望我的经验对其他人有所帮助。

【讨论】：

我没有测试它，但你的答案非常详细。谢谢！ :)

好的。我会尽力在我的发展方面帮助他人。

【参考方案2】：

我已经关注了tailwind的官方文档，可以在here找到

【讨论】：

当我配置了 tailwind css 时，出现了 npm install 错误，并且无法在 react 样板中注入 tailwind。

如果你能把错误贴出来... 很容易解决这个错误