Skip to main content

[tailwindcss] tailwindcss 基本筆記

Tailwind 為 CSS 框架，主要有以下優點

  1. Utility classes (功能性類別)，因此不需要特別去規範怎麼去寫 css，而是在 HTML 加上許多 class。
  2. 相同元件透過 classes 達到不同風格的畫面 (UI)
  3. 容量很小，tailwind 會自動拿掉用不到的 css，大部分的產品最終只有 10kb 以下的 css 檔案。

React 專案設置​

官方快速上手: Install Tailwind CSS with Create React App

tailwind.config.js​

一開始透過 npx tailwindcss init 產生 tailwind.config.js (tailwind 的設定檔)

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // tailwind 要套用的模板檔案，此處為 src 底下所有 js, jsx, ts, tsx 檔案。
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

關於 theme，裡面可以客製化顏色，像是 primary, secondary，也可以針對特定顏色去設定色票 (gray)

tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: "#202225",
        secondary: "#5865f2",
        gray: {
          900: "#202225",
          800: "#2f3136",
          700: "#36393f",
          600: "#4f545c",
          400: "#d4d7dc",
          300: "#e3e5e8",
          200: "#ebedef",
          100: "#f2f3f5",
        },
      },
    },
  },

使用 tailwind​

首先，先去安裝 vscode extension: "Tailwind CSS IntelliSense"

接著，在 HTML 內就可以寫 tailwind 定義的 class，來去達到畫面效果，下面為簡單範例

headwind\src\SideBar.js showLineNumbers
import { BsPlus, BsFillLightningFill, BsGearFill } from "react-icons/bs";
import { FaFire, FaPoo } from "react-icons/fa";
const SideBar = () => {
  return (
    <div
      className="fixed top-0 left-0 h-screen w-16 flex flex-col
                    bg-gray-100 text-gray-900
                    dark:bg-gray-900 dark:text-white
                    shadow-lg"
    >
      <SideBarIcon icon={<FaFire size="28" />} />
      <Divider />
      <SideBarIcon icon={<BsPlus size="32" />} />
      <SideBarIcon icon={<BsFillLightningFill size="20" />} />
      <SideBarIcon icon={<FaPoo size="20" />} />
      <Divider />
      <SideBarIcon icon={<BsGearFill size="22" />} />
    </div>
  );
};

第 6 行為基本的 tailwind 程式碼，固定元件在左上方 fixed top-0 left-0、給予 flex flex-col，第 7 - 8 行則是定義一般情況的背景色和文字顏色為 bg-gray-100 text-gray-900 ，暗色模式為 dark:bg-gray-900 dark:text-white ，最後的 shadow-lg 可以看插件怎麼說明

@apply​

@apply: combine utilities into a single class.

有時候，不是使用類似 react, vue, angular 的元件框架，@apply 是 Tailwind CSS 提供的一種特殊指令，用於將一組樣式類別（class）應用到一個元素上。

在上面的範例中 SideBarIcon 元件如下，有著 .sidebar-icon 的類別

headwind\src\SideBar.js
const SideBarIcon = ({ icon, text = "tooltip 💡" }) => (
  <div className="sidebar-icon group">
    {icon}
    <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
  </div>
);

我們去 index.css 定義 .sidebar-icon 類別的樣式

headwind\src\index.css showLineNumbers
@layer components {
  .sidebar-icon {
    @apply relative flex items-center justify-center
    h-12 w-12 mt-2 mb-2 mx-auto
  bg-gray-400 hover:bg-green-600 dark:bg-gray-800
  text-green-500 rounded-3xl
   hover:text-white hover:rounded-xl
    transition-all duration-300 ease-linear
    cursor-pointer shadow-lg;
  }

如此一來，SideBarIcon 就會長得如下，值得注意的是透過 hover:bg-green-600, hover:text-white, hover:rounded-xl, transition-all duration-300 ease-linear 也可以達到 hover 動畫效果。

Tailwind 小抄​

參考資料​