原由 & 前言

  • 如果你没有据说过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 v3const colors = {  'success': '#654321'，  'info': '#123456',  'warning': '#666666',  // ...}module.exports = {  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],  theme: {    // ...    colors,  },  plugins: [],}// tailwindcss v2const 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`}// flexableconst fontSize = {  12: pxToRem(12),  14: pxToRem(14),  16: pxToRem(16),  ...}, spacing = {  0: 0,  4: pxToRem(4),  8: pxToRem(8),  12: pxToRem(12),  ...}// viewportconst 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.jsmodule.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）