個(gè)人中心
退出
TailwindCss入門寶典
tailwindcss是一個(gè) css 的框架，官方解釋是無需離開 HTML，即可快速構(gòu)建現(xiàn)代網(wǎng)站。個(gè)人最大感受是，復(fù)用 css，減少了重復(fù)繁瑣的樣式，在響應(yīng)式上提供斷點(diǎn)設(shè)計(jì)，讓我們可以少寫很多的重復(fù)代碼。本文是一篇tailwindcss實(shí)踐的一些感受，希望在項(xiàng)目中有所幫助。
主要會(huì)從以下幾個(gè)點(diǎn)去認(rèn)識(shí)tailwindcss
tailwindcss的一些注意事項(xiàng)
如何配置自定義斷點(diǎn)
配置 css 動(dòng)畫設(shè)置
如何為網(wǎng)站切換暗黑模式
正文開始...
使用 nextjs 初始化了一份項(xiàng)目
由于nextjs可以默認(rèn)集成tailwindcss，所以學(xué)習(xí)tailwindcss可以直接使用 nextjs 集成tailwindcss
一行命令就可以初始化一個(gè)wailwindcss項(xiàng)目了
npx create-next-app@latest
初始化項(xiàng)目后我們看到這份配置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是一個(gè)很重要的配置，很多自定義的斷點(diǎn)，我們就可以在這個(gè)文件設(shè)置。
我們看到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是啥玩意，咋記得住，別急，寫兩天，你就會(huì)覺得這些類名都是有跡可循。
我們看到html代碼里寫了很多tailwindcss的 class，但實(shí)際上，這么寫實(shí)在是很糟糕，因?yàn)閷?duì)于后期的維護(hù)就很難受
因此當(dāng)你的項(xiàng)目上正在使用tailwindcss時(shí)，如果你看到以上的代碼，你應(yīng)該這樣
<p className="start-text">
Get started by editing
<code className="font-mono font-bold">src/app/page.tsx</code>
</p>
對(duì)應(yīng)的 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
}
此時(shí)的在html中的一連串代碼就用一個(gè)自己的類名，然后使用@apply將模版上的代碼寫入到了html中
其實(shí)我們會(huì)發(fā)現(xiàn)，.start-text的樣式里，我們使用了@apply,在apply中所有的樣式基本都是tailwindcss的class
在.start-text那段樣式本質(zhì)上就等價(jià)于
.start-text{
position: fixed;
left:0;
top:0;
display: flex;
...
}
當(dāng)你使用tailwindcss后，你這些樣式就不用自己寫了，本質(zhì)上就是在這個(gè)標(biāo)簽元素上有這些樣式。并且我們看到還有斷點(diǎn)的設(shè)置；
在編寫tailwindcss的樣式上，初次看到這些left-0,fixed,w-full,justify-center，這些樣式咋記得住呢？
別急，樣式記不住，官網(wǎng)搜下就行
官網(wǎng)所有的樣式都有，你可以理解fixed,w-full就是你樣式的簡(jiǎn)寫
關(guān)于常用設(shè)置那些屬性
比如我們切圖常常會(huì)修改元素的寬度，高度，背景，字體大小等等
<div class="container-app">Web技術(shù)學(xué)苑</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確實(shí)減少了你寫樣式的時(shí)間，個(gè)人建議如果在模版里tailwindcss有超過兩個(gè)就使用自定義類名，然后使用@apply去繼承使用tailwindcss
下面是不太建議的用法，與上面示例代碼效果一致
<div class="w-[100px] h-[100px] bg-[red] text-[16px] text-[#111]">公眾號(hào)：Web技術(shù)學(xué)苑</div>
響應(yīng)式自定義斷點(diǎn)
我們知道官方響應(yīng)式上，是默認(rèn)的，我們可以看到官方是一下幾個(gè)斷點(diǎn)
斷點(diǎn)前綴 最小寬度 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) { ... }
如何使用這些斷點(diǎn)
<div class="sm:flex md:block">Web技術(shù)學(xué)苑</div>
上面這段代碼的意思就是，如果屏幕尺寸 768 以上的，那么就顯示block這個(gè)樣式，如果在 640~768 之間的，那么就顯示flex,這是官方默認(rèn)的斷點(diǎn)，實(shí)際上在響應(yīng)式上，默認(rèn)官方斷點(diǎn)就可以滿足不同分辨率下的尺寸了。但是有時(shí)，我們的業(yè)務(wù)需求里并不需要這么多的斷點(diǎn)，此時(shí)我們需要自己自定義斷點(diǎn)。
比如我在 1024 以下就顯示移動(dòng)端樣式，1024 以上就顯示 pc 樣式，那么此時(shí)斷點(diǎn)你可以這么設(shè)置screens[1]
// 在tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'pc': {
min: "1025px"
},
// => @media (min-width: 1025px) { ... }
'phone': {
max: '1024px'
},
// => @media (max-width: 1024px) { ... }
},
}
}
}
我們?cè)趖ailwind.config的 extend 選項(xiàng)中擴(kuò)展了screens,設(shè)置了pc與phone的兩個(gè)不同斷點(diǎn)，因此在移動(dòng)端與 pc 上，我們?cè)跇邮娇刂粕现恍璺謩e寫這兩個(gè)斷點(diǎn)即可
<div class="container-app">公眾號(hào)：Web技術(shù)學(xué)苑</div>
對(duì)應(yīng)的css
.container-app {
@apply pc: flex;
@apply phone: block;
}
這樣我們pc與移動(dòng)端的樣式就很輕松的使用斷點(diǎn)解決了
如何添加自定義動(dòng)畫
在官方提供了一些動(dòng)畫名，你直接在 css 中這樣使用即可
<div className="animate-bounce">公眾號(hào)：Web技術(shù)學(xué)苑</div>
你會(huì)發(fā)現(xiàn)，這個(gè)官方的動(dòng)畫就直接 ok 了，但我想自定義一個(gè)自己的動(dòng)畫呢
我們繼續(xù)修改配置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: [],
};
對(duì)應(yīng)的 css 如下
<p className="public-text">公眾號(hào)：Web技術(shù)學(xué)苑</p>
.public-text {
@apply animate-customer_opacity-in-bounce
}
所以一個(gè)這樣的自定義動(dòng)畫就已經(jīng) ok 了
如何修改整站暗黑模式
在tailwindcss中已經(jīng)有解決方案，我們只需要改一行配置就行,我們?cè)趖ailwindcss.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中指定你修改的區(qū)塊為`dark`就行
```css
.app {
@apply dark:bg-[#111];
}
注意在頁面的根節(jié)點(diǎn)上，我們必須寫入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">公眾號(hào)：Web技術(shù)學(xué)苑</p>
<p className="web-content">learn.wmcweb.cn</p>
</div>
</main>
</div>
);
});
export default memo(Home);
在我們主頁面上，我們使用className，這個(gè)值取的是store.theme,在數(shù)據(jù)通信上，使用的是mbox，具體使用可以參考mbox[2]
最后看下結(jié)果：
好了一篇比較簡(jiǎn)單的tailwindcss介紹就到此結(jié)束，關(guān)于tailwindcss還有很多，如果你有不一樣的思考和感受，歡迎大家討論，一起探索更多在實(shí)際業(yè)務(wù)中的可能。
總結(jié)
了解tailwindcss的一些使用，不太建議模版寫太多的tailwind而是用自定義樣式聚合起來
學(xué)會(huì)配置定義斷點(diǎn)，配置移動(dòng)端與 pc 端不同斷點(diǎn)
如何配置設(shè)置 css3 動(dòng)畫，如何在tailwindcss中配置css3動(dòng)畫
網(wǎng)站的暗黑模式，通過darkMode模式切換兩種不同的主題風(fēng)格
本文示例 code example[3]
作者：Maic
歡迎關(guān)注微信公眾號(hào) ：web技術(shù)學(xué)苑
分類導(dǎo)航