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

相关推荐
李鸿耀2 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者7 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost8 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11068 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白8 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学9 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽9 小时前
【初学】调试 MCP Server
前端·mcp
四月_h9 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate10 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................11 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js