2023年学习Tailwind CSS正当其时

Luzhou
1,462 阅读4分钟

为什么现在要学习Tailwind CSS

一些人对新事物，评价就是鸡肋&有什么用，直到它从只限极客玩家使用（早期阶段），发展到行业大佬，创新性强的大厂使用（第二阶段），再到整个行业开始普及，这些人才被动接触学习（第三阶段）。

Tailwind CSS就是一个例子，2年多时间，它不再只是限于极客玩家使用，而是发展到它的名字遍及各种开源框架的templates，demo，showcase以及各类startup项目中和大厂面试题里，截止这篇文章发布，Tailwind CSS的github star数已达到63k。

也许，现在是学习它最具性价比的时候：

  • Tailwind CSS度过了新事物诞生后必经的前人踩坑阶段，已得到了顶级开发者认可，正走在普及的大道上。
  • 但Tailwind CSS当前发展仍是早期，仍然是面向未来的，如果你现在把Tailwind CSS写入简历中，也基本是个大大的加分项。

Tailwind CSS基本用法

安装 Tailwind CSS： npm install tailwindcss

创建配置文件：在你的项目（react项目为例）根目录下创建一个名为 tailwind.config.js 的文件，这个文件用于配置 Tailwind CSS。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

创建 CSS 文件：（还是以 React 项目为例），如 src/styles.css 的文件，并在这个文件中引入 Tailwind CSS：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在 React 组件中引入 CSS 文件，并使用 Tailwind CSS ：

import './styles.css';

function App() {
  return (
    <div className="bg-blue-500 text-white p-4">
      Hello, Tailwind CSS!
    </div>
  );
}

具体在各种框架中的使用，参考官方tailwindcss.com/docs/instal…

为什么说Tailwind CSS是革命性

先来看看对Tailwind CSS质疑的声音， 下图为采用Tailwind的知名科技媒体theverge其首页html代码，看到这样的这样的class写法，你也许会问：

Image.tiff.jpeg.jpg

质疑1:这并非什么新鲜事物吧

Bootstrap就有utility classes，utility classes are king也是Bootstrap的核心卖点，不就是搭积木的模式吗？

质疑2：原子化css，增加记忆成本

我们以实现一个button为例，首先，使用原生html+css，写一个class：

.myButton {
	background-color: #0070f3; 
	color: #ffffff; 
	font-weight: bold; 
	padding: 10px 20px; 
	border-radius: 4px;
}

html中调用这个class即可：

<button class="myButton">
    Button
</button>

而我们使用Tailwind CSS后

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
       Button
  </button>

看着这么多class，你肯定要问，记忆成本得多大呀。

质疑3：写法丑陋

继续用上面的例子，每个html标签都有一长串class列表，长度增加了，也让一个简单的组件变的得换行。

对于绝大部分开发者来说，并不习惯，然后当你习惯后，就会接受并喜欢上它，因为它是革命性的。

为什么是革命性的

思维转变：使用组合

万物相通的，这些年面向对象语言中，迎来新的架构思想变化：组合优于继承，多用组合少用继承，熟悉react的同学，也清楚hook和class是两种开发思维的不同，原先一个庞大的class组件，变为多个简单的hook组件的组合，代码复用率得到提升。

而Tailwind CSS也是迎合这一思想的，而且它更彻底，组合到了原子级（一行css一个class名，例如：Tailwind CSS中，flex类表示 display：flex ）。

按需编译&高复用率

Tailwind CSS是用到多少，编译多少，多余的一点没有，因此极大的降低了css体积。

针对质疑的三问：

  1. Tailwind CSS就是全新的，它对于CSS的意义，犹如react之于一众js框架&操作dom库。Bootstrap虽有utility classes，但它并不是原子化的，且使用上需要先加载整个Bootstrap的css文件，不管你用到的还是没用的。
  2. 他没有增加记忆成本，反而每个class都有其实际CSS属性的含义，是对CSS的简写，且原先需要服用css属性，一样需要记忆，而Tailwind CSS熟悉后，不仅不增加成本，还大大提升了开发效率，因为class属性的记忆也是复用的。
  3. 如果觉得class命名太长，且一些业务涉及动态设置class名，情况就更严重了，这里建议在使用Tailwind CSS时，可以结合着使用classnames 和twin.macro（css-in-js）

当然作为一个已经60k star，被尤大等fork的项目，它还有很多优势：

  • 快速开发：Tailwind CSS 提供了大量的实用类，可以帮助你快速构建用户界面。
  • 灵活性：Tailwind CSS 没有预定义的样式，因此你可以自由地自定义样式。
  • 简单易学：Tailwind CSS 的语法简单易懂，官网文档完善，易于学习和使用。
  • 易于定制：Tailwind CSS 提供了丰富的配置选项，可以轻松定义字体，主题色等。

之后我还会补充学习的方式和最佳实践，求关注。

avatar
文章
阅读
粉丝