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&nbsp;
  <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&nbsp;
  <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)搜下就行

238424bk-1.png

官網(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é)果:

238424bk-2.gif

好了一篇比較簡(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é)苑