tailwindcss使用总结

官网
接触tailwindcss不过两周有余,但是仅仅刚接触不到一天的时候,我已经深深的被它吸引,我从未见过一款css库可以做到如此好用、如此灵活,几乎不用自己再写css了,我觉得它比任何一款样式库都要好用。
如果您遇到的通用框架由许多组件预先设计组成,则在此TailwindCSS中,您将找不到诸如按钮,卡片,警报,轮播等其他预先设计的组件。因为TailwindCSS不是UI工具包,而是实用程序优先的框架,用于快速构建自定义界面。

简而言之,在TailwindCSS中,有许多小类代表CSS声明。因此,当您要创建组件时,则需要使用其中的一些小类来创建您要引用的组件。
发的使用方法大体如下:

<div className="md:mt-8 flex w-full flex-col items-center">
         <ShoppingCartHeader subtotal={1639.97} save={290} />
 </div>

只要你记住它的命名规则,然后在className里面拼写各个小样式的名称即可,你不用担心某些css属性tailwind会覆盖不到,我用这两周来几乎没碰到这种情况,可以去官网看下,每个属性都有详细的说明,你也不要觉得这么多小样式的名称很难记住,我几乎只用半天时间就掌握了它的命名规则,而一旦你掌握了它的命名规则,基本不用死记硬背,只要按规则去拼写就可以,当然这有个前提:你对css属性非常熟悉。

自定义宽度

基本用法就是如我上面所写,当然如果只有这些,很可能很满足不了一些情况,tailwind提供了非常丰富的自定义接口,例如:

image.png

image.png

同一个界面既要适配mobile又要适配pc,而设计为了适配性,pc端做了一些简化,但是content固定宽度是520px,mobile上宽度当然可以用w-full来搞,但是520px,这个值如果不用单独写css,如何只用tailwind来搞定呢?
image.png

可以在tailwind.config里面设置自定义width,然后用的时候直接w-520px即可,

<div className={classnames("w-full  md:w-520px")}>

如上即可表示默认宽度是w-full即(width:100%),md表示当前设备是pc端(screen宽度大于768px,当然这个断点也可以自己定义),这个样式的意思就是在移动端全屏在pc端宽度固定为520px,爽吗?这样写?

自定义最大宽度

 maxWidth: {
        sm: "424px",
      },

使用的时候就可以:

<div className="mt-2 space-y-4 md:max-w-sm">
image.png

自定义颜色

 colors: {
      // brand colors
      primary: "#cc0000",
      white: "#fff",
      black: "#292929",
      background: "#f6f8f9",

      // primary colors
      primary01: "#b20405",

      primary80: "#d53232",
      primary60: "#de6464",
      primary40: "#e89696",
      primary20: "#f1c8c8",

      // secondary colors
      secondary00: "#409aef",
      secondary01: "#ecf5fd",

      // feedback colors
      success: "#00daa1",
      warning: "#ff8b00",
      error: "#e42526",

      // neutral colors
      grey80: "#546171",
      grey60: "#969ea8",
      grey40: "#bbc0c6",
      grey20: "#dddfe3",
      grey10: "#eeeff1",

      // special colors
      star: "#fdd446",

      // chats users
      user1: "#e46a25",
      user2: "#e0e425",
      user3: "#90e425",
      user4: "#25e438",
      user5: "#25e494",
      user6: "#25e4cd",
      user7: "#25d9e4",
      user8: "#259fe4",
      user9: "#2566e4",
      user10: "#2538e4",
      user11: "#4b25e4",
      user12: "#6225e4",
      user13: "#9025e4",
      user14: "#e025e4",

      // social media colors
      facebook: "#3b5998",
      messenger: "#0084ff",
      twitter: "#00a2f9",
      whatsapp: "#75cf6c",
      pinterest: "#a5221f",
      google: "#ea4335",
      linkedin: "#0e76a8",

      inherit: "inherit",
    },

用的时候更加灵活,比如字体颜色,只需要:

 <h2 className="bold text-grey10">{"You haven't added a default purchase preference yet"}</h2>

采用text-{颜色名}即可,别的都同理了,比如背景色:bg-{颜色名}即可,比如:bg-primary01

与scss混用


定义好scss样式,


image.png

导入css,之后就可以混合使用:

<div className={classnames("mx-4", styles("shopping-cart-image"))}>

样式覆盖

定义要覆盖的样式:

const deskStyle = useMemo(() => [{ opacity: 1.0, background: "RGBA(41, 41, 41, 0.9)" }], []);
    <div className={styles("shadow-overlayer")} css={deskStyle} onClick={onDismiss}>

即可覆盖,当然用scss的方式也可以覆盖,这种相当于内联样式覆盖,优先级最高。

与js变量混合使用

<div
      className={styles("option-group", {
        "option-group--mobile": mobileOptions,
        "option-group--only-as-mobile": onlyUseAsMobile,
      })}
    >

当mobileOptions为true的时候,样式option-group--mobile才会起作用。
本文持续更新,随着我对这个库的认识的更加深入。

推荐阅读更多精彩内容

  • 引用CSS方式 内部引用 html文件中写一个 标签,并将样式写入到里面,举例: 外部引用 通过 标签实现,里面有...
    dawsonenjoy阅读 219评论 0 0
  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 263评论 0 0
  • Sass 文件的后缀名 Sass 有两种后缀名文件: .sass这种后缀名的文件不能使用大括号和分号,否则报错。 ...
    玛丽莲做梦阅读 54评论 0 0
  • 概述: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 一、注释: CSS注释以 "/*" 开始,...
    进入web前端阅读 1,208评论 0 8
  • 前端经典面试题: 1、(前端面试题)https://zhuanlan.zhihu.com/p/84212558?f...
    who_are_you_阅读 118评论 0 2
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 8,825评论 0 9
  • 彩排完,天已黑
    刘凯书法阅读 3,154评论 1 3
  • 没事就多看看书,因为腹有诗书气自华,读书万卷始通神。没事就多出去旅游,别因为没钱而找借口,因为只要你省吃俭用,来...
    向阳之心阅读 3,381评论 3 11
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 86,362评论 1 7