如何在React应用程序中整合Tailwind CSS？

React Tailwind实例。在这个例子中，如何将tailwind CSS框架整合到react应用程序中。它还包括如何在组件中使用tailwind的CSS按钮。

React TailwindCSS示例

• 第1步 创建React应用程序
• 第2步 使用npm安装TailwindCSS的依赖关系
• 第3步 创建tailwind配置
• 第4步 编译CSS文件配置
• 第4步 添加tailwind的CSS样式
• 第5步 在反应组件中添加按钮。
• 第6步：测试React应用程序

要创建一个react应用程序，打开终端并运行以下命令。

npx create-react-app react-css-examples

create-react-app 是来自Facebook的react CLI，创建文件和文件夹，Javascript CSS，以及react应用所需的配置。

这需要几分钟的时间，安装所有需要的依赖。一旦它完成了。你应该看到全新的react应用程序，文件夹名称为 -react-CSS-examples 。

接下来，切换到应用程序文件夹。

启动开发服务器

这将启动 react 开发服务器，并打开一个新的浏览器窗口，使用 localhost:3000 网址。

使用npm安装tailwindcss的依赖项

tailwindcss需要对等的依赖--postcss和autoprefixer，因此，我们必须使用下面的npm命令来安装tailwindcss、postcss和autoprefixer依赖。

npm install -D tailwindcss postcss autoprefixer

需要的Npm包

• tailwindcss:具有预定义CSS样式的CSS框架
• postcss:使用javascript将预处理器CSS（sass,less）样式转换为另一个CSS文件的工具。
• autoprefixer:这是一个postcss插件，用于添加供应商前缀选择器。

几分钟后就可以完成安装。

结果是，它安装并在package.json文件中添加了依赖项。

{
 "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.2"
  }
}

添加tailwind配置

接下来，用以下命令创建tailwind.config.js

A:\work\react-css-examples>npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

因此，你会看到在应用程序根文件夹中创建的tailwind.config.js文件。

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

用所有文件的正则表达式配置tailwind配置文件

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

编译CSS文件配置

在src 文件夹中创建一个文件夹css 。

在src/css 文件夹内创建一个新文件input.css

以下是目录结构。

src/
├── css/
         ├── output.css
         └── input.css
├── app.js
└── index.js

在input.css中，请包括tailwind css样式。

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


.btn-blue {
  @apply bg-red-500 text-white;
  
}
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-red-700;
}

接下来，配置package.json来运行并将input.css转换为output.css

请添加compilecss目标，并将其改为start命令

  "scripts": {
    "start": "npm run compilecss && react-scripts start ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "compilecss":"npx tailwindcss -i src/css/input.css -o src/css/output.css "
  }

通过运行npm run start命令，output.css ，在src/css 文件夹中生成。

在react组件中添加按钮

在反应组件App.js中

• 请将output.css导入该组件中
• 更新该组件以包括tailwind按钮的HTML和CSS类名

import './css/output.css';

function App() {
  return (
    
      
        Simple Tailwindo CSS application
      
      
        Submit
      
    
  );
}

export default App;

总结

以创建一个 react 应用程序并将 tailwind CSS 框架添加到其中为例，这是一个循序渐进的指南。