70K star! 探秘目前最流行的css框架

今天给大家推荐一个拥有70K star的CSS框架——Tailwind CSS

Tailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k;今天就来探究一下为何Tailwind CSS这么受欢迎

Tailwind CSS 是什么？

Tailwind CSS是一个高度可定制的CSS框架，用于构建现代化的Web界面。它提供了一系列预定义的样式类，可以直接应用于HTML元素，从而快速而灵活地创建页面布局和设计。

与其他css框架相比，有什么优势？

与其他CSS框架相比，Tailwind CSS更注重原子化的类命名方式，使得开发者可以通过组合不同的类来构建所需的样式。这种方法使得样式的复用性更高，同时也提供了更大的灵活性和可定制性。而且还提供了一套强大的工具和插件，用于加速开发流程，例如响应式布局、响应式文本、间距管理等

解决了传统CSS框架的哪些问题？

样式冗余： 传统的CSS框架通常提供了大量的预定义样式，但往往会导致样式冗余。Tailwind CSS通过原子化的类命名方式，只提供基础的原子类，使得开发者可以根据需要组合这些类，避免了样式冗余的问题。
缺乏灵活性： 传统的CSS框架通常有一套固定的样式规则，难以满足个性化的需求。Tailwind CSS提供了大量的可定制的类，可以根据具体项目的需求进行灵活的样式定制，使得开发者可以更好地控制页面的外观和布局。
响应式设计： 响应式设计是现代Web开发中的重要需求，但传统的CSS框架对于响应式设计的支持有限。Tailwind CSS提供了一套强大的响应式工具和类，使得开发者可以轻松地创建适应不同屏幕尺寸的布局和样式。
开发效率： 传统的CSS框架可能需要开发者频繁地编写自定义样式，或者需要在HTML中添加大量的样式类。Tailwind CSS通过提供丰富的预定义类和实用工具，可以大大提高开发效率，减少样式代码的编写量。

快速入门

接下来就以Vue为例，看看Tailwind CSS 是如何安装和使用的

安装

安装 Tailwind CSS 和 PostCSS 插件：

npm install tailwindcss postcss autoprefixer

在项目根目录下创建一个 tailwind.config.js 文件，用于配置 Tailwind CSS：

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './public/index.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在项目根目录下创建一个 postcss.config.js 文件，用于配置 PostCSS 插件：

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

在 style.css 文件中导入 Tailwind CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来就可以使用Tailwind CSS来写样式了

Tailwind CSS 写法

先用常规的CSS写法写一个div

<template>
  <div class="content">传统css</div>
</template>
<script setup>
</script>
<style scoped>
.content{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: red;
}
</style>

使用 TailWind css 写样式：

<template>
 <div class="w-48 h-48 flex items-center justify-center border
   border-red-500 text-2xl text-red-500">
    TailWind css
  </div>
</template>

TailWind css会定义一些细粒度的 class，叫做原子 class，然后在 html 里直接引入这些原子化的 class。

插件

vscode 中可以安装 Tailwind CSS IntelliSense 插件来提升开发效率

在书写 Tailwind CSS 会有提示，而且当鼠标悬浮到class上时，也会有智能提示，可以查看它对应的样式。

常用写法

宽高设置

以w-开头，表示宽;h-开头，表示高

后面接数字，1=4px=0.25rem

w-1 //width: 0.25rem; /* 4px */
w-4 //width: 1rem; /* 16px */

后面接分数，表示百分比

w-1/2 // width: 50%;
w-1/4 // width: 25%;

后面接 [] 里面可以填写固定的值

w-[4rem] // width: 4rem;
w-[200px] // width: 200px;

后面也可以接一些固定的单词，表示常用的属性

w-full //width: 100%;
w-screen //width: 100vw;
w-min //width: min-content;
w-max //width: max-content;
w-fit //width: fit-content;

字符大小设置

字体大小，使用 text-{size}。不同的值对应不同的大小，有一些固定的值，相应的 CSS 样式在括号中。

text-xs //（字体大小：.75rem；）
text-sm //（字体大小：.875rem；）
text-base //（字体大小：1rem;）
text-lg //（字体大小：1.125rem；）
text-xl //（字体大小：1.25rem；）
text-2xl //（字体大小：1.5rem；）
text-3xl //（字体大小：1.875rem；）
text-4xl //（字体大小：2.25rem；)

同样可以使用 []定义大小

text-[14px] // font-size:14px)

悬停设置

使用hover,设置鼠标悬停后文本设为黄色

<div class=" hover:text-red-400">
    TailWind css
  </div>

响应式设计

当宽度大于768px时把背景色变为绿色

<div class="md:bg-green-500">
    TailWind css
  </div>

github: https://github.com/tailwindlabs/tailwindcss