Tailwind CSS 自定义工具类与主题配置指南

一、自定义工具类配置

在 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 高效性，又具有项目特色的样式系统。