tailwind css介绍

剪刀石头布啊
640 阅读15分钟

前言

tailwindcss 属于颗粒化、原子化的 css，因此更建议熟练使用 css 的人使用，这是新手陷阱(会让新手成长更慢，毕竟接触到实际的css属性变少)

另外本篇也只介绍很多常见的，有些不常见或者不常用的，可以直接上style、css，或者查询 tailwind 文档

此外由于已经使用了 颗粒化、原子化 css 的 tailwindcss，其加上 style、css 可以完全替代 sass、less 这种，基本没有必要引入后两者了，当然真需要也不冲突

主要参考与tailwind 文档，编写的想法来自于这篇文章，毕竟入门很快，自己也打算再温习一下

准备工作

最好 参考 tailcss 文档 (vite 和 webpack 不一样)

第一步：vscode 搜索 tailwind 插件(自己看着安装适合自己就行了)，直接搜索安装即可，不然会没有相关提示，这样开发效率反而可能会变低哈

QQ_1732510808511.png

第二步：开始安装相关库

//安装 tailwindcss，
//postcss是处理和优化css的插件 依赖需要 
//autoprefixer也是补全浏览器兼容写法css插件，也需要用到
tailwindcss @tailwindcss/postcss postcss autoprefixer --dev

根目录创建 postcss.config.mjs 配置一下

export default { 
    plugins: { 
        "@tailwindcss/postcss": {}, 
    }
}

在 跟 css 顶部导入 tailwindcss 即可（例如：index.css、main.css）

@import "tailwindcss";

创建一个 postcss.config.js 文件，里面好设置主题和扩展样式

//postcss.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

使用traiwindcss做一个简易进度条

先做一个简易的进度条吧，看看效果(这个不可以滑动哈)

QQ_1726819385317.png

<div
    className={`flex items-center w-[220px] h-[6px] bg-[#ffffff32] rounded-[2px] ${className}`}
>
    <div
        className={`bg-gradient-to-r from-[#0058BA] to-[#5FFFFB] h-[4px] overflow-hidden`}
        style={{
            flex: progress,
        }}
    />
    <div
        className="w-[5px] h-[8px] bg-[#a8deff] rounded-[6px]"
        style={{
            boxShadow: "0px 0px 8px 1px #A8DEFF",
        }}
    />
    <div
        className={`h-[4px] bg-[#ffffff32]`}
        style={{
            flex: 100 - progress,
        }}
    />
</div>

通过上面也可以简单看出，tailwindcss 使用简单，其就像设置 style 一样，颗粒度非常小，并且其还是class 形式，再配合 style，使用起来别提多舒服了，尤其是在 react 中可圈可点，并且还不是说不能写css了，想写仍然可以编写，并不冲突

此外，其又是缩写的class，所以整体css代码量会减少不少，也避免了起名的问题，缺点是对新手不友好，可能会忘记基础的css使用，但瑕不掩瑜，开发非常方便

因此也更建议 css 基础扎实 的人使用

下面介绍一下常用的 tailwindcss 基础，很多都是类推，不介绍那么细，因此重要是再重复，不适合css新手看

tailwindcss

tailwindcss 是简称的方式编写，一般是由具备代表性的类型名称、css样式名称、固定符号组成，例如：、w-1、w-[20]、items-center等，复杂的甚至会分开编写，例如渐变色：bg-gradient-to-r from-[#0058BA] to-[#5FFFFB]

宽高等数值类

数值一共有两种 预定义数值、手写(推荐)，不止有宽高，其他的可设置数值的也是类似，例如：padding、margin、font-size等等

预定义数值类（w-数值、h-数值），用的比较少

  • 以 width 为例 w-1 为例，1 表示 0.25 rem，即 4 px，以此类推，w-20 表示 5 rem，即: width: 80px;
  • 此外还可以使用分数表示百分比，例如: w-1/4 表示 width: 25%，这个也挺好用的

手动书写任意值（w-[]、h-[]），推荐--更灵活通用

  • 更加直观可控，以 width 为例，w-20 实际上等价于：w-[80px] 、w-[5rem]、w-[5em]
  • 也可以使用百分比，例如:w-[100%]

宽高类

w-full、h-full: 👉 width: 100%;height:100% 表示占用容器 100% 宽度、高度

w-screen、h-screen: 👉 width: 100vw;height:100%，表示占据设备宽度高度

w-svw(h-svh)、w-lvw(h-lvh)、w-dvw(h-dvh) 分别表示最小宽度(带浏览器导航)、最大宽度(浏览器全屏)、设备窗口宽度(根据浏览器导航、全屏实际设备显示范围动获取有效宽高)

size: 同时设置 width、height 数值，例如:size-[20px]表示 width:20px;height:20px

min-w-[]、max-w-[]、min-h-[]、max-h-[]：最大最小宽度

边距类

m-[]、ml-[]、mr-[]、mt-[]、mb-[]：分别代表 magin、margin-left、margin-right、margin-top、margin-bottom，

mx、my 比较特殊，分别代表 x方向 和 y方向，也就是 ml、mr 和 mt、mb

m-auto、mx-auto系列，例如：mx-auto: margin: auto; mx-auto: margin: 0 auto;

p-[]、pl-[]、pr-[]、pt-[]、pb-[]：分别代表 padding、padding-left、padding-right、padding-top、padding-bottom，

px、py 比较特殊，分别代表 x方向 和 y方向，也就是 pl、pr 和 pt、pb

p-auto、px-auto系列，例如：px-auto: padding: auto; px-auto: padding: 0 auto;

top-[]、bottom-[]、left-[]、right-[]：top、bottom、left、right 绝对布局这种比较常见

z-index

z-[] 表示 z 方向层级，z-index

space

space-x-[]、space-y-[]用于设置子视图之间的行间距和列间距,使用非常方便，这个能减少很多判断代码

其他类(会重复)

leading-[] 行高 line-height

tracking-[]文本 spacing 宽度

line-clamp-1 文本阶段效果，几行，就是后面几行css

overflow: hidden; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 1;

text-[20px] 字体大小 font-size

border-[] 边框宽度 border-width

flex-[]、flex-grow-[]、flex-shrink-[] 设置 flex 伸缩挤压属性，如果只是需要填充，可以直接 flex-1 即可

rounded-[]、rounded、rounded-md、rounded-lg、rounded-full 弧度 border-radius

rounded-full ：border-radius: 9999px;，设置圆形，实际上我们直接数值就好了

cursor-pointer 鼠标悬浮效果，挺常见的吧

颜色背景边框类

实际上颜色有很多复杂函数，那时比较建议使用 style、css实现，而不是硬嗑 tailwindcss

颜色背景

bg-[#fff] 设置背景颜色 background-color

bg-[url('./1.png')] 设置背景颜色 background-image

text-[#fff] 设置文本颜色 color

bg-red、text-red直接设置已有颜色

bg-red-500 后面表示饱和度，数值越大颜色越深，一般500，可以不填写

bg-fixed、bg-local、bg-scroll 背景图片滚动行为 background-attachment

bg-origin-border控制元素背景相对于边框、填充和内容的定位方式 background-origin

bg-center、bg-bottom、bg-left-bottom 控制元素位置的 background-position，就写几个，全是方位词一看就明白

bg-repeat、bg-no-repeat、bg-repeat-x、bg-repeat-y、bg-repeat-round、bg-repeat-space、表示重复方式 background-repeat

bg-auto、bg-cover、bg-contain 背景 background-size 设置填充方式或者大小，这里只有默认的方式，此外，可以设置x、y方向大小 background-size: 10% 100%

bg-gradient-to-r from-[#0058BA] to-[#5FFFFB] 渐变色，别看有空格看着不连贯，实际是有效的 background-image: linear-gradient(to #0058BA, #5FFFFB); 实际上这类颜色不通用的话直接style就好，太长不连贯改动时容易出问题

decoration-[] 装饰颜色，下划线 text-decoration-color

边框

border-[] 边框颜色 border-color

border-solid、border-dashed、border-dotted、border-double 边框类型 border-style 实线、虚线、虚点、双实线

rounded-[]、rounded、rounded-md、rounded-lg、rounded-full 弧度 border-radius

border-[]、border-t-[]、border-r-[]、border-b-[]、border-l-[]、border-x-[]、border-y-[] 边框宽度 border-top-width

border-1 边框宽度 border-width 注意单位 不是rem单位了，而是px

divide-x-1、divide-y-1 指定方向边框宽度 border-...-width、border-left-width;border-right-width... 注意单位 不是rem单位了，而是px

outline 和 border 有点像，只不过属于装饰，存在偏移，不多介绍

outline-red outline 颜色 outline-color

outline-offset 距离边缘外部偏移(向外) outline-offset 注意单位 不是rem单位了，而是px

文本类

text-[20px] 文本大小 font-size

text-[#fff]、text-red 设置文本颜色 color

text-center、text-left、text-right、text-justify、text-start、text-end 文本对其方式 text-align

font-[500] 设置 font-weight 仅支持默认的几种数字，一般使用下面的就行

font-thin、font-normal、font-medium、font-bold 也就是 font-weight 100、400、500、700 比较常见

italic、not-italic font-style 表示斜体、正常

leading-[] 行高 line-height

tracking-[]文本 spacing 宽度

line-clamp-1 文本截断效果后面显示...，几行，就是后面几行css

overflow: hidden; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 1;

underline、line-through、no-underline、overline 装饰线种类 text-decoration-line，位置不同，一般前三个个就够了，分别是底部、中间、无下划线、顶部

decoration-[] 装饰颜色，下划线 text-decoration-color

decoration-solid、decoration-dashed、decoration-dotted、decoration-double、decoration-wavy 装饰线种类 text-decoration-style 分别表示底部下划线类型：单实线、虚线、虚点、双实线、波浪线

decoration-1、decoration-2、...表示装饰线宽度，这个不是rem单位了，而是px

underline-offset-1、...表示装饰线底部偏移，这个不是rem单位了，而是px

text-nowrap、text-wrap、text-balance、text-pretty 表示文本换行方式 text-wrap，不同的换行设置能让文本更优美，其中 text-nowrap 是不换行，剩下三种可以自行尝试体会，或者参考这里

indent-[2px] 文本首行缩进 text-indent

align-baseline、align-top、align-middle、align-bottom、align-text-top、align-text-bottom、align-sub、align-super 文本垂直方向对其方式 vertical-align，其中比较常用的就是 middle 居中了，这些 css 我也记不住不常用，必要时还是会用到😂

值描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
inherit规定应该从父元素继承 vertical-align 属性的值。

truncate、text-ellipsis、text-clip text-overflow 系列使用，一般可以被 line-clamp 代替

truncate: //使用省略号截断溢出文本
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

text-ellipsis: //省略号阶段溢出文本 和 overflow使用，效果和上面差不多
                text-overflow: ellipsis;
text-clip: //单纯截断效果，没有省略号需要配合overflow使用
                text-overflow: clip;

content-none、content-[] content 文本内容，在伪类中使用

布局样式

static、fixed、absolute、relative、sticky position 几种定位方式，不多说了，前面就有点啰嗦了😂

float-start、float-end、float-right、float-left、float-none 几种 float 浮动方式

clear-start、clear-end、clear-left、cear-right、clear-both、clear-none clear 用于控制环绕方式，常见的清除浮动就是说的这里，通过清除浮动，控制环绕方式

visible、invisible、collapse设置dom可见方式的几种情况 visibility

resize-none、resize、resize-x、resize-y 布局自适应调整方式 resize

block、inline、flex、grid、table、inline-block、inline-flex、inline-table、table-caption 内容展示方式 display，用的最多的就是前五(四)个了，后面的使用比较少，涉及规则太多了，很容易出问题，大佬都不敢轻易尝试

其中我们用的最多的布局样式就是 flex 了，下面也是他的属性比较多

flex 属性

flex display: flex 参考

flex-col、flex-col-reverse、flex-row-reverse、flex-row flex 布局方向 flex-direction，默认是 row，因此 flex-row 用的也比较少

flex-wrap、flex-nowrap、flex-wrap-reverse flex-wrap 换行效果

basis-[] flex-basis 缩写，可以设置基础值，优先级比width高，默认auto

grow-[] flex 扩张权值属性 flex-grow

shrink flex-shrink 收缩权值属性 flex-shrink

flex-1、flex-none、flex-auto 等同于 flex 是一个复合属性 grow|shrink|basis，有时直接flex-1填充完毕就完事了(flex: 1 1 auto)

justify-center、justify-between、justify-around、justify-evenly、justify-stretch、justify-start、justify-end 布局主轴方向上内容布局方式 justify-content

items-start、items-end、items-center、items-stretch、items-baseline 布局次轴方向上items的布局方式 align-items

content-center、content-between、content-around、content-evenly、content-stretch、content-start、content-end 布局方向上内容的展开方式 align-content 布局次轴多行row布局方式

self-auto、self-start、self-end、self-center、self-stretch、self-baseline 布局次轴方向上items的布局方式，相对于自己 align-self

order-1、order-first、order-last 排序值 order， 后面值越大越靠后，反之靠前，通过该手段控制排序未尝不是一个简单的选择

block 块布局

block display: block 参考

place-content-center、place-content-start、place-content-end、place-content-between、place-content-around、place-content-evenly、place-content-baseline、place-content-stretch place-content 控制内容的对齐方式

place-self-auto、 place-self 控制内部元素自己的对齐方式

grid 网格布局

grid display: grid 参考

grid-flow-col、grid-flow-row grid 流方向 grid-auto-flow， 先行后列、先列后行

grid-cols-4 设置 grid 列 grid-template-columns: repeat(4, minmax(0, 1fr))

grid-rows-4 设置 grid 行 grid-template-rows: repeat(4, minmax(0, 1fr));

col-auto、col-span-4 设置 grid 列元素的大小和占位, 1 个 span 占一个格子， grid-column: auto; grid-column: span 4 / span 4;

row-auto、row-span-4 设置 grid 行元素的大小和占位, 1 个 span 占一个格子， grid-row: auto; grid-row: span 4 / span 4;

justify-items-start、justify-items-end、justify-items-center、justify-items-stretch 布局方向上内容的展开方式，相对于自己 justify-items

justify-self-auto、justify-self-start、justify-self-end、justify-self-center、justify-self-stretch 布局方向上内容的展开方式，相对于自己 justify-self

下面align-items、align-content、align-self在 flex、grid中 都基本生效，可以尝试

items-start、items-end、items-center、items-stretch、items-baseline 布局次轴方向上items的布局方式 align-items

content-center、content-between、content-around、content-evenly、content-stretch、content-start、content-end 布局方向上内容的展开方式 align-content 布局次轴多行row布局方式

self-auto、self-start、self-end、self-center、self-stretch、self-baseline 布局次轴方向上items的布局方式，相对于自己 align-self

place-items-start、place-items-center、place-items-end、place-items-baseline、place-items-stretch grid 中 place-items 控制内容的对齐方式与 place-content 相似

伪类、伪元素

伪类和伪元素不同的时候，需要再伪类、伪元素后面加上:，与原本使用略有不同，然后才是我们自定义的属性，下面就简介一个常用的

伪类

hover:bg-grey hover:text-red 设置 hover 效果

focus:outline-2 聚焦 focus 效果

active:bg-red 按住效果

first:、last: 第一个和最后一个子节点

odd:、even:: 奇数、偶数节点(:nth-child(odd)、:nth-child(even))

伪元素

before:bg-red、after:bg-green 前后伪元素

placeholder:text-gray 占位符伪元素

file:p-2 file伪元素

悬浮效果

cursor-pointer、cursor-move 鼠标悬浮 hover 效果，挺常见的就小手点击、移动十字架 参考这里

交互类

cursor-pointer、cursor-move 鼠标悬浮 hover 效果，挺常见的就小手点击、移动十字架 参考这里

resize-none、resize、resize-x、resize-y 布局自适应调整方式 resize

pointer-events-none、pointer-events-auto pointer-events 事件管理，需要控制事件交互事后就用它了

select-none、select-auto、select-all、select-text 控制子元素是否会被鼠标选中(复制粘贴)，一般在一个页面或者小模块父视图设置，根据情况调整

变化、过渡、动画类

变化 transfrom

translate-x-[]、translate-y-[]、translate-x-full、translate-y-full 平移 translate 函数

rotate-45 旋转函数(顺时针) 单位 deg, rotate(45deg)

scale-200 缩放百分比，200% scale(2)

skew-x-2、skew-y-2 倾斜 skew 函数

过渡 transition

transition、transition-none、transition-all、transition-colors、transition-opacity、transition-transform transtion 设置的比较多，可以参考这里

duration-500 变化过渡时长 transition-duration 单位 ms

ease-linear、ease-in、ease-out、ease-in-out 渐变效果 transition-timing-function

delay-500 变化延迟执行时间 transition-duration 单位 ms

动画

animate-none、animate-spin、animate-ping、animate-pulse、animate-bounce 给的几种常见动画，分别是 无动画、spin的旋转效果、ping的opacity的波纹一样的显示和褪色效果、pulse的节拍呼吸效果、bounce的弹性效果 参考这里

自定义样式

就是我们开头看到的 postcss.config.js，我们需要在里面配置内容

这里面就稍微全一些了，可以覆盖样式，可以扩展新的样式，也可以自定义样式

其中扩展基础颜色、文本(family)、自定义plugins(常见css组，例如：center)比较常见

export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue,html}"],
    theme: {
        //覆盖一下主题颜色
        colors: {
            blue: '#1fb6ff',
            purple: '#7e5bef',
            pink: '#ff49db',
        },
        //扩展新的样式
        extend: {
            //扩展颜色
            colors: {
                'primary-dark': '#1f2937',
                'primary-light': '#f3f4f6',
                'secondary-dark': '#1f2937',
                'secondary-light': '#f3f4f6',
              },
            //这个就是加入到font的名下了
            //假设我们使用两种字体，可以来回切换
            fontFamily: {
                youshe: ["YouSheBiaoTiHei", "sans-serif"],
                pingfang: ["PingFangS", "PingFang SC"],
            },
        },
    },
    plugins: [
        function ({ addUtilities }) {
            const newUtilities = {
                //加入一个全局css，使用时直接在class中填写这个就行
                //假设我们加入一个带渐变色的字体
                ".text-gradient-normal": {
                    "font-family": "YouSheBiaoTiHei",
                    "background-image":
                        "linear-gradient(to bottom, white 30%, #9BE5FF 50%, #0DCAF5 100%)",
                    "background-clip": "text",
                    "-webkit-background-clip": "text",
                    color: "transparent",
                    "line-height": "1em",
                },
                //设置常用的 center
                ".center": {
                    "display": "flex",
                    "justify-content": "center",
                    "align-items": "center",
                }
            };
            addUtilities(newUtilities);
        },
    ],
};

最后

本篇就到这里了，不全是肯定的，这个基础使用足够了，配合 style，甚至必要时使用 css，基本可以轻松完成设计想要的效果，由于 tailwindcss 本身就是比较颗粒化的样式了，推荐 tailwindcss + style + 少量css 完成

对于 sass 这个实际上就不推荐了，因为要是看了上面使用，会发现根本就用不了太多 sass 的效果，有需要当然也没问题，毕竟不是所有人现阶段都适合 tailwindcss，毕竟技术还是需要进步的

avatar
文章
阅读
粉丝