前言
先说说什么是Tailwind CSS
?
Tailwind CSS
是一个实用优先的 CSS
原子化框架,它提供了一套丰富的工具类,让我们能够快速构建样式。并且Tailwind CSS
不提供预定义好的组件或布局,而是提供了一系列可以直接应用于 HTML
元素上的 CSS
类,大白话说也就是提前定义好大量通用的类让我们能直接使用,而无需编写自定义 CSS
。Tailwind 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 CSS
和 Autoprefixer
的插件
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
(5)引入Tailwind CSS
在我们的全局样式文件中引入 Tailwind CSS
。如果你使用的是 Vite
,通常在 src/main.js
或 src/main.ts
文件中引入
import 'tailwindcss/tailwind.css'
或者在 src/assets
目录下创建一个 tailwind.css
文件,并在 src/main.js
或 src/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
用到的类在下面将会说到
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
用到的类在下面将会说到
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>
效果如下所示一套代码,不同分辨率布局会不同
(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>
(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>
(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>
(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>
小结:
我们日常使用传统的 css
写法是定义 class
,然后在 class
里面写样式,而Tailwind CSS
原子化 css
是预定义一些细粒度 class
,也就是提前写好一堆通用的class
让我们直接使用,然后通过组合自定义 class
的方式完成样式编写。
Tailwind CSS
看上去好像很多很复杂,其实很多语法跟css
很像的有规律容易记住,一旦上手了就巨好用,特别是连class
命名都是不用自己想太爽了,开发效率高很多。如果文章哪里有误或者有哪里不好欢迎大佬指导,谢谢阅读。