言

又到周五了，是时候该放个大招了。哈哈~~

提到 CSS 想必每个做前端开发的没有不知道的，也没有不会用的。即使是后端开发人员也多少会一点，因为这是Web开发中最最基础的一个知识了。

但是在平时写 css的时候，很多人又觉得他没点技术含量而且还会占用大量的时间去编写代码。虽然现在出现了很多很香的框架如: bootstrap 。还有一些css预处理器如：sass、less、stylus 都是为了解决在平时开发中的一些问题，提高工作效率。

今天给大家介绍一款新的比较火的前端 CSS 框架： Tailwind CSS

官网

先把官网奉上：

https://www.tailwindcss.cn/

先来感受两个官网图片：

关于安装

Tailwindcss 有很多种安装方式，也可以和不同的框架进行集成，这里以 vue3(vite) 为例介绍。

1、创建一个vite 工程，具体用法参考 vite 官网

npx create-vite-app my-project
cd my-project
npm install

2、初始化 Tailwind CSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3、创建您的配置文件，(这里会同时生成tailwind.config.js 和 postcss.config.js 文件)

npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4、引入 tailwindcss

创建一个 css文件，这里创建位置是： /src/index.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

5、引入创建好的 index.css在 main.js 或者 main.ts 中引入刚刚创建好的css文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

关于更多的安装细节请仔细阅读官网文档

https://www.tailwindcss.cn/docs/installation

强大的功能

看一个例子

要实现这样一个样式设计，用传统的方式css如下

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

用 tailwindcss写法如下：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

可以看到代码量是少了很多很多。

tailwindcss的强大功能远不止如此，还有很多强大好用的功能如：

• 强大的响应式设计

• 元素的hover 、focus 和其它状态的元素

• 深色模式
• ……

tailwindcss的功能实在是太多，这里也只是简单介绍几个常用的功能而已，如果你对这个框架感兴趣请到官网仔细阅读用法。

写在最后

Vue-admin-work 系列的 P 版本。也应用到了 tailwindcss 框架。如果你对 vue-admin-work 框架感兴趣。请到评论区查看源码获取的方式。

欢迎大家评论点赞转发~~~ 感谢支持

头条创作挑战赛#

1、前言

  这几天在论坛看到一个有趣的问题：新人入职公司做C++开发，发现公司用的界面GUI还是微软古老的MFC框架，想问大家MFC是不是已经过时了？是否还有深入学习的必要？ 其实，个人觉得在讨论这个问题之前还有一个更宽泛的问题：C++语言本身是否适合做GUI界面？

2、C++是否适合做GUI?

  先说结论：根据多数开发C++的人来说，单纯做界面GUI的话，C++本身其实并不太适合写GUI。因为C++本身不具备反射和自省，类体系结构非常的静态，且抽象能力有限，而界面GUI本身是个相当动态的东西，所以最基础的C++并不适合用来写GUI，硬写的话最后的程序会非常的冗长和啰唆的。

所以聪明的GUI库通常会用一些技巧绕过这个问题：

1. 大量宏技巧来保存meta信息，如MFC、wxWigdet。
2. 用额外的source transformer来提供反射和动态messaging能力，如Qt。
3. 在C++基础上实现一个Domain Specific Language，包括Qt以及各种DirectUI方案。

  严格意义上讲，后两种手段都属于DSL方法，所以已经不能算是纯粹的C++开发GUI了。其实最适合写native GUI的语言是Objective-C语言，即便抛弃Cocoa库来讲，单纯的论语言能力也是如此，可惜的是它针对IOS系统，并不能支持跨平台。

3、流行的C++界面GUI库

  图形用户界面（Graphical User Interface，简称 GUI），下面介绍一下C++常用的GUI开发框架：

(1) QT

Qt 是Qt Company开发的跨平台C++图形用户界面应用程序开发框架，目前使用很广泛；

支持平台：Windows、Linux、MacOS等等；

网址：https://www.qt.io；

(2) MFC

Windows下的GUI库，使用比较广泛；

支持平台：Windows；

网址：https://www.microsoft.com/zh-cn/；

(3) wxWidgets

wxWidgets是一个C ++库，开发人员可以使用它为Windows，Linux，MacOS和其他平台创建应用程序；

支持平台：Windows、Linux、MacOS；

网址：https://wxwidgets.org

(4) gtkmm

gtkmm 是流行的图形界面库 GTK+的官方 C++ 接口;

支持平台：Windows、Linux、MacOS；

网址：https://www.gtkmm.org；

其他界面库还有：

imgui (https://github.com/ocornut/imgui)

duilib (https://github.com/duilib/duilib)

xcgui (http://www.xcgui.com/)

GuiLite (https://gitee.com/idea4good/GuiLite)

3、为什么这么多流行的GUI库都用C++实现？

  至于为什么这么多流行的GUI库都用C++实现，很多原因不是在语言本身的能力上，几个可能的原因是:

1）GUI是个基础构件，用C/C++这种较基础和非常流行的语言来实现的话，可以让这个库被更多的其它语言所使用。

2）原生性。很多实际应用需求可能不允许类似C#语言这种附带一个编译运行时的东西，或者带一个臃肿的Webkit，尤其对互联网客户端来讲，需要发布的东西越小越轻量越好，所以这些公司的客户端基本上都是自己造一个轻量级的DirectUI，只满足自己的需求即可，而不用考虑推广性和普遍性。

3）保留了在性能和抽象之间做权衡的能力。如果采用了HTML/CSS/JS，那么当你需要高性能实时渲染时，可能无法实现。做为一个库来讲的话，用户的应用场景千变万化，必须要为这些可能性保留相关的能力。

  总得来说用C++写GUI需要付出更多的努力，但回报也更高，前提是有一个或轮一个靠谱的DSL。事实上HTML/CSS/JS也可以看作是一个DSL，运行在C++写成的解释器(浏览器)上。

4、MFC是否已经过时？

  Microsoft Foundation Classes，是微软公司提供的类库，以 C++类的形式封装了Windows API，也是一个应用程序框架，用以减少应用程序开发人员的工作量。但令人遗憾的是MFC 在很多年前就已经停止更新了，微软官方现在也是在主推自家的 .net 技术，虽然 MFC 也被保留了下来，但更多的是为了一些旧的产品的维护开发使用，比如一些大公司的老旧产品是用MFC开发的，多年积累下来，想换一种框架重写的话，可能工作量无法估计，另外很可能会出现大量未知的bug，因此仍旧采用当下的MFC来维护不失为一种最稳妥的方式。

5、界面开发趋势——混合开发

  单纯做界面的话，那么最适合的可能是HTML/CSS/JS，理论上来讲它是把结构描述（HTML）、样式描述（CSS）和动态计算（JS）划分的最好的，并且高度标准化。假如你的GUI程序中不存在高性能实时渲染的话（如毫秒级更新的图表、或嵌入OpenGL/D3D窗口），那么配合前端之类的MVC库，软件操作手感和响应几乎可以达到和native程序一样，并且写起来比C++轻松和简洁很多，并且界面的美观性也可以得到保证。

  对于不那么追求软件包大小以及运行效率要求非顶尖的软件，其实目前比较流行的是C++混合开发，大体就是利用html+js来编写界面，然后利用控件方式嵌入C++中，后台的程序处理用C++来实现，这样也能保证客户端和web端的界面统一性，例如Qt提供的QWebengine控件，或者自己编译谷歌浏览器内核CEF，然后与Qt结合成QCefView使用，这是目前个人了解的较为流行的混合开发方式。