如何使用 Tailwind CSS 给表单添加色彩-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表单是非常常见也是必不可少的一部分。而如何使表单看起来更美观和易于使用呢？一个简便的方法是使用 Tailwind CSS 给表单添加色彩。Tailwind CSS 是一个流行的 CSS 框架，它使用类名方式，使得样式重用变得更加简单。

在本篇文章中，我们将学习如何使用 Tailwind CSS 的类名为表单添加色彩。

添加表单颜色

首先，我们需要在表单元素上添加一些样式类名，以便为它们添加色彩。在这篇文章中，我们将使用 Tailwind 作为示例，但你可以使用任何类似的框架或者自己写 CSS。

1. 背景颜色和边框颜色

可以使用以下类名为表单添加背景颜色和边框颜色：

<form class="bg-gray-100 border border-gray-300"></form>

这将为表单添加灰色的背景和灰色的边框。你可以根据你喜欢的颜色选择不同的背景和边框颜色。

2. 输入框颜色

在输入框上应用以下类名以设置颜色：

<input class="bg-white border border-gray-300 focus:outline-none focus:border-indigo-500 rounded-md py-2 px-4 block w-full appearance-none leading-normal"></input>

这将为输入框使用白色的背景、灰色的边框和半径为 0.25em 的圆角。它还设置了输入框在获得焦点时的外观。

注意：通过「focus:outline-none」类，可以去掉输入框在获得焦点时默认的外发光，但这个做法并不利于可访问性，请自行评估是否使用它。

3. 单选框和复选框颜色

为了更改单选框和复选框的颜色，我们可以在相对应的元素上添加以下类名：

<label class="inline-flex items-center mt-3">
  <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600"><span class="ml-2 text-gray-700">Option 1</span>
</label>

这会为复选框使用灰色图标和字体，但是却没有明显的状态指示。因此，需要在选中时添加其他的类名。

<label class="inline-flex items-center mt-3">
  <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600"><span class="ml-2 text-gray-700">Option 1</span>
</label>
<label class="inline-flex items-center mt-3">
  <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out" checked><span class="ml-2 text-gray-700">Option 2</span>
</label>

这里，我们使用了类名「form-checkbox」。它将为复选框添加适当的样式，并使其更易于调整大小和在不同浏览器中工作。当您使用表格或列表来显示多个复选框或单选框时，这是特别有用的。

4. 按钮颜色

为了为表单添加按钮，我们可以使用以下类名：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
  Submit
</button>

在这个例子中，按钮的颜色是蓝色，当鼠标悬停在其上时，按钮的颜色变成深蓝色。

5. 表单标题颜色

为了使表单标题更容易区分和阅读，可以使用以下类名：

<label class="block text-gray-700 font-bold mb-2" for="username">
  Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="username">

在这个例子中，表单标题是黑色加粗的文本。

结论

如你所见，Tailwind CSS 可以以类似的方式简化表单的样式处理。记住，顺序很重要，通常应该以最外层元素的样式类开始。然后在内部的元素（如表单输入）上添加样式，如果需要将某些样式应用于具体的输入类型，可以使用适当的输入类型特定类名。为了使你的样式更实用，你应该深入研究 CSS 的工作原理和 Tailwind CSS 的文档，以便更好地掌握各种类名的含义和使用方法。

示例代码

// javascriptcn.com code example
<form class="bg-gray-100 border border-gray-300 p-6">
  <label class="block text-gray-700 font-bold mb-2" for="username">
    Username
  </label>
  <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="username">
  <div class="mt-3">
    <label class="inline-flex items-center">
      <input type="radio" class="form-radio h-5 w-5 text-gray-600" name="radio-colors"><span class="ml-2 text-gray-700">Option 1</span>
    </label>
    <label class="inline-flex items-center ml-6">
      <input type="radio" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out" name="radio-colors"><span class="ml-2 text-gray-700">Option 2</span>
    </label>
  </div>
  <div class="mt-3">
    <label class="inline-flex items-center">
      <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600"><span class="ml-2 text-gray-700">Option 1</span>
    </label>
    <label class="inline-flex items-center ml-6">
      <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out" checked><span class="ml-2 text-gray-700">Option 2</span>
    </label>
  </div>
  <div class="mt-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
      Submit
    </button>
  </div>
</form>

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/673435e10bc820c582476099