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

一、自定义工具类配置

src/tailwind.css 文件中,我们可以通过 @layer utilities 指令添加自定义工具类:

css 复制代码
@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 中扩展主题:

javascript 复制代码
/** @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 高效性,又具有项目特色的样式系统。

相关推荐
梦之云6 小时前
state 状态相关
前端
梦之云6 小时前
effect 副作用相关
前端
golang学习记6 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia6 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace7 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits7 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫7 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒8 小时前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀8 小时前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程8 小时前
FireFox如何滚动截屏?
前端·firefox