likes
comments
collection
share

tailwind.css实战，真的好用？

作者站长头像
站长
· 阅读数 9

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计,消除你css文件，下面通过实践来感受下Tailwind CSS框架带来的便利和效率

为什么有使用Tailwind CSS想法

  • 使用前端框架，页面样式基本都使用组件隔离，这样会出现很多重复样式、类名不同样式重复，并每次要加一个style
  • 样式类名不知道在看的各位是否有同样的命名烦恼，用英文自己都看不懂（常用的除外）; 中文拼音也看不懂，取的太长有点难受; 取得太短，不知是什么东西; 语义太难了;何况大多是写业务，业务很多不常见，取名类名加样式，只能说鬼都看不懂，正如那句话理想很丰满，现实很残酷
  • 团队写的全局样式很都没有用到，有点浪费，且有很多同事也不用
  • UI设计不是很规范，要写很多不同的间距、宽高等，这时要取类名就写这么一个间距，有点烦，写内联又感觉怪怪的

目前遇到这些，还有的可以评论区留言，而Tailwind CSS可以解决以上问题

Tailwind CSS

Tailwind CSS的使用就不抄了，直接看【官网】,使用简单易用，可以集成到任何前端项目中，没有什么限制，有好用的配套工具，提供友好的ide提示，有灵活的自定义功能，支持你特定的想法，方便好记的类名，让你一看就知是什么css样式; 只保留你项目中写了的样式，不用担心Tailwind CSS全套包过大问题...

大屏实践

本人使用主用angular，所以用这个框架为例，当然这个和框架没什么关系，写样式都一样。 大屏实现的是一个开源的大屏页面vue-big-screen 的angular版本，也正好这个没有angular版本

如下面代码 angular html文件的一段

<div class="flex pt-8 pl-8 items-center">
  <i class="iconfont icon-chart-line text-[#5cd9e8] text-2xl"></i>
  <span class="text-md text mx-8 mt-4">数据统计图</span>
</div>
<div class="flex-1" echarts [options]="options" [theme]="theme"></div>

解释下第一行class flex pt-8 pl-8 items-center 这个表示如

.items-center {  
  align-items: center;  
}
.pl-8 {  
  padding-left: 8px;  
}
.pt-8 {  
  padding-top: 8px;  
}
.flex {  
  display: flex;  
}

很好理解和记忆，基本所有的类名都和其css有关联，用一次就很记住，记不住记个大概也成，通过配套的ide工具使用，如下图

tailwind.css实战，真的好用？

整个项目除了引入了一个全局css文件，组件中基本没有再自己定义css，都是用的 Tailwind CSS 提供的类名实现样式

实践问题

1、设计都用px为单位，但Tailwind CSS 中尺寸都用的rem，所以直接使用，自己还要心里计算下，很不方便

解决：使用自定义能力，设置如下

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
const spacing = {};
for (let i = 0; i < 1000; i++) {
  spacing[i] = i + "px";
}
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    spacing,
  },
  plugins: [],
};

这样的话 mr-2 表示 margin-right: 2px; 而不是0.5rem

2、组件库不要使用 Tailwind CSS，不利于覆盖组件库的样式

比如： 定义组件时在最外层上加个样式 mr-4, 你又想在使用组件时加个mr-2,但因Tailwind CSS 的类都是全局的有顺序问题，mr-4在mr-2的后面定义，优先级更高，因此无法覆盖，并且没有自己的css类，很难选到要改的组件内部元素，所以组件库最好不要用Tailwind CSS，使用BEM原则比较好

3、怎么给样式加important 在类名前加‘！’如下：

<div class="!mr-2"></div>

4、自定义值 设计颜色无规律，可以不用定义了，直接在设计稿上复制使用，写在html中，Tailwind CSS中自定义的用[]表示 如 text-black表示黑色， 如要自定义一个颜色，可以用text-[#5cd9e8], 表示 color: #5cd9e8;

以上就是实现一个大屏时遇到问题在Tailwind CSS找到的对应解决方法，当然Tailwind CSS还有很多功能，基本可以完成所有业务开发需要，如 响应式、主题、组合、指令、状态表示法（hover、focus、伪元素等状态）、还有上面说的自定义方式等等

总结

业务开发中Tailwind CSS确实可以带来很多便利和效率的提升，通过大屏的实现，感受到了Tailwind CSS强大，开始随便看了下文档，就开始使用了，遇到问题从文档中解决方法，都一一找到解决方式，首次使用，大部分类基本通过ide的提示就能找到，整个大屏实现基本组件基本没有定义css文件，只全局引入了一个Tailwind CSS要用的css文件，无脑的写样式，没有了类命名的烦恼真的很不错

没有查，感觉内存占用大，后面会在大项目中引入Tailwind CSS，再来说说感受

转载自:https://juejin.cn/post/7230630555775942715
评论
请登录