如何在React Vite+Tailwind CSS v4项目中正确添加tw-类前缀？

你的问题出在Tailwind v4已经废弃了旧的@import带参数的写法，而且虽然v4不强制要求配置文件，但自定义前缀这类配置还是需要通过配置文件或者内联配置来实现，具体步骤如下：

• 方式一：用配置文件（推荐）

  1. 在项目根目录创建tailwind.config.js文件，写入以下内容：

     /** @type {import('tailwindcss').Config} */
     export default {
       prefix: 'tw-',
       content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], // 确保扫描到所有使用Tailwind类的文件
     }
     

  2. 修改你的index.css文件，先引入配置再加载Tailwind的基础样式：

     @config './tailwind.config.js';
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

• 方式二：内联配置（无需单独配置文件）
  如果你不想创建额外的配置文件，可以直接在CSS的每个Tailwind指令后加配置：

  @tailwind base with { prefix: 'tw-' };
  @tailwind components with { prefix: 'tw-' };
  @tailwind utilities with { prefix: 'tw-' };
  

配置完成后，原来的bg-red-500这类类名就要写成tw-bg-red-500才能生效，之前的语法错误也会消失。

内容的提问来源于stack exchange，提问作者Sonali