React搭配Tailwind CSS使用

构建React应用 #

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

安装Tailwind CSS #

需要安装Tailwind CSS及其依赖

npm install tailwindcss postcss autoprefixer

配置 Tailwind CSS #

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

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./public/index.html",
  ],
  theme: {},
  plugins: [],
};

创建 PostCSS 配置 #

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

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

导入 Tailwind CSS #

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

/* src/index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

使用 Tailwind CSS #

// src/components/MyComponent.jsx
import React from 'react';

const App = () => {
  return (
    <div className="bg-blue-500 text-white p-4">
      This is a Tailwind CSS styled component.
    </div>
  );
};

export default App;

运行 React 应用 #

npm start