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