Tailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k；而目前正好我也在学习Next.js，Next默认搭配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 插件：

js 复制代码

npm install tailwindcss postcss autoprefixer

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

js 复制代码

// 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 插件：

js 复制代码

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

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

css 复制代码

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

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

Tailwind CSS 写法

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

js 复制代码

<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 写样式：

js 复制代码

<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>

上面的写法中我们可以看到，没有写css代码，而是在类名 class中写 w-48、h-48、flex等类名

TailWind css会定义一些细粒度的 class，叫做原子 class，然后在 html 里直接引入这些原子化的 class，相当于css的缩写；在浏览器中会自动解析为对应的样式。

插件

TailWind css的原子类种类繁多，写的时候可能一时想不到样式对应的class名字

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

常用写法

宽高

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

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

js 复制代码

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

后面接分数，表示百分比

js 复制代码

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

后面接 \[\] 里面可以填写具体的值

js 复制代码

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

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

js 复制代码

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

margin、padding

margin的缩写是 m

css 复制代码

m-1 // margin: 4px;
mx-1 // 在x轴上 margin-left: 4px; margin-right: 4px;
my-1 // 在y轴上 margin-top: 4px; margin-bottom: 4px;

为单边添加边距: 使用 m{t|r|b|l}-{size} 实用程序控制元素一侧的边距。

padding 的缩写是p,使用方式与margin一样

css 复制代码

p-1 // padding: 4px;
px-1 // 在x轴上 padding-left: 4px; padding-right: 4px;
py-1 // 在y轴上 padding-top: 4px; padding-bottom: 4px;

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；)

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

js 复制代码

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

hover悬停

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

js 复制代码

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

响应式设计

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

js 复制代码

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

还有很多，可以自行查阅Tailwind css

问题&解决方案

Tailwindcss 影响基础样式

为了消除跨浏览器的不一致性 Tailwind css会默认将一些基础样式设置为普通文字样式，包括一下几种：

在Tailwindcss中 h1 到 h6 标签，所有标题元素，其字体大小与字体粗细与普通文本无差别。
在Tailwindcss中有序列表和无序列表: ul ,li默认情况下是无样式的，没有符号标记和数字，同时也没有外边距和内边距
在Tailwindcss中 标题、块引用、段落等元素的所有默认外边距。
正常情况下图片、svg、video、canvas 是行内块元素，在Tailwindcss中默认设置为 display:block
Tailwindcss重写了border所有元素的默认边框样式。

解决方法一：删除 base 基础样式

在入口导入全局样式时，我们在 style.css 文件中导入 Tailwind CSS：

其中有一个 @tailwind base; 里存放的是tailwind重写原生标签后的初始样式,把它删了就可以解决上面的一些问题，但可能也会导致一些不可预料的问题

js 复制代码

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

解决方法二：重写基础样式

在全局的css文件里重写样式,用@layer base重新自定义样式;

@layer指令，Tailwind 将自动将这些样式移到 @tailwind base的同一位置，以避免出现一些意

css 复制代码

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

// 自定义样式
 @layer base {
  h1 {
      @apply text-2xl;
  }
  h2 {
      @apply text-xl;
  }
  h3 {
      @apply text-lg;
  }
}

解决方法三：禁用preflight

在项目中的 tailwind.config.js中 corePlugins部分设置preflight设置为false.

js 复制代码

// tailwind.config.js 
module.exports = { 
  corePlugins: {
    preflight: false,
  }
}

Markdown样式不生效

TailWind css 和Markdown一块使用时，会发现 Markdown预览显示的样式会不生效，问题的原因还是因为 Tailwindcss 影响基础样式导致的

可以使用上面的几种方式去解决这个问题，但是Tailwindcss还提供了一种更好的解决方案

解决方法：安装 @tailwindcss/typography

官方的Tailwind CSS Typgraphy插件提供了一组 prose 类，可以使用它们为任何不受控制的普通HTML 添加漂亮的排版默认值，例如从Markdown呈现的HTML或从CMS中提取的HTML。

安装：

js 复制代码

npm install -D @tailwindcss/typography

然后将插件添加到 tailwind.config.js 文件中：

js 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require("@tailwindcss/typography")
  ],
}

最后在 div 添加 prose 类

js 复制代码

<div class="prose "> 
    {{ markdown }}
</div>

Tailwind css 在项目中的使用与问题

Tailwind CSS 是什么？

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

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

快速入门学习

安装

Tailwind CSS 写法

插件

常用写法

宽高

margin、padding

字体大小

hover悬停

响应式设计

问题&解决方案

Tailwindcss 影响基础样式

解决方法一：删除 base 基础样式

解决方法二：重写基础样式

解决方法三：禁用preflight

Markdown样式不生效

解决方法：安装 @tailwindcss/typography