React搭配Tailwind CSS使用

构建React应用

1npx create-react-app my-tailwind-app
2cd my-tailwind-app

安装Tailwind CSS

需要安装Tailwind CSS及其依赖

1npm install tailwindcss postcss autoprefixer

配置 Tailwind CSS

在项目根目录创建一个 tailwind.config.js 文件并进行配置：

1// tailwind.config.js
2module.exports = {
3  content: [
4    "./src/**/*.{js,ts,jsx,tsx}",
5    "./public/index.html",
6  ],
7  theme: {},
8  plugins: [],
9};

创建 PostCSS 配置

在项目根目录创建一个 postcss.config.js 文件：

1// postcss.config.js
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7};

导入 Tailwind CSS

打开 src/index.css 文件并导入 Tailwind CSS：

1/* src/index.css */
2@import 'tailwindcss/base';
3@import 'tailwindcss/components';
4@import 'tailwindcss/utilities';

使用 Tailwind CSS

 1// src/components/MyComponent.jsx
 2import React from 'react';
 3
 4const App = () => {
 5  return (
 6    <div className="bg-blue-500 text-white p-4">
 7      This is a Tailwind CSS styled component.
 8    </div>
 9  );
10};
11
12export default App;

运行 React 应用

1npm start