言

又到周五了，是時候該放個大招了。哈哈~~

提到 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使用，這是目前個人了解的較為流行的混合開發方式。