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

最新推荐文章于 2024-06-13 14:25:03 发布

cunqu9743

最新推荐文章于 2024-06-13 14:25:03 发布

阅读量4.2k

点赞数 2

文章标签： java css python html vue ViewUI

如果您一直与最新CSS框架保持同步，那么您可能已经听说过这个最新消息： Tailwind CSS 。根据其文档，“ Tailwind是实用程序优先CSS框架，用于快速构建自定义用户界面。”

实际上，这意味着使用各种紧密映射到基础CSS属性的类。例如，将.text-center类的元素应用于元素意味着我们将其text-align属性设置为center 。很简单，对不对？

使用这样的实用程序类可以使我们花费更多的时间进行设计迭代，并避免过早抽象CSS。然后，一旦我们对设计感到满意，Tailwind将使我们轻松将实用程序提取到组件类中。

现在，我确定您知道，即使提到实用程序框架，也一定程度上引起了人们的注意。在我们开始之前，在我的Twitter或意见大喊大叫甚至提一个实用的框架，让我们只花一点时间来记住，顺风是我们只使用一个可能的工具。

如果您不想将其添加到您的工具箱中，那么您就不用担心了！但是，如果您有兴趣至少了解这个新工具，那么让我们一起看看如何构建注册表单。

事不宜迟，让我们用Tailwind建立一个新项目，编写一些HTML并设置样式。

设置

让我们开始创建一个目录以供我们使用。在您的终端上，导航到您要创建项目的目录，然后运行mkdir <your-project-name> 。现在，让我们cd到我们的新项目，并按照顺风安装指南。

由于我们希望看到Tailwind可以执行的所有操作，因此请使用以下命令将其安装在npm或Yarn中。

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

安装了Tailwind之后，我们现在可以通过运行./node_modules/.bin/tailwind init来生成配置文件。这将在项目的根目录中为我们生成一个tailwind.js文件。在此文件中，我们可以根据项目的需要调整Tailwind的默认设置。对于这个项目，我们不必改变任何事情。

现在，让我们创建一个CSS文件，在这里我们可以管理我们自己CSS并注入Tailwind样式。为此，我们可以从项目目录中运行touch styles.css 。

在这个新文件中，我们可以使用Tailwind的@tailwind指令将preflight和utilities样式注入我们CSS中。 preflight包含所有基本样式和一些浏览器样式规范化，而utilities会添加我们在配置文件中指定的所有实用程序类。因此，我们的styles.css文件应如下所示：

@tailwind preflight;

/* Here we can add any custom overrides */

@tailwind utilities;

/* Here we can add our own utilities or custom CSS */

如果您使用的是PHPStorm，而CSS文件中@tailwind的红色花样让您烦恼，只需在使用它的上方添加/*noinspection CssInvalidAtRule*/ 。

完成所有设置后，我们可以运行./node_modules/.bin/tailwind build styles.css -o main.css生成我们要在项目中使用CSS文件。这似乎有点乏味，但是请放心！ Tailwind可与适当的构建工具（例如Webpack，Gulp或Laravel Mix）一起使用，因此在较大的项目中，您只需对其进行设置即可，而不必理会。

这将解决我们的Tailwind设置！现在，我们可以开始编写HTML代码了。

我们HTML

在样式化注册表单之前，我们需要构建它！首先，我们需要一个简单的index.html文件。因此，您可以从根目录运行touch index.html创建文件。然后，我们可以添加以下代码片段以开始使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>

</body>
</html>

如您所见，这是您的典型HTML页面。这里唯一的麻烦是我们正在导入main.css文件，并且为页面赋予了描述性标题。现在，让我们开始构建我们的注册表单！

首先，让我们在<body>标签的内部添加两个嵌套的<div>元素。

<body>
  <div>
    <div>
          
    </div>
  </div>
</body>

我们将使用外部<div>进行页面定位，而内部<div>将作为表单的包装器。现在，在内部<div> ，我们可以添加<h1>来标记表单，并添加<form> 。

<div>
  <h1>Sign Up</h1>
  <form action="/" method="post">
              
  </form>
</div>

我们现在真的在用煤气做饭！要完成表单，我们只需要添加<label>元素， <input>元素和<button> 。添加它们时，让我们将每个<label> <input>对包装在<div>以便它们保持在一起。

<form action="/" method="post">
  <div>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name">
  </div>
  <div>
    <label for="last_name">Last Name</label>
    <input type="text" name="last_name" id="last_name">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
  </div>
  <button type="submit">Create Account</button>
</form>

最后，让我们在表单下方添加一个链接以访问登录页面。

<div>
  <!-- Form is here -->
  <a href="/login">Already have an account?</a>
</div>

放在一起，我们HTML将如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div>
    <div>
      <h1>Sign Up</h1>
      <form action="/" method="post">
        <div>
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" id="first_name">
        </div>
        <div><label for="last_name">Last Name</label>
          <input type="text" name="last_name" id="last_name">
        </div>
        <div>
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
        </div>
        <div>
          <label for="password">Password</label>
          <input type="password" name="password" id="password">
        </div>
        <button type="submit">Create Account</button>
      </form>
      <a href="/login">Already have an account?</a>
    </div>
  </div>
</body>
</html>

很简单吧？现在，当我们看到页面上的呈现方式时，我们应该看到如下所示：

如果看起来缺少<input>不要惊慌；那只是浏览器在工作时重置。最后，我们准备看一下Tailwind CSS的全部含义。

使用Tailwind CSS

作为我们优秀的开发人员，让我们采用移动优先的方式来设计我们的注册表单。因此，在较小的视口宽度为400px ，我们的页面如下所示：

设置表单字段样式

让我们通过设置<input>的样式开始使用Tailwind。首先，让我们添加一个边框，以便我们可以在页面上看到它。为此，我们只需要添加.border类。因此，现在我们的名字<input>将如下所示：

<input class="border" type="text" name="first_name" id="first_name">

现在我们可以在屏幕上看到它了！

那有多容易？让我们继续，添加一些填充并使文本颜色更浅一些。为此，我们只需要添加以下类： .py-2 ， .px-3和.text-grey-darkest .px-3 。

<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">

在前两个类中，我们利用了Tailwind附带的填充比例，并将其垂直和水平应用于元素。如果要定义自己的比例，只需跳入配置文件并将其更改为所需即可。在上一课中，我们使用Tailwind的默认调色板，并将元素的颜色更改为最深的灰色。

让我们更进一步。现在，我们可以将<label>放置在<input>之上，并给它们一些样式。

<div class="flex flex-col mb-4">
  <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
  <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
</div>

看看，我们的名字字段看起来很棒！最好的部分是，我真的不必解释这些类在做什么—他们可以自我解释！但是正好我们都在同一个页面上，让我快速浏览它们。

外部<div>的display属性通过.flex设置为flex ，其flex-direction设置为.flex-col column 。然后，由于.mb-4 ，它的底部有一点空白。

同时，由于.mb-2 ，我们的<label>在底部的边距更少。其余的类使我们的文本1.125rem大写，粗体，大（ 1.125rem ）和调色板中最暗的灰色。

总而言之，这是一种非常便捷的方式来设计我们的领域！现在，让我们将这些样式添加到其余字段中，对按钮和链接进行样式设置，然后查看我们正在使用的样式。

<form class="mb-6" action="/" method="post">
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
    <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
  </div>
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
    <input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
  </div>
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
    <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
  </div>
  <div class="flex flex-col mb-6">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
    <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
  </div>
  <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
</form>
<a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>

添加悬停样式

现在情况开始好转了！在这段代码中，所有内容都应该是不言自明的。但是，我们添加了一个新东西：状态变量。如果我们看一下<button> ，我们可以看到一个正在运行的。

<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>

如果您看一下.bg-teal之后的类，您会发现我们已经为.bg-teal-dark添加了hover:前缀。这些前缀使我们可以将元素样式化为悬停和聚焦，还可以让我们使用断点！总而言之，这是Tailwind的一项非常强大的功能，它使我们可以快速创建动态的，响应式的UI 。

现在，通过将表单放置在屏幕中间并添加彩色页面背景来包装移动视图。

<div class="flex items-center h-screen w-full bg-teal-lighter">
  <div class="w-full bg-white rounded shadow-lg p-8 m-4">
    <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
    <form class="mb-4" action="/" method="post">
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
        <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
      </div>
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
        <input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
      </div>
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
        <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
      </div>
      <div class="flex flex-col mb-6">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
        <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
      </div>
      <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
    </form>
    <a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>
  </div>
</div>

Bada bing bada boom，我们为自己准备了一个美观的移动签约表格！但是，当我们在更大的屏幕上查看时会发生什么？

响应式设计

它肯定比我们的普通HTML更好，但是需要一些工作。让我们使用一些响应状态变量，并为更大的屏幕设置样式。

<div class="flex items-center h-screen w-full bg-teal-lighter">
  <div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
    <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
    <form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
      <div class="flex flex-col mb-4 md:w-1/2">
        <label class="mb-2 uppercase tracking-wide font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
        <input class="border py-2 px-3 text-grey-darkest md:mr-2" type="text" name="first_name" id="first_name">
      </div>
      <div class="flex flex-col mb-4 md:w-1/2">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest md:ml-2" for="last_name">Last Name</label>
        <input class="border py-2 px-3 text-grey-darkest md:ml-2" type="text" name="last_name" id="last_name">
      </div>
      <div class="flex flex-col mb-4 md:w-full">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
        <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
      </div>
      <div class="flex flex-col mb-6 md:w-full">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
        <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
      </div>
      <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
    </form>
    <a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>
  </div>
</div>

多亏了我们的响应前缀，我们的注册表单看起来好多了！让我们来看一些示例的<form> 。

<form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
  <!-- ... -->
</form>

就像我们的hover:前缀一样，我们仅在满足该条件时才应用带前缀的类。在这种情况下，这意味着我们仅在页面的min-width为768px时才将flex样式应用于<form> 。

将实用程序提取到组件中

现在我们已经完成了原型的原型制作，我们可以将实用程序类提取到组件类中。让我们从提取<input>类开始。

<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">

如我们所见，我们的<input>有两个类。我们可以使用Tailwind的@apply指令将它们提取到CSS中。 @apply允许我们将实用程序类使用的样式应用于新类。因此，在styles.css文件的底部，我们可以添加以下内容：

.field {
  @apply .border .py-2 .px-3 .text-grey-darkest;
}

然后，一旦我们重新编译了Tailwind文件，我们的<input>就可以拥有.field类。

<input class="field" type="password" name="password" id="password">

如您所见，借助Tailwind，我们可以充分利用实用程序和组件类！我们可以使用实用程序类快速进行迭代，并且当我们开始看到模式时仍然可以提取组件类。

更好的是，我们可以将它们混合在一起以处理那些一次性的情况，这些情况下专用组件类没有意义。

最终CSS

将这种思想应用于我们的其余代码，我们CSS和HTML将看起来像这样。

@tailwind preflight;

/* Here we can add any custom overrides */

.field {
  @apply .border .py-2 .px-3 .text-grey-darkest;
}

.field-label {
  @apply .uppercase .font-bold .text-lg .text-grey-darkest .mb-2;
}

.field-group {
  @apply .flex .flex-col;
}

.btn {
  @apply .block .text-white .uppercase .text-lg .p-4 .rounded;
}

.btn-teal {
  @apply .bg-teal;
}

.btn-teal:hover {
  @apply .bg-teal-dark;
}

.link {
  @apply .block .no-underline .text-sm;
}

.link-grey {
  @apply .text-grey-dark;
}

.link-grey:hover {
  @apply .text-grey-darker;
}

@tailwind utilities;

/* Here we can add our own utilities or custom CSS */

最终HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="flex items-center h-screen w-full bg-teal-lighter">
      <div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
        <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
        <form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
          <div class="field-group mb-4 md:w-1/2">
            <label class="field-label" for="first_name">First Name</label>
            <input class="field md:mr-2" type="text" name="first_name" id="first_name">
          </div>
          <div class="field-group mb-4 md:w-1/2">
            <label class="field-label md:ml-2" for="last_name">Last Name</label>
            <input class="field md:ml-2" type="text" name="last_name" id="last_name">
          </div>
          <div class="field-group mb-4 md:w-full">
            <label class="field-label" for="email">Email</label>
            <input class="field" type="email" name="email" id="email">
          </div>
          <div class="field-group mb-6 md:w-full">
            <label class="field-label" for="password">Password</label>
            <input class="field" type="password" name="password" id="password">
          </div>
          <button class="btn btn-teal mx-auto" type="submit">Create Account</button>
        </form>
        <a class="link link-grey w-full text-center" href="/login">Already have an account?</a>
    </div>
  </div>
</body>
</html>

我们提取了重复的类，其余的留给了。当我们发现自己在构建相似的组件时，可以提取更多的类！

包起来

ew！当然，我们在这篇文章中介绍了很多内容。我们首先通过构建快速表单来扩展HTML的力量，然后使用Tailwind以移动优先的方式来处理样式。一路上，我们看到了如何使用Tailwind的实用程序类来快速设置元素的样式。然后，我们使用状态变体添加一些动态样式。最后，我们看到了当我们将重复的类提取到组件类时如何也可以吃蛋糕和吃东西。

我希望您能够体会到Tailwind如何对您自己的项目产生影响。如果您想弄混这个项目，请随时克隆存储库并自己尝试Tailwind。与往常一样，随时在Twitter上问我任何问题。直到下一次，祝您编程愉快！

翻译自: https://css-tricks.com/style-form-tailwind-css/

cunqu9743

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
如何使用Tailwind CSS设置表单样式

如果您一直与最新CSS框架保持同步，那么您可能已经听说过这个最新消息： Tailwind CSS 。根据其文档，“ Tailwind是实用程序优先CSS框架，用于快速构建自定义用户界面。” 实际上，这意味着使用各种紧密映射到基础CSS属性的类。例如，将.text-center类的元素应用于元素意味着我们将其text-align属性设置为center 。很简单，对不对？使用这样...
复制链接

扫一扫