个人中心
退出
TailwindCss入门宝典
tailwindcss是一个 css 的框架，官方解释是无需离开 HTML，即可快速构建现代网站。个人最大感受是，复用 css，减少了重复繁琐的样式，在响应式上提供断点设计，让我们可以少写很多的重复代码。本文是一篇tailwindcss实践的一些感受，希望在项目中有所帮助。
主要会从以下几个点去认识tailwindcss
tailwindcss的一些注意事项
如何配置自定义断点
配置 css 动画设置
如何为网站切换暗黑模式
正文开始...
使用 nextjs 初始化了一份项目
由于nextjs可以默认集成tailwindcss，所以学习tailwindcss可以直接使用 nextjs 集成tailwindcss
一行命令就可以初始化一个wailwindcss项目了
npx create-next-app@latest
初始化项目后我们看到这份配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
tailwind.config.js是一个很重要的配置，很多自定义的断点，我们就可以在这个文件设置。
我们看到page.tsx
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing
<code className="font-mono font-bold">src/app/page.tsx</code>
</p>
初看一眼这样式，这些class是啥玩意，咋记得住，别急，写两天，你就会觉得这些类名都是有迹可循。
我们看到html代码里写了很多tailwindcss的 class，但实际上，这么写实在是很糟糕，因为对于后期的维护就很难受
因此当你的项目上正在使用tailwindcss时，如果你看到以上的代码，你应该这样
<p className="start-text">
Get started by editing
<code className="font-mono font-bold">src/app/page.tsx</code>
</p>
对应的 css
.start-text {
@apply fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30
}
此时的在html中的一连串代码就用一个自己的类名，然后使用@apply将模版上的代码写入到了html中
其实我们会发现，.start-text的样式里，我们使用了@apply,在apply中所有的样式基本都是tailwindcss的class
在.start-text那段样式本质上就等价于
.start-text{
position: fixed;
left:0;
top:0;
display: flex;
...
}
当你使用tailwindcss后，你这些样式就不用自己写了，本质上就是在这个标签元素上有这些样式。并且我们看到还有断点的设置；
在编写tailwindcss的样式上，初次看到这些left-0,fixed,w-full,justify-center，这些样式咋记得住呢？
别急，样式记不住，官网搜下就行
官网所有的样式都有，你可以理解fixed,w-full就是你样式的简写
关于常用设置那些属性
比如我们切图常常会修改元素的宽度，高度，背景，字体大小等等
<div class="container-app">Web技术学苑</div>
编写tailwindcss样式
.container-app {
@apply w-[100px] h-[100px] bg-[red] text-[16px] text-[#111]
}
以上代码如果用 css 来写呢，就是一大堆 css 代码了
.container-app {
width: 100px;
height: 100px;
background-color:red;
font-size:16px;
color: #111;
}
比较起来，使用tailwindcss确实减少了你写样式的时间，个人建议如果在模版里tailwindcss有超过两个就使用自定义类名，然后使用@apply去继承使用tailwindcss
下面是不太建议的用法，与上面示例代码效果一致
<div class="w-[100px] h-[100px] bg-[red] text-[16px] text-[#111]">公众号：Web技术学苑</div>
响应式自定义断点
我们知道官方响应式上，是默认的，我们可以看到官方是一下几个断点
断点前缀 最小宽度 css
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
如何使用这些断点
<div class="sm:flex md:block">Web技术学苑</div>
上面这段代码的意思就是，如果屏幕尺寸 768 以上的，那么就显示block这个样式，如果在 640~768 之间的，那么就显示flex,这是官方默认的断点，实际上在响应式上，默认官方断点就可以满足不同分辨率下的尺寸了。但是有时，我们的业务需求里并不需要这么多的断点，此时我们需要自己自定义断点。
比如我在 1024 以下就显示移动端样式，1024 以上就显示 pc 样式，那么此时断点你可以这么设置screens[1]
// 在tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'pc': {
min: "1025px"
},
// => @media (min-width: 1025px) { ... }
'phone': {
max: '1024px'
},
// => @media (max-width: 1024px) { ... }
},
}
}
}
我们在tailwind.config的 extend 选项中扩展了screens,设置了pc与phone的两个不同断点，因此在移动端与 pc 上，我们在样式控制上只需分别写这两个断点即可
<div class="container-app">公众号：Web技术学苑</div>
对应的css
.container-app {
@apply pc: flex;
@apply phone: block;
}
这样我们pc与移动端的样式就很轻松的使用断点解决了
如何添加自定义动画
在官方提供了一些动画名，你直接在 css 中这样使用即可
<div className="animate-bounce">公众号：Web技术学苑</div>
你会发现，这个官方的动画就直接 ok 了，但我想自定义一个自己的动画呢
我们继续修改配置tailwind.config文件
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
screens: {
pc: {
min: "1025px",
},
phone: {
max: "1024px",
},
},
keyframes: {
"opacity-in-bounce": {
"0%": {
opacity: 0.3,
color: "red",
transform: "translateY(-25%)",
"animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
},
"50%": {
opacity: 0.5,
color: "green",
transform: " translateY(0)",
"animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
},
"100%": {
opacity: 1,
color: "blue",
transform: "translateY(-25%)",
"animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
},
},
},
animation: {
"customer_opacity-in-bounce": "opacity-in-bounce 5s infinite ease",
},
},
},
plugins: [],
};
对应的 css 如下
<p className="public-text">公众号：Web技术学苑</p>
.public-text {
@apply animate-customer_opacity-in-bounce
}
所以一个这样的自定义动画就已经 ok 了
如何修改整站暗黑模式
在tailwindcss中已经有解决方案，我们只需要改一行配置就行,我们在tailwindcss.config中加入darkMode:'class'
module.exports = {
content: [
"./src/app/*.{js,ts,jsx,tsx,mdx}",
"./src/pages/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: "class",
plugins: [],
};
然后在css中指定你修改的区块为`dark`就行
```css
.app {
@apply dark:bg-[#111];
}
注意在页面的根节点上，我们必须写入class样式
import React, { memo, useRef, useState } from "react";
import Image from "next/image";
import ModelWrap from "../components/model-wrap";
import { observer } from "mobx-react-lite";
import store from "@/store";
const Home = observer(() => {
return (
<div className={store.theme}>
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 app`}
>
<ModelWrap />
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
<p className="public-text">公众号：Web技术学苑</p>
<p className="web-content">learn.wmcweb.cn</p>
</div>
</main>
</div>
);
});
export default memo(Home);
在我们主页面上，我们使用className，这个值取的是store.theme,在数据通信上，使用的是mbox，具体使用可以参考mbox[2]
最后看下结果：
好了一篇比较简单的tailwindcss介绍就到此结束，关于tailwindcss还有很多，如果你有不一样的思考和感受，欢迎大家讨论，一起探索更多在实际业务中的可能。
总结
了解tailwindcss的一些使用，不太建议模版写太多的tailwind而是用自定义样式聚合起来
学会配置定义断点，配置移动端与 pc 端不同断点
如何配置设置 css3 动画，如何在tailwindcss中配置css3动画
网站的暗黑模式，通过darkMode模式切换两种不同的主题风格
本文示例 code example[3]
作者：Maic
欢迎关注微信公众号 ：web技术学苑
分类导航