你还在用普通css写样式?学学Tailwind CSS原子化框架吧,从零到一教程

1,507 阅读11分钟

前言

先说说什么是Tailwind CSS
Tailwind CSS 是一个实用优先的 CSS 原子化框架,它提供了一套丰富的工具类,让我们能够快速构建样式。并且Tailwind CSS 不提供预定义好的组件或布局,而是提供了一系列可以直接应用于 HTML 元素上的 CSS 类,大白话说也就是提前定义好大量通用的类让我们能直接使用,而无需编写自定义 CSSTailwind CSS 的核心理念是将样式直接应用到 HTML 元素上,而不是将样式和标记完全分离。这种方法可以避免全局命名空间的问题,提高样式的可预测性和可维护性。

下面将结合Vue从如何安装到使用语法详细去说明Tailwind CSS。其中使用语法是所有框架通用的,只是本人主要用vue开发所以用vue为例子。

一、Vue项目集成 Tailwind CSS

(1) 安装必要的依赖

注意: 确保你的 Vue3 项目已创建。然后安装 Tailwind CSS 和相关的 PostCSS 插件

npm install -D tailwindcss postcss@^8.4.5 autoprefixer

(2)初始化 Tailwind CSS

使用下面命令 Tailwind CSS,这将生成 tailwind.config.js 和更新 postcss.config.js 文件。

npx tailwindcss init -p

(3)配置 Tailwind CSS

编辑 tailwind.config.js 文件,我们可以在这里配置主题和插件。

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

(4)配置 PostCSS

确保我们的 postcss.config.js 文件包含 Tailwind CSSAutoprefixer 的插件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

(5)引入Tailwind CSS

在我们的全局样式文件中引入 Tailwind CSS。如果你使用的是 Vite,通常在 src/main.jssrc/main.ts 文件中引入

import 'tailwindcss/tailwind.css'

或者在 src/assets 目录下创建一个 tailwind.css 文件,并在 src/main.jssrc/main.ts 中引入它:

import './assets/tailwind.css'

(6)使用Tailwind CSS

现在我们可以在 Vue3`` 的单文件组件中使用 Tailwind CSS` 的实用程序类了。

<template>
  <div class="bg-blue-500 text-white p-4 rounded-lg">
    Hello Tailwind!
  </div>
</template>

到这一步其实就可以正常使用了,下面将会讲解具体的使用语法。

二、Tailwind CSS的具体用法

Tailwind CSS 的使用语法主要体现在大量现在的类(utility classes)上,这些类可以让我们在 HTML中直接使用,而无需编写自定义 CSS。以下是 Tailwind CSS 中一些常见实用程序类的语法和使用示例

(1)Tailwind CSS的基础布局汇总

在布局方面主要提供了几种布局方式,分别是Flexbox布局、Grid 布局和响应式布局,为了方便分类下面将拆解讲解

1、Flexbox 布局

Tailwind CSS 针对Flexbox布局提供了大量类,这些类命名和css非常相似方便记忆,下面总结出常用的类,方便查阅。

//#### 容器相关的类-------------------------------
.flex: 创建一个 flex 容器。
.flex-row: 设置主轴方向为水平。
.flex-col: 设置主轴方向为垂直。
.flex-wrap: 允许项目换行。
.flex-nowrap: 禁止项目换行。

//#### 对齐方式相关的类-------------------------------
.justify-start: 主轴起始位置对齐。
.justify-end: 主轴结束位置对齐。
.justify-center: 主轴居中对齐。
.justify-between: 主轴两端对齐,项目间平均分布。
.justify-around: 主轴两端对齐,项目间间隔相等。
.items-start: 交叉轴起始位置对齐。
.items-end: 交叉轴结束位置对齐。
.items-center: 交叉轴居中对齐。
.items-baseline: 交叉轴对齐到基线。

#### 空间分配相关的类-------------------------------
.flex-grow: 项目将占据剩余空间。
.flex-shrink: 项目可以缩小。
.flex-basis-[value]: 设置项目的初始大小。
实操代码和效果示例
<div class="flex flex-col justify-center items-center">
  <div class="bg-blue-500 w-24 h-24"></div>
  <div class="bg-green-500 w-24 h-24"></div>
  <div class="bg-red-500 w-24 h-24"></div>
</div>

上述例子中,我们只需要学习class="flex flex-col justify-center items-center"实现了布局效果,内层div用到的类在下面将会说到

image.png

2. Grid 布局

Grid 布局提供了更复杂且强大的布局方式,这些类命名和css非常相似方便记忆,下面总结出常用的类,方便查阅。

//#### 容器相关的类:
.grid: 创建一个 grid 容器。
.grid-cols-[value]: 设置列的数量。
.grid-rows-[value]: 设置行的数量。
.gap-[value]: 设置 grid 项目之间的间隙。

//#### 空间分配相关的类:
.col-span-[value]: 设置项目跨越的列数。
.row-span-[value]: 设置项目跨越的行数。
.col-start-[value]: 设置项目的起始列。
.row-start-[value]: 设置项目的起始行。
实操代码和效果示例
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 col-span-2 row-span-2">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
  <div class="bg-yellow-500">4</div>
</div>

上述例子中,我们只需要学习grid"相关的布局效果,内层div用到的类在下面将会说到

image.png

3. 响应式布局

Tailwind CSS 的响应式布局设计应对不同屏幕的兼容性非常好,通过定义好的工具类使我们在不同的屏幕尺寸下应用不同的样式。以下是 Tailwind CSS 中响应式布局的工具类汇总:

// Tailwind CSS 默认提供了以下像素分层
sm: 小屏,大约 640px 宽度及以上的屏幕
md: 中屏,大约 768px 宽度及以上的屏幕
lg: 大屏,大约 1024px 宽度及以上的屏幕
xl: 超大屏,大约 1280px 宽度及以上的屏幕
2xl: 非常大的屏幕,大约 1536px 宽度及以上

响应式工具类的使用语法是在类名前加上分层前缀,例如 .sm:text-lg 表示在小屏及以上设备上应用 text-lg 类。

实操代码和效果示例
<div class="flex flex-col md:flex-row justify-between">
    <h1 class="text-3xl font-bold mb-4 md:mb-0">欢迎来到天天鸭的博客</h1>
    <p class="text-lg">这是一个响应式的段落,会根据屏幕大小调整。</p>
</div>

效果如下所示一套代码,不同分辨率布局会不同

image.png

image.png

(2)文本样式

Tailwind CSS 提供提供的工具类能够快速地调整文本的外观,无需编写自定义的 CSS 样式。,这些类命名和css非常相似方便记忆以下是一些文本样式的详细说明和示例:

// 文本颜色 -------------------------------------------------------------
.text-black, .text-white, .text-gray-100... .text-gray-900
.text-primary, .text-secondary, .text-success, .text-error
.text-transparent
.text-current 使用元素的 color 属性值作为文本颜色
.text-inherit 继承父元素的文本颜色
.text-opacity- 设置文本的不透明度

// 文本大小-------------------------------------------------------------
.text-xs, .text-sm, .text-base, .text-lg, 
.text-xl, .text-2xl, .text-3xl, .text-4xl,
.text-5xl,.text-6xl, .text-7xl
.leading -- (控制行高)

// 文本对齐-------------------------------------------------------------
.text-left, .text-center, .text-right, .text-justify

// 字体加粗-------------------------------------------------------------
.font-normal, .font-medium, .font-semibold,
.font-bold, .font-extrabold, .font-black

// 文本装饰-------------------------------------------------------------
.underline, .line-through, .no-underline
.hover:underline, .focus:underline

// 文字阴影-------------------------------------------------------------
.text-shadow-sm, .text-shadow-md, .text-shadow-lg
.text-shadow-[length], .text-shadow-[length]_[length]

// 文本转换-------------------------------------------------------------
.uppercase, .lowercase, .capitalize, .normal-case

// 文本溢出-------------------------------------------------------------
.truncate, .overflow-hidden
.line-clamp-, .line-clamp-[number] 控制多行文本截断

// 字体系列---自定义字体需要在配置文件中定义-------------------------------------------------------------
.font-sans, .font-serif, .font-mono

// 字体大小的响应式变体-------------------------------------------------------------
.sm:text-lg, .md:text-xl, .lg:text-2xl, .xl:text-3xl, .2xl:text-4xl
实操代码和效果示例
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold text-blue-500 mb-4">欢迎来到我的博客</h1>
    <p class="text-lg text-gray-700 leading-relaxed">
      这是一段示例文本,用于展示Tailwind
      CSS的文本样式。我们使用了不同的类来调整文本的颜色、大小、对齐方式以及行高。
    </p>
    <p class="text-lg text-gray-700 underline hover:text-red-500">
      这段文本在悬停时会变成红色,并且始终有下划线。
    </p>
    <p class="text-lg text-gray-700 uppercase"> 这里所有的文本都被转换成了大写字母。 </p>
    <p class="text-lg text-gray-700 truncate">
      如果文本太长,超出的部分会被截断,并显示省略号。
    </p>
    <p class="text-lg text-gray-700 line-clamp-2">
      这段文本将被截断为最多两行,超出部分显示省略号。
    </p>
  </div>
</div>

image.png

(3)边距和填充

Tailwind CSS 提供了大量工具类来控制元素的边距(margin)和填充(padding)。这些类使得我们能够快速地调整布局,而无需编写自定义 CSS。以下是边距和填充类的汇总及使用示例:

// 边距(Margin)--------------------------------------
    四向边距:.m- (所有边)
    垂直边距:.my- (顶部和底部)
    水平边距:.mx- (左侧和右侧)
    顶部边距:.mt-
    右侧边距:.mr-
    底部边距:.mb-
    左侧边距:.ml-

// 填充(Padding)---------------------------------------------
    四向填充:.p- (所有边)
    垂直填充:.py- (顶部和底部)
    水平填充:.px- (左侧和右侧)
    顶部填充:.pt-
    右侧填充:.pr-
    底部填充:.pb-
    左侧填充:.pl-

// 边距和填充的值----------------------------------
    固定单位:0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128
    响应式单位:.sm:, .md:, .lg:, .xl:, .2xl:
    百分比:.mr-1/2, .ml-auto (自动计算)

//负边距--------------------------------------------
    负四向边距:.-m-
    负垂直边距:.--my-
    负水平边距:.--mx-
    负顶部边距:.--mt-
    负右侧边距:.--mr-
    负底部边距:.--mb-
    负左侧边距:.--ml-
实操代码和效果示例
 <div class="container mx-auto p-4">
    <div class="bg-blue-500 p-4 my-4 text-white">
      这是一个带有蓝色背景、内部填充和垂直边距的盒子。
    </div>
    <div class="bg-green-500 p-2 px-4 py-3 mx-auto max-w-md text-white">
      这个盒子有绿色背景,自适应宽度,水平居中,水平填充更多,垂直填充较少。
    </div>
    <div class="bg-yellow-500 p-4 -mt-8 text-white">
      这个盒子有黄色背景,顶部负边距使它与上面的盒子重叠。
    </div>
  </div>

image.png

(4)边框

Tailwind CSS 能控制边框样式,包括边框宽度、颜色、样式、半径以及边框阴影。下面是一些边框相关的工具类汇总和使用示例:

// 边框宽度------------------------------------------------
.border: 添加默认边框(1px solid)
.border-t, .border-r, .border-b, .border-l: 分别添加顶部、右侧、底部、左侧边框
.border-x, .border-y: 添加左右两侧或上下两侧边框
.border-[width]: 指定边框宽度,如 .border-2 表示2px宽度

// 边框颜色------------------------------------------------
.border-black, .border-white, .border-gray-100... .border-gray-900: 不同颜色的边框
.border-transparent: 透明边框
.border-current: 使用元素的 currentColor 作为边框颜色
.border-[color]: 自定义边框颜色,如 .border-red-500

// 边框样式------------------------------------------------
.border-solid: 实线边框(默认)
.border-dashed: 虚线边框
.border-dotted: 点线边框
.border-double: 双线边框
.border-none: 无边框

// 边框半径------------------------------------------------
.rounded: 默认圆角边框
.rounded-full: 完全圆形的边框
.rounded-t, .rounded-r, .rounded-b, .rounded-l: 分别设置顶部、右侧、底部、左侧的圆角
.rounded-tr, .rounded-br, .rounded-bl, .rounded-tl: 设置特定角落的圆角
.rounded-[radius]: 自定义圆角大小,如 .rounded-lg

// 边框阴影------------------------------------------------
.shadow-sm, .shadow, .shadow-lg, .shadow-xl: 不同大小的阴影
.shadow-inner: 内部阴影
.shadow-[color]: 自定义阴影颜色
.shadow-[length]: 自定义阴影长度
.shadow-[length]_[length]: 自定义阴影位置和模糊程度
实操代码和效果示例
<div class="container mx-auto p-4">
    <div class="border border-blue-500 rounded-lg p-4 my-4">
      这是一个带有蓝色边框和圆角的盒子。
    </div>
    <div
      class="border-t-4 border-t-red-500 border-b-2 border-b-green-500 rounded-t-xl rounded-b-lg p-4 my-4"
    >
      这个盒子有顶部和底部的不同边框,顶部边框更宽且颜色为红色,底部边框较窄且颜色为绿色。
    </div>
    <div class="border border-dashed border-gray-400 rounded-lg shadow-lg p-4 my-4">
      这个盒子有虚线边框,圆角和较大的阴影。
    </div>
 </div>

image.png

(5)其他

除了前面提到的基础布局、文本样式、边距填充、边框和响应式设计之外,Tailwind CSS 还提供了许多其他工具类来控制各种样式属性。以下是一些其他语法的汇总与使用示例:

// 宽度和高度 -------------------------------------------
.w-screen, .h-screen: 占满整个视口的宽度或高度
.w-full, .h-full: 占满父元素的宽度或高度
.w-auto, .h-auto: 自动宽度或高度
.w-[width], .h-[height]: 固定宽度或高度,如 .w-1/2 或 .h-20
.min-w-[width], .min-h-[height]: 最小宽度或高度
.max-w-[width], .max-h-[height]: 最大宽度或高度

// 显示和可见性 -------------------------------------------
.block, .inline-block, .inline, .flex, .grid, .hidden: 控制元素的显示模式
.opacity-, .bg-opacity-, .text-opacity-: 设置不透明度
.visible, .invisible: 设置元素是否可见
// 背景 -------------------------------------------
.bg-[color]: 背景色,如 .bg-blue-500
.bg-gradient-to-: 渐变背景,如 .bg-gradient-to-r from-blue-500 to-red-500
.bg-cover, .bg-contain, .bg-repeat, .bg-no-repeat, .bg-fixed, .bg-scroll: 背景图片的大小、重复和定位

// 位置和定位 ------ -------------------------------------------
.absolute, .relative, .sticky, .fixed: 定位类型
.top-, .right-, .bottom-, .left-: 定位偏移量

// 动画和过渡 -------------------------------------------
.animate-: 动画效果,如 .animate-pulse
.transition-, .duration-, .delay-, .ease-: 过渡效果

// 盒模型 -------------------------------------------
.overflow-, .scrollbar-: 控制溢出和滚动条样式
.object-: 图像裁剪和缩放方式

// 交互状态 -------------------------------------------
.hover:, .focus:, .active:, .group-hover:, .focus-within:, .focus-visible:, .disabled:: 伪类选择器

// 自定义样式 -------------------------------------------
.prose: 优化长文本的排版
.divide-: 列表项之间的分割线样式
实操代码和效果示例
      <div class="container mx-auto p-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
          <div
            class="bg-gray-200 p-4 rounded-lg hover:bg-gray-300 transition duration-300 ease-in-out"
          >
            <p>将鼠标悬停在此框上以查看颜色变化。</p>
          </div>
          <div
            class="bg-gray-200 p-4 rounded-lg active:bg-gray-300 transition duration-300 ease-in-out"
          >
            <p>点击此框以查看颜色变化。</p>
          </div>
        </div>
      </div>

动画.gif

小结:

我们日常使用传统的 css 写法是定义 class,然后在 class 里面写样式,而Tailwind CSS原子化 css 是预定义一些细粒度 class,也就是提前写好一堆通用的class让我们直接使用,然后通过组合自定义 class 的方式完成样式编写。

Tailwind CSS看上去好像很多很复杂,其实很多语法跟css很像的有规律容易记住,一旦上手了就巨好用,特别是连class命名都是不用自己想太爽了,开发效率高很多。如果文章哪里有误或者有哪里不好欢迎大佬指导,谢谢阅读。