我第一次使用 Tailwind CSS 的经历

最近我开始学习 Tailwind CSS，这是一个可以帮助你更快地编写 CSS 的 CSS 框架。

Tailwind 是一个实用优先的 CSS 框架，包含 flex、pt-4、text-centre 和 rotate-90 等类，可以直接在你的标记中组合构建任何设计。简单来说，它允许你在 HTML 中以类的形式编写 CSS。

学习 Tailwind CSS 的先决条件

测试 Tailwind 之后，在开始使用 Tailwind CSS 之前你应该了解以下事项 -

• 基本 HTML（尤其是 Classes 和 IDs）
• 基本 CSS
• 移动和桌面响应能力
• NodeJS 应该预先安装
• 关于 npm 包的一些知识

我是如何开始的

如果你对 CSS 有深入的了解，Tailwind 非常容易上手。因为我们写的是同一种 CSS，所以在开始学习 Tailwind 之前我不需要学习任何额外的内容。

为了开始使用 Tailwind，我按照 YouTube 上 Tailwind Lab 的播放列表：Tailwind CSS：从零到生产。这个播放列表确实以清晰简洁的方式解释了所有内容。我学习了如何设置 Tailwind 项目，即下载所有重要文件（例​​如 package.json、tailwind.config 文件）和其他方便的插件。在了解了 Tailwind 的基本工作原理之后，我开始探索 Tailwind 的文档，这是迄今为止我遇到的最好的文档之一。在摆弄文档并尝试自己实现功能的同时，我学会了如何通过 Tailwind CSS 开发具有适当样式和响应能力的普通网页。之后，我开始学习一些高级的东西，比如创建自己的类，如何制作和使用自定义颜色和属性！< br/>

我遇到的困难

• 对我来说，建立 Tailwind 项目的过程一开始有点困难，但随着时间的推移，一切都变得清晰起来。
  
  

• 我面临的另一个问题是，由于我们在 HTML 文件（准确地说是类）中设置代码样式，因此代码开始看起来非常混乱，尤其是当你必须对元素进行大量样式设置时。
  
  

易于学习

• 学习 Tailwind CSS 一点也不难，因为正如我上面提到的，你不需要学习任何额外的内容，因为我们编写的是相同的旧 CSS。
  
  

• Tailwind 的文档对此进行了最好的解释之一，即其核心概念、工作原理和用法。
  
  

• Tailwind 中使用的类非常简单直接，您无需回顾其文档即可查看类名！

Bootstrap 与 Tailwind CSS

Bootstrap 和 Tailwind 都是最常用的 CSS 框架之一。

Bootstrap 可让您快速设计和定制响应式移动优先网站。它是全球最受欢迎的前端开源工具包，具有 Sass 变量和混合宏、响应式网格系统、丰富的预构建组件以及强大的 JavaScript 插件。

1.可定制性

• 我认为 Tailwind 非常灵活（可定制）。你可以自行定义所有属性和值，无需编写额外的 CSS。说到自定义属性，你可以在 Tailwind 配置文件中创建自定义属性，轻松构建自定义颜色、使用外部字体等。

• 与 Tailwind CSS 不同，Bootstrap 的可定制性不强，因为它具有预先设置的样式元素，有时您可能需要考虑制作一个 CSS 文件来更改 Bootstrap 提供的默认样式并添加一些您自己的风格。

2.与 CSS 预处理器一起使用

• 由于 Tailwind 是一个 PostCSS 插件，因此它可以轻松地与其他预处理器（如 Sass、Less、Stylus 等）一起使用，就像与其他 PostCSS 插件（如 Autoprefixer）一起使用一样。

• Bootstrap 自带原生 CSS，但其源代码使用了两个最流行的 CSS 预处理器：Less 和 Sass。它默认自带 Sass 变量和 mixins。

3.删除未使用的类

Tailwind CSS 和 Bootstrap 都使用 PurgeCSS 删除所有未触及的 css 类，这些类只会增加文件大小。

4.外观

顺风：

使用 Tailwind 👆 设计的简单卡片

Tailwind 代码

顺风：

使用 Bootstrap👆 进行简单的卡片设计

引导代码

嗯，两者各有各的好看，但 bootstrap 的可定制性较差，我必须编写额外的 CSS 才能根据我的网站主题更改其外观。

最后的想法

以下是我认为 Tailwind 值得使用的一些原因：

• 它对初学者非常友好。在构建网页时，您甚至不需要离开 HTML 文件！
• 与 Bootstrap 不同，它高度可定制
• 您不必担心不必要的代码，PurgeCSS 会处理它。
• 它有易于记忆的类名。这样你就不需要反复查看文档了。
• 您甚至可以创建自己的课程，这样就不必一遍又一遍地重复相同的代码。

谢谢阅读😃。再见！