3. 使用PostCSS进行Tailwind CSS的安装和配置

// 安装Tailwind CSS依赖
npm install -D tailwindcss postcss autoprefixer
 
// 使用npx创建Tailwind CSS配置文件
npx tailwindcss init -p
 
// 接下来，在项目的src/styles/tailwind.config.js中配置Tailwind CSS
// 示例配置
/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // 或 'media' 或 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
 
// 在src/styles/index.css中引入Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
 
// 接下来，在项目的src/index.js中引入样式文件
import './styles/index.css';
 
// 配置PostCSS
// 在package.json中添加PostCSS配置
"postcss": {
  "plugins": {
    "tailwindcss": "./src/styles/tailwind.config.js",
    "autoprefixer": {}
  }
}

以上代码展示了如何安装Tailwind CSS以及如何通过PostCSS来配置和使用它。首先，我们安装了必要的依赖，并使用npx创建了一个Tailwind CSS的配置文件。然后，在一个示例配置中，我们定义了purge路径、darkMode设置、主题扩展和变体扩展。最后，我们在CSS文件中引入Tailwind CSS并在项目入口文件中引入样式文件。同时，在package.json中配置了PostCSS插件。