CSS
Allen 2021-02-22 16:48:00 5448 0 0 0 0

一些链接:

--什么是Tailwind CSS(牛铁柱明天见)(wwayne:Sublime编辑器自动补全方案)

https://www.zhihu.com/question/337939566

--tailwind css_什么是Tailwind CSS,如何将其添加到我的网站或React App中?

https://blog.csdn.net/cumi7754/article/details/108098816

--Tailwind CSS 基本配置

https://www.cnblogs.com/zhurong/p/12942170.html

--无需离开您的HTML,即可快速建立一个前沿的网站。

http://tailwind.wyz.xyz/

+++

大致了解了一下,感觉还很不错。

简单来说,tw特点是单位更小,更灵活,更方便使用。

但可能需要CSS基础要好,因为所有的样式都需要你自己来组合实现。


简单示例:

下面是一个用 Tailwind 构建联系人卡片组件的例子,无需写一行 CSS :

class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathanp>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.p>
      div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Messagebutton>
      div>
    div>
  div>
div>

可以直接添加cdn文件

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

就可以看到效果了!


+++

一些简单问答:

  ---说了半天,Tailwind CSS和内联样式有什么区别?

  Tailwind CSS是把所有样式写在class里面。内联样式是把所有样式写在style里面,所以会让很多人造成一个印象:Tailwind CSS和内联样式差不多,大同小异。

  其实是有很大的区别,Tailwind CSS相比于内联样式,有以下几点特点:

  有约束的设计。

  使用内联样式,每个值都是一个随便填写的数字。使用Tailwind CSS类,你要从预先定义好的设计系统中选择样式,这样你开发出来的页面,视觉上会保持一致,不会乱七八糟。

  响应式设计。

  您不能在内联样式中使用媒体查询,但您可以使用Tailwind的响应式类来轻松开发完全响应式界面。比如你可以在class里写一个`sm:text-left`,代表的是,在小屏幕上,文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。

  可以直接写鼠标滑过,点击等其他状态的样式。

  比如你可以在class里面写一个`hover:text-white` ,代表的是鼠标滑过的时候,文本是白色。

  其他的很多特点,比如可维护性等等。

  ---Tailwind CSS有什么缺点?

  类名很长

  正如Tailwind CSS官网首页的口号一样,从此让你写样式不再离开html页面。Tailwind CSS将HTML与CSS高度解耦,把本来CSS的一些工作转嫁给了HTML。好处是使用Tailwind CSS你可以从此不再写css。但坏处是你的html标签的类名会很长很长。比如

  <a href="#" class="text-sm font-medium bg-purple-600 rounded-full py-4 px-11 text-white inline-block border border-solid shadow hover:text-purple-600 hover:bg-white hover:border-purple-600 transition duration-300" role="button">Start Ticketing</a>

  虽然Tailwind CSS也支持把很多属性提取成一个组件,但是对于不会再次复用的class。提取组件也没什么必要。

  所以类名很多是我目前遇到的不太舒服的问题。

  ---熟悉使用有成本

  这一点逃避不了,所有的新技术,所有的css框架都有熟悉成本。Tailwind CSS也一样。比如你想做一个圆角,那你得知道Tailwind CSS里面的圆角属性怎么写,边框怎么写,边框样式怎么写等等。你需要不断的去看文档。

  我对Tailwind的文档进行了翻译,中文文档见:Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

  所以一开始使用Tailwind CSS,特别是第一个项目,你会用起来比较痛苦。很多不喜欢Tailwind CSS的人可能从第一个项目就会放弃了。

  但是只要你用Tailwind CSS做一两个项目,基本明确的告诉你,你以后很难再回到手写css的时候了。大多人都会觉得"很香"。

  另外是,Tailwind CSS的作者针对这个问题,开发了一个专门用于vscode的Tailwind CSS代码提示插件。会有效的提高开发效率。

  ---那我要不要学习Tailwind CSS?

  当然,这是必须的。作为一个新兴css框架。在这一两年之内,Tailwind CSS框架的上升率已经稳居第一了。而且这种写法,在目前看来,优越与其他的任何css框架,目前看来这也是趋势。除非以后再出来什么奇葩的玩意儿。

  建议对技术有追求的人最好学习一下。所有的新技术,都是学起来费劲,但用起来简单。

  ---要不要对以前的项目用Tailwind CSS进行重构?

  大多数情况下不建议,Tailwind CSS的主要优势在于开发效率的提升。如果一个项目你已经开发完成了。就没必要重新使用Tailwind CSS了。

  但如果你之前的这个项目,你本来也准备重构了。在犹豫用什么css框架,那你可以试试Tailwind CSS。

  另外是,如果一个项目,三天两头的更新迭代前端界面,并且之前的代码写的也不怎么好,那建议使用Tailwind CSS重构。

  ---是不是以后可以放弃bootstrap之类的框架了?

  不是,主要看你的场景。我个人感想,如果一个项目,需要快速或者简单交付,那没必要用Tailwind CSS。用bootstrap,bulma之类的框架可以让你很快的完成一个项目。不用纠结太深的技术。

  Tailwind CSS更适合于页面定制化高的场景。

  ---听说Tailwind CSS的文件很大是不是?

  是的。因为它需要把所有的css属性全部都封装一遍,所以css文件巨大,3M多。所以不建议在页面内直接引入Tailwind 原生css文件的做法。

  Tailwind CSS官方团队为了解决这个问题,提出了一个方案,在编译的时候引入PurgeCSS 这个工具,构建的时候,会自动删除掉所有你没用到的css。只保留你用到的css。这样最终打包出来的css文件极小极小,一般的项目构建出来的css文件,压缩一下甚至不会超过10K。

作者:牛铁柱明天见

链接:https://www.zhihu.com/question/337939566/answer/1693039814

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


【版權聲明】
本文爲原創,遵循CC 4.0 BY-SA版權協議!轉載時請附上原文鏈接及本聲明。
原文鏈接:https://tdlib.com/am.php?t=HnwnDINXF2qw
Tag: 前端框架 Tailwind
我也要發一個   ·   返回首頁   ·   返回[CSS]   ·   前一個   ·   下一個
相關內容

Tailwind语法基础 2021-07-04 

歡迎評論
未登錄,
請先 [ 註冊 ] or [ 登錄 ]
(一分鍾即可完成註冊!)
返回首頁     ·   返回[CSS]   ·   返回頂部