如何使用 CRA 5 在 React 中设置 Tailwind 3？

在本文中，我们将如何使用 CRA 5 在 React 中设置 Tailwind 3，但在此之前，我们需要一些有关此技术的基本 ide。

• React JS：一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 维护。
• TailwindCSS：一个高度可定制的、低级的、实用程序优先的 CSS 框架，用于快速构建自定义用户界面。
• Create React App：帮助我们在不配置 Webpack 和 babel 的情况下创建单页 React 应用程序。
• PostCSS：使用基于 JavaScript 的插件来自动化常规 CSS 操作。
• Autoprefixer：一个自动进行供应商前缀的 postcss 插件。

注意：如果您计划在现有项目中使用 tailwind，请确保您使用的是 CRA 5.0.0 或更高版本。如果您仍在使用 CRA v4，则必须安装 CRACO（创建 React 应用程序配置覆盖）来覆盖 PostCSS 配置。

先决条件：

在继续之前，请确保您的机器上安装了 node 和 npm。如果需要，请访问在 Linux 上安装 Node.js 或在 Windows 上安装 Node.js

创建 React 应用程序和设置：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd fldername

第 3 步：在给定目录中安装 Tailwind、PostCSS 和 Autoprefixer。

npm install -D tailwindcss postcss autoprefixer

注意：如果您要在 Heroku 或任何类似的云平台上部署此应用程序，请确保在构建期间不会清除开发依赖项。或者您可以从上述命令中删除-D标志，以将这些包安装为保存的依赖项。

第 4 步：在项目中配置和导入 Tailwind。

npx tailwindcss init -p

此命令将自动为 tailwind 和 postcss 生成配置文件。现在在目录的根目录中找到 tailwind.config.js，并在 content 属性中添加所有模板文件的路径以清除未使用的 CSS 类。

tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

第 5 步：将 Tailwind 导入我们的应用程序

现在将 tailwind 的指令导入到一个 CSS 文件中，该文件将在整个应用程序中使用/导入。默认情况下，它是index.css ，但如果您不想在整个应用程序中导入 tailwind，您可以使用任何其他 CSS 文件。

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

启动应用程序：使用以下命令从项目的根目录运行应用程序。

npm run start

示例：我们现在将创建一个基本的 div 组件并为其应用一些 CSS 类。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

应用程序.js

import './App.css';
  
function App() {
    return (
        

            

                

                    Geeks For Geeks
            
        
    );
}
  
export default App;

输出：