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

最新推荐文章于 2025-07-25 19:03:57 发布

编程猪猪侠

最新推荐文章于 2025-07-25 19:03:57 发布

阅读量99

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/a3212768093/article/details/149630265

一、自定义工具类配置

在 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);
        }
    }

}

最佳实践建议：

将动画相关工具类集中管理
使用语义化的类名命名
考虑添加响应式变体
为复杂动画添加注释说明

二、自定义主题配置示例

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