如何在React中使用Tailwind添加自定义CSS样式及转换CSS变量代码

1. 扩展Tailwind主题配置 #

在项目根目录的tailwind.config.js中，通过theme.extend添加自定义的颜色、间距、字体等样式变量，这些变量会自动成为可复用的Tailwind类名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        'custom-navy': '#0f172a',
      },
      fontSize: {
        'xl-2': '1.75rem',
      },
    },
  },
  plugins: [],
}

使用时直接调用类名，比如<div className="text-custom-navy text-xl-2">...</div>。

2. 用@layer定义自定义工具类/组件类 #

在全局CSS文件（如src/index.css）中，借助@layer指令添加自定义样式，Tailwind会将这些样式整合到自身的优先级体系中，避免样式冲突：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .custom-btn {
    @apply px-4 py-2 rounded-md bg-custom-navy text-white hover:bg-opacity-90;
  }
}

@layer utilities {
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
  }
}

之后在组件中直接使用这些自定义类：<button className="custom-btn">点击</button>、<h1 className="text-gradient">渐变标题</h1>。

3. 内联自定义样式 #

针对单个元素的特殊样式需求，直接结合Tailwind类名和原生style属性使用，比如设置自定义CSS变量或特殊属性：

<div className="p-5" style={{ '--custom-radius': '12px', borderRadius: 'var(--custom-radius)' }}>
  自定义圆角内容
</div>

原代码是给<span>设置CSS变量--i，在Tailwind中有两种常用写法：

写法一：保留内联style属性 #

Tailwind允许和原生style属性混用，直接保留原逻辑即可，适合仅少数元素使用的场景：

<span style={{ '--i': 1 }}>Some Text is here</span>
<span style={{ '--i': 2 }}>Some Text is here</span>

写法二：自定义工具类复用 #

如果多个元素需要设置--i变量，可在全局CSS中通过@layer定义工具类：

@layer utilities {
  .i-1 {
    --i: 1;
  }
  .i-2 {
    --i: 2;
  }
}

或者在tailwind.config.js中扩展工具类：

module.exports = {
  theme: {
    extend: {
      utilities: {
        'i-1': { '--i': '1' },
        'i-2': { '--i': '2' },
      },
    },
  },
}

之后在组件中直接调用类名：

<span className="i-1">Some Text is here</span>
<span className="i-2">Some Text is here</span>

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