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
插件:
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>
上面的写法中我们可以看到,没有写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
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;
margin、padding
margin的缩写是 m
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一样
p-1 // padding: 4px;
px-1 // 在x轴上 padding-left: 4px; padding-right: 4px;
py-1 // 在y轴上 padding-top: 4px; padding-bottom: 4px;
字体大小
字体大小,使用 text-{size}
。不同的值对应不同的大小
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悬停
使用hover,设置鼠标悬停后文本设为黄色
<div class=" hover:text-red-400">
TailWind css
</div>
响应式设计
当宽度大于768px时 把背景色变为绿色
<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重写原生标签后的初始样式,把它删了就可以解决上面的一些问题,但可能也会导致一些不可预料的问题
// @tailwind base;
@tailwind components;
@tailwind utilities;
解决方法二:重写基础样式
在全局的css文件里 重写样式,用@layer base
重新自定义样式;
@layer
指令,Tailwind 将自动将这些样式移到 @tailwind base
的同一位置,以避免出现一些意
@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.
// 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。
安装:
npm install -D @tailwindcss/typography
然后将插件添加到 tailwind.config.js
文件中:
/** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [
require("@tailwindcss/typography")
],
}
最后在 div 添加 prose
类
<div class="prose ">
{{ markdown }}
</div>