如何使用Tailwind CSS设置窗体样式

如果你一直在关注最新的CSS框架，你可能已经听说过最新的孩子：Tailwind CSS。根据它的文档，\"Tailwind是一个实用的第一个用于快速构建自定义用户界面的CSS框架。\"在实践中，这意味着使用各种紧密映射到底层CSS属性的类。例如，将类.text-center应用于元素意味着我们将其text-align属性设置为center。很简单吧？使用这样的工具类可以让我们花更多的时间迭代设计，避免过早地抽象CSS。然后，一旦我们对我们的设计感到满意，Tailwind就可以很容易地将实用程序提取到组件类中。现在，我相信您知道，即使提到实用程序框架，也会引起一定程度的骚动。在我们开始在Twitter上对我大喊大叫，甚至在评论中提到实用程序框架之前，让我们花点时间记住Tailwind只是我们可以使用的一个工具。如果你不想把它添加到工具箱中，那就不用担心了！但是，如果您至少对了解这个新工具感兴趣，那么让我们一起来看看如何构建一个注册表单。不必费事，让我们用Tailwind设置一个新的项目，编写一些HTML代码，并对其进行样式设置。设置让我们从创建一个目录开始。使用终端，导航到要创建项目的目录并运行mkdir 。现在，让我们cd进入我们的新项目，并遵循尾风安装指南。既然我们想看到尾风所能做的一切，让我们用npm或纱线安装它，使用以下方法。 # Using npmnpm install tailwindcss --save-dev# Using Yarnyarn add tailwindcss --dev 安装了尾风，我们现在可以通过运行./node_modules/.bin/tailwind init生成配置文件。这将在项目的根目录中为我们生成一个tailwind.js文件。在这个文件中，我们可以根据项目的需要调整Tailwind的默认设置。对于这个项目，我们不需要改变任何东西。现在，让我们创建一个CSS文件，在那里我们可以管理我们自己的CSS和注入尾风样式。为此，我们可以从项目目录中运行touch styles.css。在这个新文件中，我们可以使用Tailwind的@tailwind指令将preflight和utilities样式注入到我们的CSS中。preflight包含所有基本样式和一些浏览器样式规范化，而13***添加了我们在配置文件中指定的所有实用程序类。所以，我们的styles.css文件应该是这样的： @tailwind preflight;/* Here we can add any custom overrides */@tailwind utilities;/* Here we can add our own utilities or custom CSS */ 如果您正在使用PHPStorm，并且您对@tailwind的CSS文件中的红色扭曲感到恼火，只需在上面添加/*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来创建文件。然后，我们可以添加下面的代码片段开始使用。 As you can see, it\"s your typical HTML page. The only wrinkle here is that we\"re importing our main.css文件，我们为页面提供了一个描述性标题。现在，让我们开始建立我们的注册表格！首先，让我们在标记的内部添加两个嵌套的元素。我们将使用外部的作为页面定位，而内部的将作为表单的包装。现在，在内部的中，我们可以添加一个来标记表单，以及一个. Sign Up We\"re really cooking with gas now! To finish the form, we just need to add the 元素、元素和。当我们添加它们时，让我们把每个对包装在一个中，这样它们就可以保持在一起了。 Finally, let\"s add a link to access the login page right below our form. Putting that all together, our HTML will look like this: Pretty straightforward, right? Now, when we see how that renders on the page, we should see something that looks like this: Don\"t be alarmed if it looks like the 丢失了；这只是浏览器在工作时重置了。最后，我们准备好看看这个Tailwind CSS是关于什么的。使用Tailwind CSS作为我们的优秀开发者，让我们采取移动优先的方式来设计我们的注册表单。因此，在400px的较小视口宽度下，我们的页面看起来是这样的：设置表单字段的样式让我们通过设置的样式开始使用顺风。首先，让我们添加一个边框，以便在页面上看到它。为此，我们只需要添加.border类。所以，现在我们的名字看起来像这样： Now we can see it on the screen! How easy was that? Let\"s continue by adding some padding and making the text color a touch lighter. To do that, we just need to add the following classes: .py-2，.px-3，和.text-grey-darkest。 With the first two classes, we\"re taking advantage of the padding scale that comes with Tailwind and applying it vertically and horizontally to the element. If you want to define your own scale, just hop into your config file and change it to what you need. With the last class, we\"re using Tailwind\"s default color palette and changing the color of our element to the darkest grey. Let\"s take our form a step further. Now, we can position our 在我们的之上，给他们一些样式。 Look at that, our first name field looks great! And the best part is that I really don\"t have to explain what these classes are doing—they explain themselves! But just so we\"re all on the same page, let me run through them quickly. The outer 通过.flex将其display属性设置为flex，其flex-direction通过.flex-col设置为column。由于.mb-4，它的底部有一点利润。同时，我们的的利润率略低

如何使用Tailwind CSS设置窗体样式

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么