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

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

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

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

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

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

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

设置

让我们开始创建一个目录以供我们使用。在您的终端上，导航到您要创建项目的目录，然后运行mkdir 。现在，让我们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创建文件。然后，我们可以添加以下代码片段以开始使用。




  
  Tailwind Intro

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

首先，让我们在标签的内部添加两个嵌套的

元素。

我们将使用外部

进行页面定位，而内部

将作为表单的包装器。现在，在内部

，我们可以添加

来标记表单，并添加

。


  Sign Up

我们现在真的在用煤气做饭！要完成表单，我们只需要添加元素，元素和

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


  
  Already have an account?

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




  
  Tailwind Intro
  


  
    
      Sign Up
      
        
          First Name
          
        
        Last Name
          
        
        
          Email
          
        
        
          Password
          
        
        
      
      Already have an account?

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

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

使用Tailwind CSS

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

设置表单字段样式

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

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

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

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

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


  First Name

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

外部

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

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

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


  
    First Name
    
  
  
    Last Name
    
  
  
    Email
    
  
  
    Password
    
  
  

Already have an account?

添加悬停样式

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

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

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


  
    Sign Up
    
      
        First Name
        
      
      
        Last Name
        
      
      
        Email
        
      
      
        Password
        
      
      
    
    Already have an account?

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

响应式设计

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


  
    Sign Up
    
      
        First Name
        
      
      
        Last Name
        
      
      
        Email
        
      
      
        Password
        
      
      
    
    Already have an account?

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

。

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

。

将实用程序提取到组件中

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

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

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

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

如您所见，借助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




  
  Tailwind Intro
  


    
      
        Sign Up
        
          
            First Name
            
          
          
            Last Name
            
          
          
            Email
            
          
          
            Password
            
          
          
        
        Already have an account?

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

包起来

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

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

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

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

设置

我们HTML

Sign Up

Sign Up

使用Tailwind CSS

设置表单字段样式

添加悬停样式

Sign Up

响应式设计

Sign Up

将实用程序提取到组件中

最终CSS

最终HTML

Sign Up

包起来

你可能感兴趣的:(java,css,python,html,vue)