如何使用Tailwind CSS为SurveyJS表单设置样式？

1. 先处理SurveyJS默认样式（可选但推荐） #

SurveyJS自带一套样式，很容易和Tailwind冲突，建议先弱化或禁用默认样式：

• 初始化Survey时，通过主题配置覆盖默认CSS变量：

const survey = new Survey.Model(yourSurveyJson);
survey.applyTheme({
  cssVariables: {
    "--survey-primary-color": "inherit",
    "--survey-border-color": "inherit",
    // 把所有默认主题变量设为inherit或transparent，让Tailwind的样式优先生效
  }
});

• 框架项目里别引入SurveyJS的默认CSS文件（比如survey-react-ui.css这类），避免样式打架。

2. 给单个/批量SurveyJS元素加Tailwind类 #

单个问题自定义样式 #

直接在问卷JSON的问题对象里加className属性，把Tailwind类写进去：

{
  "type": "text",
  "name": "email",
  "title": "邮箱地址",
  "className": "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
}

批量统一设置某类组件样式 #

用SurveyJS的onAfterRenderQuestion事件，动态给指定类型的问题加Tailwind类：

survey.onAfterRenderQuestion.add((sender, options) => {
  // 给所有文本输入框加统一样式
  if (options.question.getType() === "text") {
    const inputEl = options.htmlElement.querySelector("input");
    inputEl.classList.add("w-full", "p-2", "border", "border-gray-400", "rounded");
  }
  // 给提交按钮加样式
  if (options.question.getType() === "button") {
    const btnEl = options.htmlElement.querySelector("button");
    btnEl.classList.add("px-4", "py-2", "bg-blue-600", "text-white", "rounded-lg", "hover:bg-blue-700");
  }
});

3. 用Tailwind的@layer全局覆盖样式 #

如果要统一修改SurveyJS的全局容器、标题等元素样式，可以在Tailwind的CSS文件里用@layer定义自定义组件类：

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

@layer components {
  /* Survey容器样式 */
  .survey-wrap {
    @apply max-w-3xl mx-auto p-6 bg-white rounded-xl shadow-md;
  }
  /* 问题标题样式 */
  .survey-question-title {
    @apply text-lg font-semibold text-gray-800 mb-2;
  }
}

然后把这些类加到Survey的容器元素上：

<div id="surveyElement" class="survey-wrap"></div>

4. 复杂组件的样式调整（比如复选框、下拉框） #

对于SurveyJS的复杂组件，需要找到对应的DOM节点再添加Tailwind类：

survey.onAfterRenderQuestion.add((sender, options) => {
  if (options.question.getType() === "checkbox") {
    // 给每个复选框选项加样式
    const checkboxItems = options.htmlElement.querySelectorAll(".survey-checkbox");
    checkboxItems.forEach(item => {
      item.classList.add("flex items-center gap-2 mb-2");
      item.querySelector("input").classList.add("h-4 w-4 text-blue-600");
      item.querySelector("label").classList.add("text-gray-700");
    });
  }
});

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