React 添加 tailwind 支持

1. 控制台执行命令

npm install tailwindcss postcss autoprefixer  

2. 初始化配置文件

npx tailwindcss init -p 

3. 配置 tailwind.config.js 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 配置 postcss.config.js

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

5. 修改 App.tsx 进行测试

function App() {
    return (
        <div className={"flex bg-blue-500 min-h-screen text-white justify-center items-center"}>
            <h1>测试文本全屏居中</h1>
        </div>
    );
}

export default App;