使用tailwindcss怎么改element组件样式

使用Tailwind CSS 来改变 Element 组件的样式，您可以使用以下两种方法：

1. 使用 Tailwind CSS 提供的类名，这些类名可以直接应用到 Element 组件上，从而改变其样式。例如，为一个 button 组件添加一个颜色为红色的背景色，可以在 button 组件上添加 `bg-red-500` 这个类名，代码如下：

<el-button class="bg-red-500">按钮</el-button>

2. 自定义样式，您可以使用 Tailwind CSS 提供的配置文件来自定义 Element 组件的样式。例如，您可以在 `tailwind.config.js` 文件中的 `theme.extend` 属性中添加一些自定义的样式，例如：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
      },
      fontFamily: {
        sans: ['Open Sans', 'sans-serif'],
      },
      fontSize: {
        '2xl': '1.5rem',
      },
    },
  },
};

以上代码中，我们定义了一个名为 `primary` 的颜色、一个名为 `sans` 的字体和一个名为 `2xl` 的字体大小。然后，我们就可以在 Element 组件中使用这些自定义的样式了，例如：

<el-button class="bg-primary font-sans text-2xl">按钮</el-button>

这样就可以将按钮的背景色设置为我们自定义的 primary 颜色，字体设置为我们自定义的 sans 字体，字体大小设置为我们自定义的 2xl 字体大小了。