发现问题：项目中css代码痛点

创新互联专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站设计、邳州网络推广、微信小程序、邳州网络营销、邳州企业策划、邳州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供邳州建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

.mock {
    margin: auto;
    font-size: 16px;
    // ...
}
mock

以上代码就是举个例子，大部分情况应该都是写一个类，然后整一堆样式进去。这种方式写多了以后，会感受到一些痛点，比如说：

1) 取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。

2) 需要用 JS 控制样式的时候又得多写一个类，尤其交互多的场景。

3) 组件复用大家都懂，但是样式复用少之又少，这样就造成了冗余代码变多。

4) 全局污染，这个其实现在挺多工具都能帮我们自动解决了。

5) 死代码问题。JS 我们通过 tree shaking 的方式去除用不到的代码减少文件体积，但是 CSS 该怎么去除?尤其当项目变大以后，无用 CSS 代码总会出现。

6) 样式表的插入顺序影响了 CSS 到底是如何生效的。

一、Tailwind CSS 介绍

Tailwind 能够快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式。

tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件，而不是在组件基础上实现个性化。

官网：https://www.tailwindcss.cn/

如果你从来没见过 Tailwind 的实际应用，可以看这个：

Hello World

这里的类名就反映了 Tailwind 的定义：一个包含多个预定义类(所谓的工具类)的集合。你并不需要编写基础的 CSS 样式规则，只需要直接在 HTML 中应用已经事先定义好的类名。

这样的类名还有很多。下面这个列表展示了部分类别和对应的例子：

1)背景 (bg-gray-200, bg-gradient-to-bl)

2)弹性布局 (flex-1, flex-row)

3)网格布局 (grid-cols-1, col-span-4)

4)内边距 (p-0, p-1)

5)尺寸 (w-1, h-1)

开发大型应用的时候，每一个 HTML 元素都充斥着一大堆 Tailwind 的工具类名。

 hello world

问题：

要怎么组织这些类名呢?也许我们要创建并遵循某个排序规则。

解决方案：

部分 HTML 元素会使用非常多的样式，这种情况下应该考虑将样式与 HTML 标签进行分离，单独放到某个文件里。这样，我们就可以组织样式并增强其可读性。你不能把 CSS 的所有功能”塞到“ class 这一个 HTML 标签属性里，Tailwind 也不能。这样做只会让 HTML 结构越发臃肿。

@apply

针对上面提到的问题，Tailwind 允许我们在单个 CSS 文件中使用它们的类名：

.header {
 @apply bg-red-200 w-4 text-gray-400 rounded-sm border-2;
}

比如说项目中的按钮都是存在通用的圆角、内边距、字体等，这样我们就可以封装出这样一个类：

.btn {
    @apply p-8 rounded-xl font-semibold;
}

二、使用 Tailwind CSS 的理由

1、超小的文件尺寸 = 令人难以置信的性能

在开发模式下，Tailwind的输出尺寸非常大。这是设计使然：在此阶段生成每个可能的类，因此当你想要使用某些东西时，无需等待完成构建的过程。

但是，一旦Tailwind CSS进入生产模式，就会清除所有未与PurgeCSS工具一起使用的类。这是通过在项目文件中搜索类的名称来实现的，只保留那些使用过的。你可以在purge数组中的tailwind.config.js中配置将搜索哪些文件路径。

// tailwind.config.js
module.exports = {
  purge: [
    "./src/**/*.html",
    "./src/**/*.vue",
    './src/**/*.js'
  ],
  theme: {},
  variants: {},
  plugins: [],
}

2、原型和快速构建

使用常规SCSS，需要为页面上的每个元素编写自定义类。这样虽然可以提供更好的控制，但编写自定义类需要花费大量时间：你必须在HTML中添加类，然后在CSS中创建，再以长格式写出每个属性。你必须等待CSS构建后才能看到结果——并且，如果你需要进行更多更改，则每次都需要重新构建，这可能会花费几秒钟时间并中断你的流程。

Tailwind CSS取消了这些额外的步骤，并在为元素设置样式时提供了简单、爽快的开发体验。可以看到想要设置样式的元素，使用简写方式添加需要的属性，不需要等待CSS文件束就能很快出现改变。因此只要专注于一个地方即可，不用频繁切换到不同的文件，整个过程感觉很流畅。

  

    Foobar
  

  
 Click 

 Click 

 Click 

 Click 

越往下封装的粒度就越大，越抽象，灵活性就越低，但是灵活性往往是和开发工作量成反比的，灵活性越高也就意味着更多的工作需要开发者自己去处理，如何平衡开发工作量与灵活度之间的关系就显得尤为重要。

因为这涉及到css库的选择，其中BootStrap库更多的是提供颗粒度3的形式，给定一个固定的样式，开发者需要自定义样式的话必须去重写样式，而tailwind则是提供颗粒度2形式的原子样式，更多的是提供一种规范，然后将更大的自由度交由开发者，由开发者来进行样式的组装。

2、一些问题的解答

Tailwindcss 为啥受欢迎，无非是更好用的原子化的 CSS。在国外如火如荼，但是在国内论坛上争议很大，前几天看的前端大佬博客上写了一篇关于 Tailwindcss 的文章，但是底下评论很多了各种问题，总结一下

Q1: tailwind的写法和行内 CSS 有何区别，不就少写几个字吗?

大部分人的想法应该是这样的: 仅仅对于 text-center 而言，虽然提供了些许方便，但是不足以拉开差距。

如果说它仅仅是简单的原子化 CSS，好用却不亮眼。但是它却不仅仅止于此。

1. 方便性: text-center、grid-cols-3

或许一个 text-center 不足以使你觉得提供了多大的方便性，但对于一个三等分的 Grid 属性来说，一个 grid-cols-3 和 shadow 绝对方便。

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

2. 语义化: text-lg、text-white、ring、animate-spin`

text-lg，一个较大字体，如果设置行内样式，肯定有诸多麻烦的事: 我想设计一个较大的字体，那我应该设计多大尺寸、使用什么单位。

同样还有:

text-white: 白色的色值是哪个来着?

ring: 我想给这个按钮加一个圈圈?

animate-spin: 怎么做一个动画?

3. 响应式:

先来看一个在工作中会遇到的响应式布局问题，这也是我上一次在头条面试时的一道题目

响应式布局，一大堆子元素，在大屏幕三等分，中等屏幕二等分，小屏幕一等分?

通过 grid 布局很容易实现，但未免繁琐

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.conainer {
  display: grid;
  gap: 1rem;
}

那使用 tailwind 呢? 只要一行，就问你高效不高效。

4. 修饰符

把修饰符，如各种伪类、暗黑模式、响应式设计至于前缀的设计简直深得我心。

Q2: 既然 TailwindCSS 这么好用，那岂不是可以摆脱手写 CSS 了

很遗憾，不能。不过虽然你无法摆脱手写 CSS，但是你基本上也写不了几行，说以下几种很常用的情况。

1. 复杂选择器

当父级元素鼠标悬浮时的，子级元素的样式控制

.container:hover .item {

}

2. CSS function

.body {
  height: calc(100vh - 6rem)
}

3. 多种属性复用

.item {
  @apply p-2 border-b flex justify-between font-mono;
}

Q3: 造成新的记忆负担

这个问题就仁者见仁智者见智了，在 Vue 的 template 语法中也经常出现此类问题，很多人会对一些命名上的约定，特别是自己不太喜欢的约定天然排斥，这也无可厚非。

在初期确实会一边开发网页，一边瞅着文档全局搜索: TailwindCSS 属性查找，现在借助浏览器插件及熟能生巧的经验已经不太需要翻文档了。

1. Tailwind CSS IntelliSense (vscode)

智能补全

代码提示

初期经常花时间翻文档而不手写 CSS，而其中的原因不外乎两个:

1、多写几个字母，确实有点嫌麻烦，有这时间还不如看看文档，全局搜索下也不费事;

2、自己设置一个 fontSize，padding、margin 实在不知道设置多少尺寸，tailwindcss 有较大的约束;

过了多久就会觉得: 嗯，真香。

四、Tailwindcss 项目实践

原本传统的写法是定义一个类，然后写上需要的样式：

.class1 {
    font-size: 18px;
    margin: 10px;
}
.class2 {
    font-size: 16px;
    color: red;
    margin: 10px;
}

这种写法是存在一部分样式重复的，换成 Atom CSS 就能减少一部分代码的冗余。

把 CSS 当成组件来写。大家乍一看 tailwindcss 官网肯定会觉得我在 HTML 里写个样式要敲那么多类不好吧。

  
  

    

      

        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      

    

    
  

其实我们是可以利用 Atom CSS 一次只干一件事的特性，将这些类随意组装成我们想要的类，这样就可以提供出来一个更上层的通用样式来复用。

tailwind.confing.js 配置文件

/**
 * 定制配置
 * 默认配置请参考 https://unpkg.com/browse/tailwindcss@2.2.6/stubs/defaultConfig.stub.js
 */
module.exports = {
  purge: [
    "./src/**/*.html",
    "./src/**/*.vue",
    './src/**/*.jsx'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", "Roboto", '"Segoe UI"'],
        dincond: ["DINCond-Black"]
      },
      fontSize: {
        '2.5': '0.625rem', // 10px
        '3': '0.375rem', // 12px
        '5.5xl': '3.25rem', // 52px
        '4.5xl': '2.5rem', //40px
      },
      width: {
        '4.5': '1.125rem', //18px
        '10.5': '2.65rem', //42px
        '15': '3.75rem', // 60px
        '18': '4.5rem', // 74px
        '18.5': '4.625rem', // 74px
        '23': '5.75rem' // 92px
      },
      lineHeight: {
        '12': '3rem', // 48px
        '15': '3.875rem', // 62px
        '16': '4rem',  //64px
        '14': '3.5rem', //56px
        "18" : "4.625rem" //74px 
      },
      padding: {
        '0.5': '0.125rem', // 2px
        '5.5': '1.375rem', // 22px
        '4.5': '1.125rem', //18px 
        '0.75': '0.1875rem', //3px
        '7.5': '1.875rem' //30px
      },
      paddingBottom:{
        '4.5': '1.375rem' //22px
      },
      margin: {
        '4.5': '1.125rem', //18px 
        '15': '3.75rem', // 60px
        '21.25': '5.3125rem', // 85px
        '11.5': '2.875rem', // 46px
        '19': '4.75rem', //76px
      },
      marginTop: {
        '6.5': '1.625rem', // 26px
      },
      spacing: {
        '3.5': '0.875rem', // 14px
        '7.5': '1.875rem', //30px
        '9.5': '2.375rem', // 38px
        // '15': '3.375rem', // 54px
        '11.5': '2.875rem', // 46px
        '23': '5.75rem', // 92px
        '28': '7rem', // 112px
        '98': '39rem', // 624px
      },
      height: {
        '0.25': '0.0625rem', //1px
        '0.75': '0.1875rem', // 3px
        '14': '3.5rem', // 56px
        '10.5': '2.65rem' //42px
      },
      backgroundColor: {
        'primary-a100': 'rgba(43, 121, 255, 0.1)',
      },
      borderRadius: {
        '5.5': '1.375rem'
      }, //22px
      zIndex: {
        '6': 6 // z-index: 6
      },
      screens:{
        '3xl': '1664px',
        '4xl': '1792px'
      },
      scale: {
        '85': '.85', // 0.85rem
      }
    }
  },
  plugins: [
    require("tailwindcss-theming")({
      variants: {
        light: true
      }
    })
  ]
};

至此，我们已经了解了什么是 Tailwind CSS?如何使用 Tailwind CSS?Tailwind CSS 定制以及插件的使用，相信大家对Tailwind CSS已经有一个全面的认识。

新闻名称：为什么使用TailwindCss框架
当前链接：http://www.stwzsj.com/qtweb/news2/12302.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联