当前位置：首页 > 文章列表 > 文章 > 前端 > 试验 Tailwind CSS：快速指南

试验 Tailwind CSS：快速指南

来源：dev.to 2024-08-05 18:39:55 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《试验 Tailwind CSS：快速指南》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

tailwind css 是一个实用性优先的 css 框架，因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次（2024 年 8 月 5 日），显然它是 web 开发社区的最爱。在这篇博文中，我们将探讨如何在不设置本地开发环境的情况下试验 tailwind css。相反，我们将使用在线服务来快速开始。

为什么选择 tailwind css？

在深入讨论之前，我们先简单讨论一下为什么 tailwind css 如此受欢迎：

实用程序优先方法：tailwind css 提供低级实用程序类，让您无需编写自定义 css 即可构建自定义设计。
响应式设计：它通过内置的响应式实用程序使创建响应式设计变得简单。
定制：tailwind css 是高度可定制的，允许您扩展或修改默认样式以满足您的需求。

tailwind css 在线入门

要试验 tailwind css，我们可以使用 play.tailwindcss.com 等在线服务。这个游乐场允许您直接在浏览器中编写 html 和 tailwind css 并实时查看结果。

分步指南

参观 tailwind css playground:
打开浏览器并访问 play.tailwindcss.com.
熟悉界面：
playground 界面分为两个主要部分：
- 编辑器：编写 html 和 tailwind css 类的位置。
- 预览：您可以在其中看到代码的实时输出。
开始编码:
在编辑器中，您可以开始编写 html 并应用 tailwind css 类。这是一个帮助您入门的简单示例：

   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="bg-white p-8 rounded shadow-md">
       <h1 class="text-2xl font-bold mb-4">Hello, Tailwind CSS!</h1>
       <p class="text-gray-700">This is a simple example to demonstrate Tailwind CSS.</p>
       <button class="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">Click Me</button>
     </div>
   </div>

尝试不同的课程:
tailwind css 提供了广泛的实用程序类。尝试更改类以查看它们如何影响设计。例如，您可以更改背景颜色、内边距、边距等等。
探索 tailwind css 文档:
如果您不确定要使用哪些类，tailwind css 文档是一个很好的资源。它提供了所有可用类以及如何使用它们的详细信息。

使用 tailwind css playground 的好处

无需设置：无需任何设置即可立即开始尝试 tailwind css。
实时反馈：在预览窗格中立即查看更改的结果。
可共享链接：您可以通过生成可共享链接与其他人分享您的 tailwind css 实验。

使用 vscode 扩展提高您的工作效率

如果您更喜欢在本地开发环境中工作或想要加快工作流程，请考虑安装适用于 visual studio code (vscode) 的 tailwind css intellisense 扩展。此扩展提供了自动完成、语法突出显示和 tailwind css linting 等高级功能。
链接：官方 tailwind css intellisense vscode 扩展