乐趣区

关于css:给我一个你不用tailwindcss的理由

jiezi

原由 & 前言

  • 如果你没有据说过 tailwindcss，请先 return，本篇不议论tailwindcss 是什么怎么用，而是怎么优雅的应用。

  • 如果你据说过，请持续浏览并思考应用tailwindcss，因为看完之后：

    • 开发上：可能为你甚至你们的前端团队 节俭很多写款式的工夫 ，也能让你或者你们的我的项目 开发体验有很大晋升
    • 生产上：你们的我的项目打进去的包体积中的 款式代码占比将忽然骤降而后趋于不变。

你真的须要 css 预处理器吗

可能大多数同学在开发或者保护一个我的项目的时候，我的项目中应该都应用了诸如 scss、less、stylus… 等css 预处理语言，甚至有的单个我的项目中应用了多种预处理语言，可能是为了应用 变量 ，可能是为了 复用款式 不便，也可能是为了写一些 函数 不便咱们对一些款式值做一些解决，然而大部分时候咱们是为了 能够写嵌套款式 ，总之是为了进步咱们的开发效率，这所有在tailwindcss 呈现之前都是那么的美妙，直到咱们遇到了 tailwindcss，你会发现你甚至连stylelint 都不须要配置，因为你可能基本不必写css

How & Which Version

tailwindcss v2 vs v3

如果你的我的项目须要兼容 IE，请应用v2 版本，如果不须要请果决上 v3 版本

具体如何在你的我的项目中应用 tailwindcss，请务必查看官网文档 v2 中文 v3English，举荐基于postcss 来增加

装置 vscode 插件

如果你决定应用 tailwindcss，装置bradlc.vscode-tailwindcss 这个官网提供的插件，能够提供提醒、补全、查看理论设置的款式的能力

配置你的 tailwind

如果你曾经依照文档教程创立了 tailwind.config.js 文件，那么接下来咱们要对这个文件进行进一步的配置

PC 端我的项目

如果你的我的项目是只针对 PC 端网页的，可能你只须要问你们的设计同学你们我的项目中的一些 根底的设计准则 有哪些，比方会应用的一些 主题色彩 ， 字体大小、梯度 、 内外边距大小、梯度 ， 罕用的边框圆角大小、梯度 ， 边框宽度、梯度 ，如果设计同学没有这些准则，就协商一下这些根本准则，比方都会用到哪些色彩啊，边距单位个别依照4px 的倍数来设置啊……

色彩

如果设计同学提供了我的项目中的主题色，并且有语义化的名称，比方相似 success，info，warning 这种语义化的色彩，咱们就能够基于这些来配置咱们的色彩，包含但不限于字体、背景、边框、暗影色彩 (配置完之后间接能够应用相似text-success 的类来设置色彩)，能够替换 css 预处理器的变量性能

// tailwindcss v3
const colors = {
  'success': '#654321'，'info': '#123456',
  'warning': '#666666',
  // ...
}
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    colors,
  },
  plugins: [],}
// tailwindcss v2
const colors = {
  'success': '#654321'，'info': '#123456',
  'warning': '#666666',
  // ...
}
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    textColor: colors,
    backgroundColor: colors,
    borderColor: colors,
  },
  plugins: [],}

v2和 v3 版本的设置有些许区别，v2具体的设置什么类别的色彩须要特地指定。

间距 & 宽高 & 行高 & 圆角 & 边框宽度

因为 tailwindcss 默认长度相干的配置是基于 rem 的，而 PC 端的我的项目大多数时候咱们都是固定一个宽度，左右留白，所以大多数状况下，设计稿都会在固定一个宽度内，元素的大小宽高边距单位都是px，所以咱们须要对默认的做一些特定配置来适配咱们的我的项目

const spacing = {
  0: 0,
  4: '4px',
  8: '8px',
  12: '12px',
  // ... 我的项目中罕用的都能够配置
}
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // v3 & v2
    spacing,
    lineHeight: spacing,
    borderWidth: spacing,
    borderRadius: spacing,
  },
  plugins: [],}

挪动端适配计划

可能对于挪动端适配，当初风行的就是 viewport 计划了，也可能有的我的项目还在用 flexable 计划，然而咱们又不想手动换算 px 到rem或 vw，尽管社区也有相似pxtorem 或者 pxtovw 这种 postcss 的插件，但解决问题的办法还是不够优雅，可能是因为插件的保护的不踊跃，可能是插件不好用，不兼容 postcss8(pxtovw 说的就是你😤)，既然咱们都有 tailwindcss 了，那就让这些配置变的更简略一些吧！如果你们设计同学提供了罕用的间距计划，比方 4px 的倍数或者 6px 的倍数，当初假如设计同学的设计稿都是 750px 的，咱们就能够基于此来写两个函数办法来解决 pxtorem 和pxtovw的工作，如果你们是 flexable 计划就用 pxToRem，如果是viewport 的适配计划就用pxToVmin。

function pxToRem(variable) {return `${variable / 75}rem`
}

function pxToVmin(variable) {return `${variable / 7.5}vmin`
}
// flexable
const fontSize = {12: pxToRem(12),
  14: pxToRem(14),
  16: pxToRem(16),
  ...
}, spacing = {
  0: 0,
  4: pxToRem(4),
  8: pxToRem(8),
  12: pxToRem(12),
  ...
}
// viewport
const fontSize = {12: pxToVmin(12),
  14: pxToVmin(14),
  16: pxToVmin(16),
  ...
}, spacing = {
  0: 0,
  4: pxToVmin(4),
  8: pxToVmin(8),
  12: pxToVmin(12),
  ...
}
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    fontSize,
    spacing
  },
  plugins: [],}

当然圆角大小，边框宽度等都能够这么配置，是不是比应用插件优雅多了

嵌套语法

有的同学可能对 css 预处理器的嵌套语法情有独钟，tailwindcss外面能够吗？安顿！
tailwindcss有一个插件叫 @tailwindcss/nesting，基于官网的一些配置，须要留神的是文档上的是给 postcss 配置 tailwindcss/nesting，实际上须要配置@tailwindcss/nesting，而后就能够基于css 提供嵌套的能力，试试呗~

固定行数后截断

有时候咱们会为了写一个文本在 x 行之后阶段并显示 ... 要写好几行款式代码，所以咱们通常会定义一个这样的 scss 工具函数

@mixin ellipsis($line: 1, $substract: 0) {
    @if $line==1 {
        white-space: nowrap;
        text-overflow: ellipsis;
    } @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    width: 100% - $substract;
    overflow: hidden;
}

tailwindcss对于这种非凡状况提供了专有的插件 @tailwindcss/line-clamp，只须要装置一下，而后在 tailwind.config.js 中的 plugins 中引入即可

装置插件

npm install -D @tailwindcss/line-clamp

配置

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require('@tailwindcss/line-clamp'),
  ],
}

应用

<div class="line-clamp-3">
  <!-- ...3 行后截断 -->  
<div>

多主题

可能你保护的是一个须要反对多主题的我的项目，不同的状况下有多种配色计划，在 tailwindcss 中配合 css var 来实现多主题配色会简略到让你窒息：

在你的全局 css 文件中配置主题，假如咱们有 success、info、warning 这三种不同的主题配色

/* global base css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// 默认主题
:root {
  --success: 5 193 174;
  --info: 51 163 238;
  --warning: 237 214 18;
}
// 主题 1 的配色
.theme-1 {
  --success: 36 195 102;
  --info: 54 143 255;
  --warning: 234 209 27;
}
// 主题 2 的配色
.theme-2 {
  --success: 57 209 121;
  --info: 0 186 255;
  --warning: 234 209 27;
}

而后到咱们的 tailwind.config.js 中扭转咱们的色彩配置

// 让咱们的色彩反对透明度设置
function withOpacityValue(variable) {return ({ opacityValue}) => {
    return opacityValue === undefined
      ? `rgb(var(${variable}))`
      : `rgb(var(${variable}) / ${opacityValue})`
  }
}

const colors = {success: withOpacityValue('--success'),
  info: withOpacityValue('--info'),
  warning: withOpacityValue('--warning'),
  // ...
}
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
    colors,
  },
  plugins: [require('@tailwindcss/line-clamp')],
}

最初依据不同的状况设置你的主题，对要设置的主题的顶级元素设置对应的 class 即可，外部的所有色彩款式都会对应特定的主题而扭转！

<!-- 默认主题 -->
<div>
  <!-- ... -->
</div>
<!-- 主题 1 -->
<div class="theme-1">
  <!-- ... -->
</div>
<!-- 主题 2 -->
<div class="theme-2">
  <!-- ... -->
</div>

一些最佳实际

  • 如果某些元素款式特地简单，导致 html 代码很长很乱怎么优化？你能够通过 tailwindcss 提供的 @apply 指令将一系列款式通过一个语义化的类体现进去

    <div class="complex-node">xxxx<div>

// ...
<style>
.complex-node {@apply flex m-3 text-success rounded ....;}
</style>

  • 我有一些款式是全局通用的，比方按钮，卡片的一些款式，我该怎么保护？你能够通过 tailwindcss 提供的 @layer 指令将比拟通用的款式 layer 到components层，作为组件级别的款式，从而能够达到全局复用的目标

    @layer components {
.btn-blue {@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;}
}

  • 我的我的项目是多人保护的，我如何保障原子化的款式类名称有一个比拟正当的程序呢？比方你喜爱先写宽高而后写定位，然而你的共事跟你相同，如何制订一个标准呢？tailwindcss提供了一个 prettier 插件 prettier-plugin-tailwindcss，能够通过装置插件并且配置保留后更新即可标准不同成员写款式类的格式化问题

    npm install -D prettier prettier-plugin-tailwindcss

    新建一个配置文件 .prettierrc.json 键入 {} 依据你们我的项目的原有配置进行配置，如果是集体我的项目也能够依据你集体爱好进行配置，而后在 vscode 中装置 esbenp.prettier-vscode 这个插件，而后关上你的设置搜寻 format，将Format On Paste 和Format On Save都勾选上，就能够在保留完之后主动对你的款式类的程序进行排序，排序的规定默认是依据 css box model 从外到内的规定进行排序的：

margin – border – padding – content

总结

只是针对平时笔者应用到的局部对 tailwindcss 的能力进行了一些浅谈，其实还有很多能力都没有说到，比方 v3 提供的一些针对打印页面的款式，hover、active、伪类等的一些设置，其实也比较简单，具体应用的时候看下官网文档就能够了。可能有局部小伙伴也会吐槽 tailwindcss 有很多根底类的名称须要记忆，其实也不多，游刃有余，都是一劳永逸的货色。如果你也有不错的配置计划或者最佳实际也能够在评论区通知我。最初，有用请点赞，喜爱请关注，我是Senar（公号同名），谢谢各位！

往期内容

前端开发的根底生产力素养（前期不定期更新）

记一次在老掉牙的 Vue2 我的项目中引入 TypeScript 和组合式 Api 和 vueuse 来改善大家伙的开发体验的艰苦历程

各位 frontend developer 们，机会曾经成熟，让咱们开始用上 pnpm 吧

一文让你彻底会用对象存储 OSS 的前端直传，不懂就再看一遍！（bushi）

退出移动版