一、自定義工具類配置

在 src/tailwind.css 文件中，我們可以通過 @layer utilities 指令添加自定義工具類：

@tailwind base;
@tailwind components;
@tailwind utilities;@layer utilities {/* 自定義工具 上下浮動效果 */.animate-floatY {animation: floatY 3s ease-in-out infinite;}@keyframes floatY {0% {transform: translateY(0px);}50% {transform: translateY(-20px);}100% {transform: translateY(0px);}}/* 自定義工具 左右浮動效果 */.animate-floatX {animation: floatX 3s ease-in-out infinite;}@keyframes floatX {0% {transform: translateX(0px);}50% {transform: translateX(-20px);}100% {transform: translateX(0px);}}}

最佳實踐建議：

1. 將動畫相關工具類集中管理

2. 使用語義化的類名命名

3. 考慮添加響應式變體

4. 為復雜動畫添加注釋說明

二、自定義主題配置示例

在 tailwind.config.js 中擴展主題：

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],theme: {extend: {colors: {primary: "#165DFF",secondary: "#36CFC9",accent: "#FF7D00",neutral: "#86909C","neutral-light": "#F2F3F5",},fontFamily: {inter: ["Inter", "sans-serif"],roboto: ["Roboto", "sans-serif"],},borderRadius: {"xl": "12px","2xl": "16px","3xl": "24px",},},},plugins: [],
};

通過以上配置，您可以構建出既保持 Tailwind CSS 高效性，又具有項目特色的樣式系統。 ?