css 常见技术和认识 tailwind css

卖油条的
576 阅读4分钟

本文主要是想整理一下tailwind css相关，在具体展开之前先对相关背景知识做下介绍。

css技术

以下资料参考这里。

css技术这里被分为三种

  • Pre-/Post-processors
  • CSS Frameworks
  • CSS-in-JS

Pre-/Post-processors

是来增强css的工具，这里分为两种

  • Pre-processors 比如sass、less，添加了css没有的特性，包括嵌套、继承、mixins等
  • Post-processors 比如postcss，可以对css进一步处理，包括自动添加浏览器前缀、将转换新版css语法（类似于babel）等。

image.png

CSS Frameworks

是提前构建组件或样式的库，大致又可以分为三种

  • 在元素上添加class，从而添加一组提前组织好的样式，比如bootstrap
  • 本身就是封装好的组件，直接使用对应的组件而不是添加class,比如antd
  • 每个class表示一个简单的样式，通过组合class而自定义样式，比如tailwind css，而且由图可见无论上升趋势还是实际使用率，后者都很受欢迎。

image.png

CSS-in-JS

用来将css集成到js的库，用js的语法用来增强css的功能，主要是用于react生态，最受欢迎的是style-components，另外css modules 解决了css不存在模块的问题，使用css-loader等可以将各个模块的class名修改为和当前组件相关的名称，避免全局冲突。

image.png

tailwind css

tailwind css的用法类似于inline css，不同的是不是直接在元素上添加样式，而是添加样式对应的className,每个className对应一个原子样式，且这种对应关系是可以配置的。

基本用法

安装等准备工作看这里,准备完后我们写了这样一个元素

<div class="text-xl font-medium text-black">ChitChat</div>

通过三个classname指定了当前元素的font-size,font-weight,color三个属性，每个classname分两部分：

前一部分指的是某个属性，具体表示的含义可能要结合第二部分内容，比如text在这里表示了font-size和color,具体取值可参考文档layout部分及以下

image.png 后一部分指的是该属性具体的值，特定的值表示的含义既包括默认的还可以在theme中配置，比如text-xl font-medium对应的默认含义分别对应

    fontSize: {
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
    },
    fontWeight: {
      medium: '500',
    },

因此会应用以下样式

.text-xl{
    font-size:1.25rem;
    line-height:1.75rem;
}
.font-medium{
    font-weight:500;
}

当前解决方案

本文的一开始我们讲了很多css工具，每一种工具都是为了解决某些问题而产生的，那么用tailwind css是怎么解决这些问题的呢?

tailwind css通常和postcss一起使用，对以下问题的解决方案是

  • sass等预处理器对css的功能增强可以通过postcss 插件解决，比如嵌套可以用tailwindcss/nesting,mixin可以使用postcss-mixins，其实和预处理器同时使用也是可以的，只是官方不推荐
  • css module的问题，要想解决这个问题就要先回顾一下这个问题怎么来的，因为css所有的选择器都是全局的，因此如果不同地方使用了同一个class等，且对应的样式不一样就会对彼此产生影响，而在tailwind css中，每个class对应的样式是固定的，因此不存在这个问题。
  • 不同状态下对应的样式，比如元素的hover状态，或者不同屏幕下，可以通过添加修饰符来解决，比如
<button class="bg-sky-600 hover:bg-sky-700 ..."> Save changes </button>
  • 使用自定义样式，如果想在当前体系之外自定义，比如将多个class表示的样式进行组合，可以使用指令来解决，其中引入了层的概念对不同样式进行排序来处理优先级问题。

总结

这里我们稍微总结一下优缺点和适用场景。 优：

  • 性能好，只会产生正在使用的class对应的样式
  • 不需要各种class等的命名
  • 代码编写量少，只需要添加对应的class，不需要编写大量css样式
  • 易维护，去除了不同样式中的要硬编码，修改样式时需要修改对应的class，而不担心影响别的组件

缺：

  • 需要添加大量的classname
  • 对相关classname有一定的记忆负担，可以通过 ide 插件提示

适用场景： 适合新项目且团队乐于接受新事物，这个工具只是一种新的解决方案，如果技术栈转换的代价超过了新工具带来的提升，那还是不要换了。

参考

avatar
文章
阅读
粉丝